feat(FE-92-94): Slicing UI detail chickin & refactor number input chickin form

src/components/pages/production/chickin/ChickinTable.tsx

@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { cn, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -124,6 +124,13 @@ const ChickinTable = () => {
           {
             accessorFn: (row) => row.quantity,
             header: 'Jumlah Chickin',
+            cell: (props) => {
+              if (props.row.original.quantity) {
+                return formatNumber(props.row.original.quantity);
+              } else {
+                return '-';
+              }
+            }
           },
           {
             accessorFn: (row) => row.chick_in_date,
@@ -159,7 +166,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () => {
+              const editClickHandler = () =>  {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -279,7 +286,7 @@ const RowOptionsMenu = ({
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      {/* <Button
+      <Button
         href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -287,7 +294,7 @@ const RowOptionsMenu = ({
       >
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
-      </Button> */}
+      </Button>
       <Button
         variant='ghost'
         color='warning'

src/components/pages/production/chickin/form/ChickinForm.tsx

@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -46,7 +47,10 @@ const ChickinForm = ({
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
       note: initialValues?.note ?? '',
-      quantity: initialValues?.quantity ?? initialValues?.project_flock_kandang?.available_quantity ?? 0,
+      quantity:
+        initialValues?.quantity ??
+        initialValues?.project_flock_kandang?.available_quantity ??
+        0,
     };
   }, [initialValues]);
 
@@ -71,10 +75,7 @@ const ChickinForm = ({
       payload: UpdateChickinPayload,
       afterSubmit: (() => void) | undefined
     ) => {
-      const res = await ChickinApi.update(
-        payload.project_flock_kandang_id as number,
-        payload
-      );
+      const res = await ChickinApi.update(payload.id, payload);
       if (isResponseError(res)) {
         setChickinFormErrorMessage(res.message);
         return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
       // reset error message
       setChickinFormErrorMessage('');
 
-      if (initialValues?.project_flock_kandang?.id == undefined) {
+      if (
+        initialValues?.project_flock_kandang?.id == undefined ||
+        (formType == 'edit' && initialValues?.id == undefined)
+      ) {
         return;
       }
 
@@ -105,9 +109,11 @@ const ChickinForm = ({
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
         note: values.note,
         quantity: values.quantity,
+        id: initialValues.id ?? 0,
       };
 
       // cek type form yang disubmit
+      console.log(formType);
       switch (formType) {
         case 'add':
           handleCreate(payload, afterSubmit);
@@ -146,12 +152,12 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
-        <TextInput
+        <NumberInput
           value={formik.values.quantity}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           name='quantity'
-          label='Jumlah Chickin'
+          label='Jumlah (Ekor)'
           required
           isError={
             (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
@@ -162,7 +168,6 @@ const ChickinForm = ({
               ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
               : formik.errors.quantity
           }
-          type='number'
           readOnly
         />
         <TextArea

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -144,7 +144,6 @@ const ProjectFlockTable = () => {
   const deleteModal = useModal();
   const confirmModal = useModal();
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data