feat(FE-438): Add approval badge to uniformity detail

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

@@ -7,9 +7,41 @@ import { ColumnDef } from '@tanstack/react-table';
 import Button from '@/components/Button';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
+import Badge from '@/components/Badge';
 import { type OptionType } from '@/components/input/SelectInput';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/uniformity/uniformity';
+import { formatDate } from '@/lib/helper';
+
+const statusColorMap: Record<string, string> = {
+  APPROVED: 'bg-[#00D39033]',
+  REJECTED: 'bg-error/10',
+  CREATED: 'bg-[#f3f3f4]',
+};
+
+const statusIndicatorColorMap: Record<string, string> = {
+  APPROVED: 'bg-[#008000]',
+  REJECTED: 'bg-error',
+  CREATED: 'bg-[#D9D9D9]',
+};
+
+const statusTextMap: Record<string, string> = {
+  APPROVED: 'Disetujui',
+  REJECTED: 'Ditolak',
+  CREATED: 'Pengajuan',
+};
+
+const getStatusColor = (status: string): string => {
+  return statusColorMap[status] || 'bg-info';
+};
+
+const getStatusIndicatorColor = (status: string): string => {
+  return statusIndicatorColorMap[status] || 'bg-info';
+};
+
+const getStatusText = (status: string): string => {
+  return statusTextMap[status] || status;
+};
 
 type DetailOptionType = OptionType & {
   id: string;
@@ -59,7 +91,12 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
       {
         id: 'file-name',
         value: 'file-name',
-        label: 'File Name',
+        label: 'File Uniformity',
+      },
+      {
+        id: 'approval-status',
+        value: 'approval-status',
+        label: 'Status',
       },
     ];
   }, [initialValues]);
@@ -76,16 +113,40 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
         header: 'Value',
         cell: (props) => {
           const id = props.row.original.id;
-          const { info_umum } = initialValues!;
+          const { info_umum, latest_approval } = initialValues!;
+
+          const statusValue = latest_approval?.action ?? '-';
 
           const valueMap: Record<string, string> = {
-            tanggal: info_umum.tanggal,
+            tanggal: formatDate(info_umum.tanggal, 'DD MMMM YYYY'),
             'lokasi-farm': info_umum.lokasi_farm,
             'project-flock': info_umum.project_flock,
             kandang: info_umum.kandang,
             'file-name': info_umum.file_name,
+            'approval-status': statusValue,
           };
 
+          if (id === 'approval-status') {
+            const status = latest_approval?.action;
+            if (status) {
+              return (
+                <div className='w-full'>
+                  <Badge
+                    statusIndicator={true}
+                    variant='soft'
+                    className={{
+                      badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
+                      status: getStatusIndicatorColor(status),
+                    }}
+                  >
+                    {getStatusText(status)}
+                  </Badge>
+                </div>
+              );
+            }
+            return <span>-</span>;
+          }
+
           return <span>{valueMap[id] || '-'}</span>;
         },
       },
@@ -114,7 +175,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
               <Table<DetailOptionType>
                 data={infoUmumTableData}
                 columns={columnsInfoUmum}
-                pageSize={5}
+                pageSize={6}
                 className={{
                   containerClassName: 'mb-0',
                   paginationClassName: 'hidden',

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

@@ -63,6 +63,7 @@ export type UniformityDetail = BaseMetadata & {
   sampling: UniformitySampling;
   result: UniformityResult;
   uniformity_details: UniformityDetailItem[];
+  latest_approval?: BaseApproval;
 };
 
 // ==================== VERIFY RESPONSE ====================