feat(FE-438): Handle approve/reject via URL and add buttons

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

@@ -10,6 +10,7 @@ import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
 import { formatNumber } from '@/lib/helper';
 import { type OptionType } from '@/components/input/SelectInput';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/uniformity/uniformity';
 
 type DetailOptionType = OptionType & {
@@ -29,9 +30,19 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     router.back();
   };
 
+  const handleApprove = () => {
+    router.push(`/uniformity?action=approve&id=${initialValues.id}`);
+  };
+
+  const handleReject = () => {
+    router.push(`/uniformity?action=reject&id=${initialValues.id}`);
+  };
+
   const infoUmumTableData: DetailOptionType[] = useMemo(() => {
     if (!initialValues) return [];
 
+    const { info_umum } = initialValues;
+
     return [
       {
         id: 'tanggal',
@@ -90,116 +101,6 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     [initialValues]
   );
 
-  const samplingTableData: DetailOptionType[] = useMemo(() => {
-    if (!initialValues) return [];
-
-    return [
-      {
-        id: 'sampling-size',
-        value: 'sampling-size',
-        label: 'Sampling size',
-      },
-      {
-        id: 'mean-weight',
-        value: 'mean-weight',
-        label: 'Mean Weight',
-      },
-      {
-        id: 'min-limit',
-        value: 'min-limit',
-        label: 'Min Limit (-10%)',
-      },
-      {
-        id: 'max-limit',
-        value: 'max-limit',
-        label: 'Max Limit (+10%)',
-      },
-    ];
-  }, [initialValues]);
-
-  const columnsSampling: ColumnDef<DetailOptionType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'label',
-        header: 'Label',
-        cell: (props) => props.row.original.label,
-      },
-      {
-        accessorKey: 'value',
-        header: 'Value',
-        cell: (props) => {
-          const id = props.row.original.id;
-          const { sampling } = initialValues!;
-
-          const valueMap: Record<string, string> = {
-            'sampling-size': `${formatNumber(sampling.chick_qty_of_weight)} of Birds`,
-            'mean-weight': `${formatNumber(sampling.mean_weight)} g`,
-            'min-limit': `${formatNumber(sampling.mean_down)} g`,
-            'max-limit': `${formatNumber(sampling.mean_up)} g`,
-          };
-
-          return <span>{valueMap[id] || '-'}</span>;
-        },
-      },
-    ],
-    [initialValues]
-  );
-
-  const resultTableData: DetailOptionType[] = useMemo(() => {
-    if (!initialValues) return [];
-
-    return [
-      {
-        id: 'ideal-birds',
-        value: 'ideal-birds',
-        label: 'Ideal Birds',
-      },
-      {
-        id: 'outside-range',
-        value: 'outside-range',
-        label: 'Outside Range',
-      },
-      {
-        id: 'uniformity',
-        value: 'uniformity',
-        label: 'Uniformity',
-      },
-      {
-        id: 'cv',
-        value: 'cv',
-        label: 'CV',
-      },
-    ];
-  }, [initialValues]);
-
-  const columnsResult: ColumnDef<DetailOptionType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'label',
-        header: 'Label',
-        cell: (props) => props.row.original.label,
-      },
-      {
-        accessorKey: 'value',
-        header: 'Value',
-        cell: (props) => {
-          const id = props.row.original.id;
-          const { result } = initialValues!;
-
-          const valueMap: Record<string, string> = {
-            'ideal-birds': `${formatNumber(result.uniform_qty)} of Birds`,
-            'outside-range': `${formatNumber(result.outside_qty)} of Birds`,
-            uniformity: `${result.uniformity} %`,
-            cv: `${result.cv}`,
-          };
-
-          return <span>{valueMap[id] || '-'}</span>;
-        },
-      },
-    ],
-    [initialValues]
-  );
-
   return (
     <section className='w-full h-full bg-white border-l border-gray-200'>
       {/* Header */}
@@ -233,34 +134,19 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
                   paginationClassName: 'hidden',
                 }}
               />
-            </div>
 
-            {/* Sampling */}
-            <div className=''>
-              <p className='text-sm font-medium mb-5'>Sampling and Range</p>
-              <Table<DetailOptionType>
-                data={samplingTableData}
-                columns={columnsSampling}
-                pageSize={4}
-                className={{
-                  containerClassName: 'mb-0',
-                  paginationClassName: 'hidden',
-                }}
-              />
-            </div>
-
-            {/* Result */}
-            <div className=''>
-              <p className='text-sm font-medium mb-5'>Result</p>
-              <Table<DetailOptionType>
-                data={resultTableData}
-                columns={columnsResult}
-                pageSize={4}
-                className={{
-                  containerClassName: 'mb-0',
-                  paginationClassName: 'hidden',
-                }}
-              />
+              <div className='divider my-3.5' />
+              {/* Approve/Reject Buttons */}
+              {initialValues.result && (
+                <RequirePermission permissions='lti.production.uniformity.approve'>
+                  <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 [&_button]:rounded-lg'>
+                    <Button variant='outline' onClick={handleReject}>
+                      Reject
+                    </Button>
+                    <Button onClick={handleApprove}>Approve</Button>
+                  </div>
+                </RequirePermission>
+              )}
             </div>
           </div>
         ) : (