update

src/app/(main)/layout.tsx

@@ -22,7 +22,6 @@ export default async function MainLayout({
 
   return (
     <>
-      <AutoLogoutProvider/>
       <AppBar
         profileName={session.user.name!}
         avatarImageSrc={session.user.image || undefined}
@@ -35,6 +34,7 @@ export default async function MainLayout({
         }}
       >
         <I18nProvider namespaces={["common"]}>
+          <AutoLogoutProvider/>
           <Stack spacing={2}>
             <Breadcrumb />
             {children}

src/components/AutoLogoutProvider/AutoLogoutProvider.tsx

@@ -2,6 +2,7 @@
 import React, { createContext, useState, useEffect, ReactNode } from 'react';
 import { useIdleTimer } from "react-idle-timer";
 import { signOut } from "next-auth/react";
+import { useTranslation } from 'react-i18next';
 
 interface TimerContextProps {
     lastRequestTime: number;
@@ -16,6 +17,7 @@ interface AutoLogoutProviderProps {
 }
 
 const AutoLogoutProvider: React.FC<AutoLogoutProviderProps> = ({ children, isUserLoggedIn }) => {
+    const { t } = useTranslation("common")
     const [lastRequestTime, setLastRequestTime] = useState(Date.now());
     const [logoutInterval, setLogoutInterval] = useState(1); // minute
     const [state, setState] = useState('Active');
@@ -65,6 +67,7 @@ const AutoLogoutProvider: React.FC<AutoLogoutProviderProps> = ({ children, isUse
             if (state !== "Active" && lastActiveTab) {
                 const timeElapsed = currentTime - lastRequestTime;
                 if (timeElapsed >= logoutInterval * 60 * 1000) {
+                    alert(t("Your session has expired, please log in again."))
                     // console.log(timeElapsed / 1000);
                     // console.log(logoutInterval* 60);
                     // console.log(logoutInterval * 60 * 1000 - timeElapsed)

src/components/ProgressByTeamSearch/ProgressByTeamSearchWrapper.tsx

@@ -10,7 +10,9 @@ interface SubComponents {
 const ProgressByTeamSearchWrapper: React.FC & SubComponents = async () => {
   const teamprojects = await fetchTeamProjects();
 
-  return <ProgressByTeamSearch projects={teamprojects} />;
+  const _teamprojects = teamprojects.length > 1 ? [{id: 0, teamId: 0, teamLeadId: 0, teamCode: "All", teamName: "", projectNo: teamprojects.reduce((acc, cur) => acc + cur.projectNo, 0)}, ...teamprojects] : teamprojects
+
+  return <ProgressByTeamSearch projects={_teamprojects} />;
 };
 
 ProgressByTeamSearchWrapper.Loading = ProgressByTeamSearchLoading;

src/i18n/en/common.json

@@ -6,6 +6,8 @@
 
     "All": "All",
     
+    "Your session has expired, please log in again.": "Your session has expired, please log in again.",
+
     "Petty Cash": "Petty Cash",
     "Expense": "Expense",
     

src/i18n/zh/common.json

@@ -1,6 +1,8 @@
 {
     "All": "全部",
 
+    "Your session has expired, please log in again.": "登入驗證已過期, 請重新登入.",
+
     "Petty Cash": "小額開支",
     "Expense": "普通開支",