From b7ab537b95f60c54e9bb72270c28e880597828ba Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 16:07:02 +0700
Subject: [PATCH] feat(FE-170): add selection checkboxes and enhance project
 details in RecordingTable

---
 .../production/recording/RecordingTable.tsx   | 68 +++++++++++++++++--
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 722589c8..4364f47e 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
-import { cn } from '@/lib/helper';
+import { cn, formatDate } from '@/lib/helper';
 import { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -24,6 +24,8 @@ import { KandangApi } from '@/services/api/master-data';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import toast from 'react-hot-toast';
+import Badge from '@/components/Badge';
+import CheckboxInput from '@/components/input/CheckboxInput';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -325,6 +327,30 @@ const RecordingTable = () => {
       <Table<Recording>
         data={isResponseSuccess(recordings) ? recordings?.data : []}
         columns={[
+          {
+            id: 'select',
+            header: ({ table }) => (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </div>
+            ),
+            cell: ({ row }) => (
+              <div>
+                <CheckboxInput
+                  name='row'
+                  checked={row.getIsSelected()}
+                  disabled={!row.getCanSelect()}
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
+                />
+              </div>
+            ),
+          },
           {
             header: '#',
             cell: (props) =>
@@ -335,7 +361,20 @@ const RecordingTable = () => {
           {
             header: 'Nama Project',
             cell: (props) =>
-              `Project ${props.row.original.project_flock_kandangs_id}`,
+              `Project ${props.row.original.project_flock_kandang_id}`,
+          },
+          {
+            header: 'Kategori',
+            cell: (props) => {
+              const category = props.row.original.project_flock_category;
+              if (!category) return '-';
+              const color = category === 'LAYING' ? 'info' : 'warning';
+              return (
+                <Badge variant='soft' color={color}>
+                  {category}
+                </Badge>
+              );
+            },
           },
           {
             header: 'Umur (hari)',
@@ -345,17 +384,38 @@ const RecordingTable = () => {
             accessorKey: 'record_date',
             header: 'Waktu Recording',
             cell: (props) =>
-              new Date(props.row.original.record_datetime).toLocaleDateString(),
+              formatDate(props.row.original.record_datetime, 'DD MMMM YYYY'),
           },
           {
             header: 'Populasi Awal',
             cell: (props) =>
               props.row.original.total_chick_qty?.toLocaleString() || '-',
           },
+          {
+            header: 'Status Approval',
+            cell: (props) => props.row.original.approval?.step_name || '-',
+          },
+          {
+            header: 'Status Grading Telur',
+            cell: (props) => {
+              const status = props.row.original.egg_grading_status;
+              if (!status) return '-';
+              const color = status === 'COMPLETED' ? 'success' : 'warning';
+              return (
+                <Badge variant='soft' color={color}>
+                  {status}
+                </Badge>
+              );
+            },
+          },
+          {
+            header: 'Dibuat Oleh',
+            cell: (props) => props.row.original.created_user?.name || '-',
+          },
           {
             header: 'Tanggal Submit',
             cell: (props) =>
-              new Date(props.row.original.created_at).toLocaleString(),
+              formatDate(props.row.original.created_at, 'DD MMMM YYYY'),
           },
           {
             header: 'Aksi',