Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-282/TASK-318-319-slicing-and-adjustment-egg-grading-form

src/components/helper/RequireAuth.tsx

@@ -1,54 +1,46 @@
 'use client';
 
 import { ReactNode, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import useSWRImmutable from 'swr/immutable';
+import useSWR from 'swr';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
 import { AxiosError } from 'axios';
+import { redirectToSSO } from '@/lib/auth-helper';
 
 interface RequireAuthProps {
   children?: ReactNode;
 }
 
 const RequireAuth = ({ children }: RequireAuthProps) => {
-  const router = useRouter();
   const { setUser, setIsLoadingUser } = useAuth();
 
   const {
     data: userResponse,
     isLoading: isLoadingUserResponse,
     error: userErrorResponse,
-  } = useSWRImmutable<
+  } = useSWR<
     GetMeResponse & { ok?: boolean },
     AxiosError<BaseApiResponse>,
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    refreshInterval: 0,
   });
 
-  useEffect(() => {
-    setIsLoadingUser(isLoadingUserResponse);
-  }, [isLoadingUserResponse, setIsLoadingUser]);
-
   useEffect(() => {
     if (isResponseSuccess(userResponse)) {
       setUser(userResponse.data);
-    } else if (
-      isResponseError(userErrorResponse?.response?.data) &&
-      typeof window !== 'undefined'
-    ) {
-      router.replace(
-        `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`
-      );
     }
-  }, [userResponse, userErrorResponse, setIsLoadingUser, setUser]);
+  }, [userResponse, setUser]);
+
+  // Explicitly handle 401 redirect from the component level
+  useEffect(() => {
+    if (userErrorResponse?.response?.status === 401) {
+      redirectToSSO();
+    }
+  }, [userErrorResponse]);
 
   if (isLoadingUserResponse && !userResponse && !userErrorResponse) {
     return (
@@ -58,6 +50,24 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     );
   }
 
+  if (userErrorResponse) {
+    return (
+      <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+        <h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
+        <p className='text-gray-600'>
+          Please try refreshing the page or contact support if the problem
+          persists.
+        </p>
+        <button
+          className='btn btn-primary'
+          onClick={() => window.location.reload()}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
   return <>{isResponseSuccess(userResponse) && children}</>;
 };
 

src/components/pages/closing/ClosingDetail.tsx

@@ -7,15 +7,24 @@ import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
 
-import { ClosingGeneralInformation } from '@/types/api/closing';
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+} from '@/types/api/closing';
 import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+import SalesReportTable from './sale/SalesReportTable';
 
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
+  salesData?: BaseClosingSales;
 }
 
-const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
+const ClosingDetail: React.FC<ClosingDetailProps> = ({
+  id,
+  initialValue,
+  salesData,
+}) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
   const closingDetailTabs = useMemo(() => {
@@ -33,7 +42,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
       {
         id: 'penjualan',
         label: 'Penjualan',
-        content: 'Penjualan',
+        content: <SalesReportTable initialValues={salesData} />,
       },
       {
         id: 'overhead',

src/components/pages/closing/sale/SalesReportTable.tsx

@@ -263,7 +263,7 @@ const SalesReportTable = ({
                 tableWrapperClassName: 'overflow-x-auto',
                 tableClassName: 'w-full table-auto text-sm',
                 headerColumnClassName:
-                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                  'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
                 bodyRowClassName:
                   'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
                 bodyColumnClassName: