Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-278/TASK-311-adjustment-purchase-and-expense

src/app/closing/detail/page.tsx

@@ -4,7 +4,6 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
 import ClosingDetail from '@/components/pages/closing/ClosingDetail';
-import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -20,9 +19,9 @@ const ClosingDetailPage = () => {
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
-  const { data: salesReport, isLoading: isLoadingSalesReport } = useSWR(
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId,
+    closingId ? `sales-${closingId}` : null,
-    (id: number) => ClosingApi.getPenjualan(id)
+    () => ClosingApi.getPenjualan(Number(closingId))
   );
 
   if (!closingId) {
@@ -40,17 +39,18 @@ const ClosingDetailPage = () => {
     return;
   }
 
+  const isLoading = isLoadingClosing || isLoadingSales;
+
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingClosing && (
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
-        <span className='loading loading-spinner loading-xl' />
-      )}
 
-      {!isLoadingClosing && isResponseSuccess(closing) && (
+      {!isLoading && isResponseSuccess(closing) && (
-        <ClosingDetail id={Number(closingId)} initialValue={closing.data} />
+        <ClosingDetail
-      )}
+          id={Number(closingId)}
-      {!isLoadingSalesReport && isResponseSuccess(salesReport) && (
+          initialValue={closing.data}
-        <SalesReportTable type='detail' initialValues={salesReport.data} />
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+        />
       )}
     </div>
   );

src/components/helper/RequireAuth.tsx

@@ -1,54 +1,46 @@
 'use client';
 
 import { ReactNode, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
-import useSWRImmutable from 'swr/immutable';
 
 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:

src/lib/auth-helper.ts

@@ -0,0 +1,25 @@
+/**
+ * Redirects the user to the SSO login page with loop protection.
+ *
+ * This function checks a session storage timestamp to ensure that redirects
+ * do not happen too frequently (blocking infinite redirect loops).
+ */
+export const redirectToSSO = () => {
+  if (typeof window === 'undefined') return;
+
+  const lastRedirect = sessionStorage.getItem('auth_redirect_timestamp');
+  const now = Date.now();
+
+  // Loop protection: allow redirect only if last one was > 2 seconds ago
+  // or if no redirect has happened yet.
+  if (!lastRedirect || now - parseInt(lastRedirect, 10) > 2000) {
+    sessionStorage.setItem('auth_redirect_timestamp', now.toString());
+    // const ssoLoginUrl = `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`;
+
+    const ltiSsoStart = `${process.env.NEXT_PUBLIC_API_BASE_URL as string}/sso/start?client_id=${process.env.NEXT_PUBLIC_CLIENT_ID as string}&redirect_url=${window.location.href}`;
+    const ssoLoginUrl = `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${ltiSsoStart}`;
+    window.location.href = ssoLoginUrl;
+  } else {
+    console.error('Redirect loop detected. Aborting redirect.');
+  }
+};

src/services/api/closing.ts

@@ -20,10 +20,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     id: number
   ): Promise<BaseApiResponse<ClosingSales> | undefined> {
     try {
-      const getPenjualanPath = `${id}/penjualan`;
+      const getPenjualanPath = `${this.basePath}/${id}/penjualan`;
-      return await this.customRequest<BaseApiResponse<ClosingSales>>(
+      const getPenjualanRes =
-        getPenjualanPath
+        await httpClient<BaseApiResponse<ClosingSales>>(getPenjualanPath);
-      );
+
+      return getPenjualanRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse<ClosingSales>>(error)) {
         return error.response?.data;

src/services/http/client.ts

@@ -2,6 +2,8 @@ import axios from 'axios';
 import type { AxiosError, AxiosRequestConfig } from 'axios';
 import { RequestOptions } from '@/services/http/base';
 
+import { redirectToSSO } from '@/lib/auth-helper';
+
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
 const axiosClient = axios.create({ baseURL: BASE_URL, timeout: 10_000 });
 
@@ -9,8 +11,7 @@ axiosClient.interceptors.response.use(
   (response) => response,
   (error: AxiosError) => {
     if (error.response?.status === 401) {
-      const ssoLoginUrl = `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`;
+      redirectToSSO();
-      window.location.href = ssoLoginUrl;
     }
 
     return Promise.reject(error);