feat(FE-181-179-220): Slicing UI, Client Side Validation and API Integration for Delivery Order

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

@@ -20,7 +20,6 @@ import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 import useSWR from 'swr';
-import ChickinForm from './form/ChickinForm';
 
 const ChickinTable = () => {
   const {

src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx

@@ -8,8 +8,6 @@ import {
   ChickinSchema,
 } from '../ChickinForm.schema';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import NumberInput from '@/components/input/NumberInput';
 import Button from '@/components/Button';
 import { useCallback, useEffect, useState } from 'react';
 import { useFormik } from 'formik';
@@ -24,7 +22,6 @@ import Alert from '@/components/Alert';
 import { formatNumber } from '@/lib/helper';
 
 const ChickinFormView = ({
-  formType = 'add',
   initialValues,
   afterSubmit,
 }: {
@@ -122,7 +119,7 @@ const ChickinFormView = ({
   return (
     <form
       className='flex flex-col gap-4'
-      onReset={(e) => {
+      onReset={() => {
         handleReset();
       }}
       onSubmit={formik.handleSubmit}

src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx

@@ -14,7 +14,6 @@ import { cn } from '@/lib/helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { ProjectFlockKandangApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
@@ -42,10 +41,7 @@ const ProjectFlockChickinDetail = ({
   const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
 
   // Fetch Data
-  const {
-    data: listProjectFlockKandang,
-    isLoading: isLoadingListProjectFlockKandang,
-  } = useSWR(
+  const { data: listProjectFlockKandang } = useSWR(
     `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
       search: searchProjectFlock,
       project_flock_id:

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -42,11 +42,6 @@ export const ProjectFlockFormSchema = Yup.object({
     .min(1, 'Lokasi wajib diisi!')
     .required('Lokasi wajib diisi!'),
 
-  period: Yup.number()
-    .required('Periode wajib diisi!')
-    .typeError('Periode harus berupa angka')
-    .min(1, 'Minimal periode adalah 1'),
-
   kandang_ids: Yup.array()
     .of(Yup.number().typeError('Kandang tidak valid!'))
     .min(1, 'Minimal harus ada 1 kandang!')

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -29,7 +29,6 @@ import {
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
-import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
@@ -143,15 +142,14 @@ const ProjectFlockForm = ({
     mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
-  const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
+  const { data: periodFlocks, mutate: refreshPeriodFlocks } = useSWR(
     `${selectedFlock?.toString()}/periods`,
-    (id: string) => ProjectFlockApi.getNextPeriod(id)
+    () => ProjectFlockApi.getNextPeriod(parseInt(selectedLocation as string))
   );
 
   const {
     approvals,
     isLoading: approvalsLoading,
-    rawDataApprovals: rawDataApprovals,
     refresh: refreshApprovals,
   } = useApprovalSteps({
     latestApproval: initialValues?.approval,
@@ -182,6 +180,7 @@ const ProjectFlockForm = ({
           formik.setFieldValue('kandang_ids', selectedRowIds);
         }
       }
+      refreshPeriodFlocks();
     }
   }, [kandang, selectedLocation]);
   useEffect(() => {
@@ -319,7 +318,6 @@ const ProjectFlockForm = ({
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
@@ -370,7 +368,6 @@ const ProjectFlockForm = ({
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
@@ -390,7 +387,6 @@ const ProjectFlockForm = ({
         category: values.category as string,
         fcr_id: values.fcr_id as number,
         location_id: values.location_id as number,
-        period: values.period as number,
         kandang_ids: values.kandang_ids as number[],
       };
 
@@ -419,8 +415,6 @@ const ProjectFlockForm = ({
       if (initialValues?.area_id) {
         setSelectedArea(initialValues?.area_id.toString() as string);
       }
-
-      formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
 
@@ -449,15 +443,6 @@ const ProjectFlockForm = ({
     formik.validateForm();
   }, [formik.values]);
 
-  useEffect(() => {
-    if (isResponseSuccess(periodFlocks)) {
-      formik.setFieldValue('period', periodFlocks.data.next_period);
-    }
-    if (isResponseError(periodFlocks)) {
-      console.log(periodFlocks?.message as string);
-    }
-  }, [periodFlocks]);
-
   useEffect(() => {
     const selectedRowIds = Object.keys(rowSelection)
       .filter((id) => rowSelection[id])
@@ -555,7 +540,7 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        {approvals && !approvalsLoading && (
+        {approvals && !approvalsLoading && formType == 'detail' && (
           <ApprovalSteps approvals={approvals} />
         )}
         {formType == 'detail' && (
@@ -701,22 +686,6 @@ const ProjectFlockForm = ({
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
-                <TextInput
-                  required
-                  type='number'
-                  name='period'
-                  label='Periode'
-                  placeholder='Masukkan periode yang project'
-                  value={formik.values.period ?? (1 as number)}
-                  onChange={formik.handleChange}
-                  isError={
-                    formik.touched.period && Boolean(formik.errors.period)
-                  }
-                  errorMessage={formik.errors.period as string}
-                  readOnly={formType === 'detail'}
-                  disabled={true}
-                  isLoading={isLoadingPeriodFlocks}
-                />
               </div>
             </div>
           </div>
@@ -750,6 +719,9 @@ const ProjectFlockForm = ({
                     <span className='loading loading-dots loading-xl'></span>
                   )}
                   <ProjectFlockKandangTable
+                    listPeriods={
+                      isResponseSuccess(periodFlocks) ? periodFlocks.data : []
+                    }
                     listKandang={optionsKandang}
                     rowSelection={rowSelection}
                     setRowSelection={setRowSelection}

src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

@@ -5,10 +5,12 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockPeriods } from '@/types/api/production/project-flock';
 import { OnChangeFn, Row } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 const ProjectFlockKandangTable = ({
+  listPeriods,
   listKandang,
   rowSelection,
   setRowSelection,
@@ -16,6 +18,7 @@ const ProjectFlockKandangTable = ({
   initialValues,
   formType = 'add',
 }: {
+  listPeriods: ProjectFlockPeriods;
   listKandang: Kandang[];
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
@@ -134,6 +137,19 @@ const ProjectFlockKandangTable = ({
             accessorFn: (row) => row.capacity,
             header: 'Kapasitas',
           },
+          {
+            accessorFn: (row) => row.location?.name,
+            header: 'Periode',
+            cell: (props) => {
+              console.log('listPeriods');
+              console.log(listPeriods);
+              const period =
+                listPeriods.length > 0
+                  ? listPeriods.find((p) => p.id == props.row.original.id)
+                  : undefined;
+              return period?.period ?? '-';
+            },
+          },
           {
             accessorFn: (row) => row.pic?.name,
             header: 'Penanggung Jawab',