feat(FE-316): Save and preview uniformity verification

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -60,6 +60,9 @@ const UniformityForm = ({
   );
   const isNextStep = useUiStore((s) => s.isNextStep);
   const setIsNextStep = useUiStore((s) => s.setIsNextStep);
+  const setVerifyUniformityResult = useUiStore(
+    (s) => s.setVerifyUniformityResult
+  );
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
@@ -239,6 +242,10 @@ const UniformityForm = ({
         return;
       }
 
+      if (isResponseSuccess(res) && res.data) {
+        setVerifyUniformityResult(res.data);
+      }
+
       toast.success(res?.message as string);
 
       if (formType === 'add') {

src/components/pages/uniformity/form/UniformityPreviewForm.tsx

@@ -1,21 +1,59 @@
 'use client';
 
+import { useMemo } from 'react';
 import { Icon } from '@iconify/react';
+import { ColumnDef } from '@tanstack/react-table';
 import Button from '@/components/Button';
 import Tooltip from '@/components/Tooltip';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
 import RequirePermission from '@/components/helper/RequirePermission';
+import Table from '@/components/Table';
+
+type BodyWeightData = {
+  id: string;
+  number: number;
+  weight: number;
+};
 
 const UniformityPreviewForm = () => {
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
   const setIsNextStep = useUiStore((s) => s.setIsNextStep);
+  const verifyUniformityResult = useUiStore((s) => s.verifyUniformityResult);
 
   const handleClose = () => {
     setExpandedDrawerOpen(false);
     setIsNextStep(false);
   };
 
+  const tableData = useMemo(() => {
+    if (!verifyUniformityResult) return [];
+
+    return verifyUniformityResult.body_weights.map((weight, index) => ({
+      id: `weight-${index}`,
+      number: index + 1,
+      weight: weight,
+    }));
+  }, [verifyUniformityResult]);
+
+  const columns: ColumnDef<BodyWeightData>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'number',
+        header: 'No',
+        cell: (props) => props.row.original.number,
+      },
+      {
+        accessorKey: 'weight',
+        header: 'Weight (g)',
+        cell: (props) => (
+          <span className='font-medium'>{props.row.original.weight}</span>
+        ),
+      },
+    ],
+    []
+  );
+
   return (
     <section className='w-full h-full bg-white border-l border-gray-200'>
       {/* Header */}
@@ -43,7 +81,29 @@ const UniformityPreviewForm = () => {
 
       {/* Form Section */}
       <div className='divider mt-3'></div>
-      <section className='w-full px-6'></section>
+      <section className='w-full px-6'>
+        {verifyUniformityResult ? (
+          <div className='flex flex-col gap-4'>
+            <Table<BodyWeightData>
+              data={tableData}
+              columns={columns}
+              pageSize={20}
+              className={{ containerClassName: 'mb-10' }}
+            />
+          </div>
+        ) : (
+          <div className='flex flex-col items-center justify-center py-10 text-gray-400'>
+            <Icon
+              icon='mdi:file-document-outline'
+              width={64}
+              height={64}
+              className='mb-4'
+            />
+            <p className='text-lg'>No data available</p>
+            <p className='text-sm'>Upload a file to verify uniformity</p>
+          </div>
+        )}
+      </section>
     </section>
   );
 };