Merge branch 'hotfix/purchase-and-project-flock-form' into 'development'

[HOTFIX/FE] Refactor Purchase (Staff & Receipt/Receive) and Project Flock Form (Modal)

See merge request mbugroup/lti-web-client!322

src/components/input/SelectInput.tsx

@@ -246,8 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputPrefix
@@ -278,15 +278,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             className={cn('w-full flex-1', className?.select)}
             classNames={{
               control: ({ isFocused, isDisabled }) =>
-                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
+                cn('w-full border transition-shadow', 'rounded-lg!', {
+                  'bg-base-100!': !isDisabled && !readOnly,
+                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
                   'border-indigo-500 ring-2 ring-indigo-200':
                     isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'rounded-l-none!': inputPrefix && !startAdornment,
                   'rounded-r-none!': inputSuffix && !startAdornment,
                 }),
@@ -370,8 +371,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputSuffix
@@ -404,18 +405,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           classNames={{
             control: ({ isFocused, isDisabled }) =>
               cn(
-                'w-full border bg-white transition-shadow',
+                'w-full border transition-shadow',
                 // Gunakan rounded-lg untuk semua kasus
                 'rounded-lg!',
                 {
+                  'bg-base-100!': !isDisabled && !readOnly,
+                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
                   'border-indigo-500 ring-2 ring-indigo-200':
                     isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
                 }
               ),
             valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),

src/components/input/TextInput.tsx

@@ -104,8 +104,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-200 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -126,7 +126,8 @@ const TextInput = ({
                 'rounded-r-none!': inputSuffix,
                 'input-disabled': disabled,
                 'cursor-not-allowed': disabled,
-                'bg-gray-50': disabled,
+                'bg-base-100': !disabled,
+                'bg-base-200': disabled,
               },
               className?.inputWrapper
             )}
@@ -167,8 +168,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-200 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -182,10 +183,12 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
+              'bg-base-100': !disabled,
+              'bg-base-200': disabled,
             },
             className?.inputWrapper
           )}
@@ -201,7 +204,14 @@ const TextInput = ({
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
           />
 

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

@@ -33,6 +33,9 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
+import ProjectFlockConfirmationModal from './ProjectFlockConfirmationModal';
+import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
+import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
 
 const RowOptionsMenu = ({
   props,
@@ -137,6 +140,15 @@ const RowOptionsMenu = ({
 };
 
 const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
+  const isSuccess = useProjectFlockStore((s) => s.isSuccess);
+  const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
+  const createdProjectFlock = useProjectFlockStore(
+    (s) => s.createdProjectFlock
+  );
+  const setCreatedProjectFlock = useProjectFlockStore(
+    (s) => s.setCreatedProjectFlock
+  );
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -180,6 +192,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const deleteModal = useModal();
   const confirmModal = useModal();
+  const successModal = useModal();
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
     'APPROVED'
   );
@@ -275,6 +288,64 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     refreshProjectFlocks();
   }, [refresh]);
 
+  useEffect(() => {
+    if (isSuccess) {
+      successModal.openModal();
+    }
+  }, [isSuccess, successModal]);
+
+  const handleSuccessModalClose = () => {
+    successModal.closeModal();
+    setIsSuccess(false);
+    setCreatedProjectFlock(null);
+  };
+
+  const projectFlockFormValues = useMemo(() => {
+    if (!createdProjectFlock) return undefined;
+
+    return {
+      flock: {
+        value: 0,
+        label: createdProjectFlock.flock_name || '',
+      },
+      flock_name: createdProjectFlock.flock_name || '',
+      area: {
+        value: createdProjectFlock.area_id,
+        label: createdProjectFlock.area?.name || '',
+      },
+      area_id: createdProjectFlock.area_id,
+      category_option: {
+        value: createdProjectFlock.category,
+        label: createdProjectFlock.category,
+      },
+      category: createdProjectFlock.category,
+      production_standard: {
+        value: createdProjectFlock.production_standard_id,
+        label: createdProjectFlock.production_standard?.name || '',
+      },
+      production_standard_id: createdProjectFlock.production_standard_id,
+      location: {
+        value: createdProjectFlock.location_id,
+        label: createdProjectFlock.location?.name || '',
+      },
+      location_id: createdProjectFlock.location_id,
+      kandang_ids: createdProjectFlock.kandangs?.map((k) => k.id) || [],
+      project_budgets:
+        createdProjectFlock.project_budgets?.map((budget) => ({
+          nonstock: budget.nonstock
+            ? {
+                value: budget.nonstock_id,
+                label: budget.nonstock.name || '',
+              }
+            : null,
+          nonstock_id: budget.nonstock_id,
+          qty: budget.qty,
+          price: budget.price,
+          total_price: budget.qty * budget.price,
+        })) || [],
+    } as ProjectFlockFormValues;
+  }, [createdProjectFlock]);
+
   // ====== MEMO ======
   const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
     return selectedRowIds.length === 1
@@ -873,6 +944,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
           isLoading: isApproveLoading,
         }}
       />
+
+      <ProjectFlockConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        text='Data Berhasil Ditambahkan'
+        subtitleText='Data project flock telah berhasil disimpan.'
+        projectFlockForm={projectFlockFormValues}
+        onClose={handleSuccessModalClose}
+        secondaryButton={undefined}
+      />
     </>
   );
 };

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

@@ -52,7 +52,7 @@ import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
 import StatusBadge from '@/components/helper/StatusBadge';
 import { getUniqueFormikErrors } from '@/lib/formik-helper';
-import ProjectFlockConfirmationModal from '../ProjectFlockConfirmationModal';
+import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -213,6 +213,10 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+  const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
+  const setCreatedProjectFlock = useProjectFlockStore(
+    (s) => s.setCreatedProjectFlock
+  );
 
   const [formStep, setFormStep] = useState<'form' | 'confirmation'>('form');
 
@@ -239,7 +243,6 @@ const ProjectFlockForm = ({
   const subscribeValidate = useUiStore((s) => s.subscribeValidate);
   const setIsValid = useUiStore((s) => s.setIsValid);
 
-  const successModal = useModal();
   const deleteModal = useModal();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -262,6 +265,8 @@ const ProjectFlockForm = ({
     loadMore: loadMoreFlock,
   } = useSelect(FlockApi.basePath, 'id', 'name', '', {
     project_category: selectedCategory,
+    location_id: selectedLocation,
+    area_id: selectedArea,
   });
 
   const {
@@ -431,7 +436,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(createProjectFlockRes)) {
       toast.success(createProjectFlockRes?.message as string);
       handleReset();
-      successModal.openModal();
+      setCreatedProjectFlock(createProjectFlockRes?.data ?? null);
+      setIsSuccess(true);
+      router.push('/production/project-flock');
     }
     if (isResponseError(createProjectFlockRes)) {
       setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
@@ -449,7 +456,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(updateProjectFlockRes)) {
       toast.success(updateProjectFlockRes?.message as string);
       handleReset();
-      successModal.openModal();
+      setCreatedProjectFlock(updateProjectFlockRes?.data ?? null);
+      setIsSuccess(true);
+      router.push('/production/project-flock');
     }
     if (isResponseError(updateProjectFlockRes)) {
       setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
@@ -1388,19 +1397,6 @@ const ProjectFlockForm = ({
         </div>
       </form>
 
-      <ProjectFlockConfirmationModal
-        ref={successModal.ref}
-        type='success'
-        text='Data Berhasil Ditambahkan'
-        subtitleText='Data project flock telah berhasil disimpan.'
-        projectFlockForm={formikLastValues}
-        onClose={() => {
-          router.push('/production/project-flock');
-          setFormikLastValues(undefined);
-        }}
-        secondaryButton={undefined}
-      />
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -2469,6 +2469,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   )
                                 : null
                             }
+                            disabled={type === 'detail'}
                           />
                           {getStockUsageAdornment(idx)}
                         </div>
@@ -2675,6 +2676,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   )
                                 : null
                             }
+                            disabled={type === 'detail'}
                           />
                         </td>
                         {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2891,6 +2893,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }}
                                 placeholder='Masukkan jumlah telur'
                                 inputSuffix={'Butir'}
+                                disabled={type === 'detail'}
                               />
                             </td>
                             <td>
@@ -2917,6 +2920,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }}
                                 placeholder='Masukkan total berat telur (Kilogram)...'
                                 inputSuffix='Kilogram'
+                                disabled={type === 'detail'}
                               />
                             </td>
                             {(type as 'add' | 'edit' | 'detail') !==

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -402,6 +402,13 @@ const PurchaseOrderAcceptApprovalForm = ({
             <tbody>
               {purchaseItems?.map((purchaseItem, idx) => {
                 const formItem = formik.values.items?.[idx];
+
+                const originalPurchaseItem = initialValues?.items?.find(
+                  (item) => item.id === purchaseItem.id
+                );
+                const isReceivedQtyDisabled =
+                  originalPurchaseItem?.has_chickin === true;
+
                 return (
                   <tr key={`purchase-item-${idx}`}>
                     <td>
@@ -580,7 +587,12 @@ const PurchaseOrderAcceptApprovalForm = ({
                         decimalScale={0}
                         thousandSeparator=','
                         decimalSeparator='.'
-                        bottomLabel={`Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`}
+                        disabled={isReceivedQtyDisabled}
+                        bottomLabel={
+                          isReceivedQtyDisabled
+                            ? 'Sudah chickin, tidak bisa diubah'
+                            : `Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`
+                        }
                         isError={
                           isRepeaterInputError(idx, 'received_qty').isError ||
                           (formItem?.received_qty

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -740,6 +740,13 @@ const PurchaseOrderStaffApprovalForm = ({
                               )
                                 return null;
 
+                              const originalPurchaseItem =
+                                initialValues?.items?.find(
+                                  (item) => item.id === purchaseItem.id
+                                );
+                              const isQtyDisabled =
+                                originalPurchaseItem?.has_chickin === true;
+
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
@@ -807,7 +814,12 @@ const PurchaseOrderStaffApprovalForm = ({
                                         placeholder='Masukkan jumlah'
                                         allowNegative={false}
                                         decimalScale={0}
-                                        bottomLabel={`Previous: ${formatNumber(purchaseItem.quantity)}`}
+                                        disabled={isQtyDisabled}
+                                        bottomLabel={
+                                          isQtyDisabled
+                                            ? 'Sudah chickin, tidak bisa diubah'
+                                            : `Previous: ${formatNumber(purchaseItem.quantity)}`
+                                        }
                                         className={{
                                           wrapper: 'min-w-32',
                                         }}

src/stores/project-flock/project-flock.store.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { createProjectFlockSlice } from '@/stores/project-flock/slices/project-flock.slice';
+import { ProjectFlockSlice } from '@/types/stores';
+
+export type ProjectFlockStore = ProjectFlockSlice;
+
+export const useProjectFlockStore = create<ProjectFlockStore>()(
+  devtools(
+    (...args) => ({
+      ...createProjectFlockSlice(...args),
+    }),
+    {
+      name: 'ProjectFlockStore',
+    }
+  )
+);

src/stores/project-flock/slices/project-flock.slice.ts

@@ -0,0 +1,24 @@
+import { ProjectFlockSlice } from '@/types/stores';
+import { StateCreator } from 'zustand';
+
+export const createProjectFlockSlice: StateCreator<
+  ProjectFlockSlice,
+  [],
+  [],
+  ProjectFlockSlice
+> = (set) => ({
+  // Initial state
+  isSuccess: false,
+  createdProjectFlock: null,
+
+  // Actions
+  setIsSuccess: (success) => set({ isSuccess: success }),
+
+  setCreatedProjectFlock: (data) => set({ createdProjectFlock: data }),
+
+  resetProjectFlock: () =>
+    set({
+      isSuccess: false,
+      createdProjectFlock: null,
+    }),
+});

src/types/api/purchase/purchase.d.ts

@@ -50,6 +50,7 @@ export type PurchaseItem = {
   expedition_vendor_name?: string | null;
   received_qty?: number | null;
   transport_per_item?: number | null;
+  has_chickin?: boolean;
   expedition_vendor?: {
     id?: number;
     name?: string;

src/types/stores.d.ts

@@ -5,6 +5,7 @@ import type {
   UniformityDetail,
   VerifyUniformityResponse,
 } from '@/types/api/production/uniformity';
+import type { ProjectFlock } from '@/types/api/production/project-flock';
 
 type MainUiSlice = {
   mainDrawerOpen: boolean;
@@ -97,3 +98,14 @@ export type DashboardFilterSlice = {
   setFilterValues: (values: DashboardFilterType) => void;
   resetFilterValues: () => void;
 };
+
+export type ProjectFlockSlice = {
+  // State
+  isSuccess: boolean;
+  createdProjectFlock: ProjectFlock | null;
+
+  // Actions
+  setIsSuccess: (success: boolean) => void;
+  setCreatedProjectFlock: (data: ProjectFlock | null) => void;
+  resetProjectFlock: () => void;
+};