feat(FE-438): Load uniformity details on demand

src/components/pages/uniformity/detail/UniformityDetail.tsx

@@ -49,6 +49,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
         uniformity_details={initialValues.uniformity_details}
         sampling={initialValues.sampling}
         result={initialValues.result}
+        uniformityId={initialValues.id}
       />
     );
 

src/components/pages/uniformity/detail/UniformityDetailsPreview.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
@@ -21,26 +21,51 @@ import {
   getWeightStatusText,
 } from '@/components/pages/uniformity/uniformity-utils';
 import { BodyWeightData } from '@/types/api/uniformity/uniformity';
+import Button from '@/components/Button';
+import { UniformityApi } from '@/services/api/uniformity';
+import useSWR from 'swr';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 interface UniformityDetailsPreviewProps {
   info_umum: UniformityInfoUmum;
-  uniformity_details: UniformityDetailItem[];
   sampling: UniformitySampling;
   result: UniformityResult;
+  uniformity_details?: UniformityDetailItem[];
+  uniformityId: number;
 }
 
 const UniformityDetailsPreview = ({
   info_umum,
-  uniformity_details,
+  uniformity_details: initialUniformityDetails,
   sampling,
   result,
+  uniformityId,
 }: UniformityDetailsPreviewProps) => {
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const [shouldFetchDetails, setShouldFetchDetails] = useState(false);
+
+  const { data: uniformityDetailResponse, isLoading } = useSWR(
+    shouldFetchDetails
+      ? `uniformity-detail-${uniformityId}-with-details`
+      : null,
+    () => UniformityApi.getUniformityDetail(uniformityId, true)
+  );
+
+  const uniformity_details = useMemo(() => {
+    if (shouldFetchDetails && isResponseSuccess(uniformityDetailResponse)) {
+      return uniformityDetailResponse.data.uniformity_details;
+    }
+    return initialUniformityDetails;
+  }, [shouldFetchDetails, uniformityDetailResponse, initialUniformityDetails]);
 
   const handleClose = () => {
     setExpandedDrawerOpen(false);
   };
 
+  const fetchWeightData = () => {
+    setShouldFetchDetails(true);
+  };
+
   const samplingTableData: DetailOptionType[] = useMemo(() => {
     if (!sampling) return [];
 
@@ -219,7 +244,6 @@ const UniformityDetailsPreview = ({
                 }}
               />
             </div>
-
             {/* Result */}
             <div className=''>
               <p className='text-sm font-medium mb-5'>Result</p>
@@ -234,15 +258,32 @@ const UniformityDetailsPreview = ({
               />
             </div>
 
-            {/* Body Weight Details */}
+            {/* Body Weight Details Button */}
             <div className='mt-4'>
-              <Table<BodyWeightData>
+              <Button
-                data={tableData}
+                type='button'
-                columns={columnsUniformity}
+                onClick={fetchWeightData}
-                pageSize={15}
+                disabled={isLoading}
-                className={{ containerClassName: 'mb-5' }}
+                className='w-full'
-              />
+              >
+                {isLoading ? 'Loading...' : 'Show Body Weight Details'}
+              </Button>
             </div>
+            {/*{!uniformity_details || uniformity_details.length === 0 ? (
+              <></>
+            ) : null}*/}
+
+            {/* Body Weight Details */}
+            {uniformity_details && uniformity_details.length > 0 && (
+              <div className='mt-4'>
+                <Table<BodyWeightData>
+                  data={tableData}
+                  columns={columnsUniformity}
+                  pageSize={15}
+                  className={{ containerClassName: 'mb-5' }}
+                />
+              </div>
+            )}
           </div>
         ) : (
           <div className='flex flex-col items-center justify-center py-10 text-gray-400'>

src/services/api/uniformity.ts

@@ -22,10 +22,17 @@ export class UniformityApiService extends BaseApiService<
   }
 
   async getUniformityDetail(
-    id: number
+    id: number,
+    with_details = false
   ): Promise<BaseApiResponse<UniformityDetail> | undefined> {
     return await this.customRequest<BaseApiResponse<UniformityDetail>>(
-      `/${id}`
+      `/${id}`,
+      {
+        method: 'GET',
+        params: {
+          with_details: with_details,
+        },
+      }
     );
   }
 

src/types/api/uniformity/uniformity.d.ts

@@ -62,7 +62,7 @@ export type UniformityDetail = BaseMetadata & {
   info_umum: UniformityInfoUmum;
   sampling: UniformitySampling;
   result: UniformityResult;
-  uniformity_details: UniformityDetailItem[];
+  uniformity_details?: UniformityDetailItem[];
   latest_approval?: BaseApproval;
 };