modify: error tips page

BigSillyTiger · May 7, 2024 · 399f2e7 · 399f2e7
1 parent 90a08b8
commit 399f2e7
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/src/components/ErrorTips.tsx b/src/components/ErrorTips.tsx
@@ -1,13 +1,31 @@
 import type { FC } from "react";
 import Card from "./card";
-import { useAsyncError } from "react-router-dom";
+import { useAsyncError, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 const ErrorTips: FC = () => {
     const { t } = useTranslation();
+    const nevigate = useNavigate();
     const error = useAsyncError();
-    console.log("---> Error EL Tips:", error);
-    return <Card>{t("tips.errorTips")}</Card>;
+    console.log("---> Error Tips Page:", error);
+    return (
+        <div className="h-full w-full flex flex-col justify-center items-center">
+            <Card className="flex flex-col justify-center items-center">
+                <p className="text-lg font-bold">{t("tips.errorTips")}</p>
+                <button
+                    type="button"
+                    className="w-full rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        return nevigate("/login", { replace: true });
+                    }}
+                >
+                    {t("btn.goToLogin")}
+                </button>
+            </Card>
+            ;
+        </div>
+    );
 };
 
 export default ErrorTips;
diff --git a/src/components/loadingEle/loadingPage.tsx b/src/components/loadingEle/loadingPage.tsx
@@ -3,7 +3,7 @@ import SpinningEle from "./SpinningEle";
 const LoadingPage = () => {
     return (
         <>
-            <div className="flex justify-center">
+            <div className="flex w-full h-full justify-center items-center">
                 <SpinningEle />
             </div>
         </>

diff --git a/src/configs/i18n/scriptEn.ts b/src/configs/i18n/scriptEn.ts
@@ -99,6 +99,7 @@ const en = {
             download: "Download",
             edit: "Edit",
             editInfo: "Edit Personal Info",
+            goToLogin: "Go to Login",
             invoice: "Invoice",
             newOrder: "New Order",
             newService: "New Service",
@@ -304,7 +305,8 @@ const en = {
             noDutyToday: "No Work Assignment Today",
             noDutyTomorrow: "No Work Assignment Tomorrow",
             noDeduction: "No Deduction",
-            errorTips: "Something went wrong.",
+            errorTips:
+                "Something went wrong. Pleas try Re-Login or Contact Manager.",
             unfinishedPS: "Unfinished Payslip",
             unconfirmedWL: "Unconfirmed Worklogs",
             noClient: "No client",

diff --git a/src/pages/dashboard/MainContent.tsx b/src/pages/dashboard/MainContent.tsx
@@ -61,7 +61,7 @@ const MainContent: FC = () => {
     }, [newTodayWLs]);
 
     return (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 px-4 sm:px-6 lg:px-8 top-0">
             <div className="h-screen lg:h-[45dvh] flex flex-col md:flex-row px-2 gap-4">
                 <DutyCard
                     worklogs={newTodayWLs}
@@ -70,7 +70,7 @@ const MainContent: FC = () => {
                     }
                 />
 
-                <OrderArrangement className="h-[100dvh] lg:h-[45dvh] md:w-full lg:w-[45vw]" />
+                <OrderArrangement className="h-[100dvh] lg:h-[45dvh] md:w-full " />
             </div>
             {currentAdmin.role === ROLES.manager && (
                 <div className="px-2">

diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
@@ -46,7 +46,7 @@ const Dashboard: FC = () => {
     }, [actionData, modalOpen, setModalOpen, t]);
 
     return (
-        <div className="mx-2 px-0">
+        <div className="container border-0">
             <Suspense fallback={<SpinningEle />}>
                 <Await resolve={allPromise} errorElement={<ErrorTips />}>
                     <MainContent />

diff --git a/src/pages/setting/MainContent.tsx b/src/pages/setting/MainContent.tsx
@@ -15,7 +15,7 @@ const MainContent: FC = () => {
     ];
 
     return (
-        <div className="container">
+        <div className="px-4 sm:px-6 lg:px-8 top-0">
             <Tab.Group defaultIndex={0}>
                 <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
                     {mTabList.map((item, index) => {