feat(FE): adding alert errors message for project flock and fixing bug approval status in chickin

src/components/helper/form/FormErrors.tsx

@@ -0,0 +1,46 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+/**
+ * Alert Unique Error List
+ * @param formErrorList - Array of error messages
+ * @param onClose - Function to close the alert
+ */
+const AlertErrorList = ({
+  formErrorList,
+  onClose,
+}: {
+  formErrorList: string[];
+  onClose: () => void;
+}) => {
+  return (
+    <Alert color='error' className='flex flex-col gap-2 px-4 m-4'>
+      <div className='flex justify-between items-center gap-2 w-full'>
+        <div className='flex items-center gap-2'>
+          <Icon icon='material-symbols:error-outline' width={24} height={24} />
+          <span className='font-semibold'>
+            Terdapat {formErrorList.length} error pada form:
+          </span>
+        </div>
+        <Button
+          onClick={onClose}
+          variant='link'
+          className='ml-auto p-0 w-fit text-white'
+          color='none'
+        >
+          <Icon icon='material-symbols:close' width={24} height={24} />
+        </Button>
+      </div>
+      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
+        {formErrorList.map((error, index) => (
+          <li key={index} className='text-sm'>
+            {error}
+          </li>
+        ))}
+      </ul>
+    </Alert>
+  );
+};
+
+export default AlertErrorList;

src/components/pages/ApprovalSteps.tsx

@@ -309,7 +309,7 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit: number;
+    limit: number | string;
     search?: string;
     group_step_number?: boolean;
   };

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -125,6 +125,7 @@ const InventoryAdjustmentForm = ({
 
   const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
     search: '',
+    limit: '100',
   }).toString()}`;
   const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
     warehouseUrl,

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

@@ -18,6 +18,7 @@ import { Icon } from '@iconify/react';
 import Badge from '@/components/Badge';
 import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { BaseApproval } from '@/types/api/api-general';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -33,11 +34,16 @@ const ChickinFormKandang = ({
     approvals,
     isLoading: approvalsLoading,
     refresh: refreshApprovals,
+    rawDataApprovals,
   } = useApprovalSteps({
     latestApproval: initialValues?.chickin_approval,
     approvalLines: CHICKINS_APPROVAL_LINE,
     moduleName: 'CHICKINS',
     moduleId: initialValues?.id.toString() ?? '',
+    params: {
+      limit: 'limit',
+      group_step_number: false,
+    },
   });
 
   const afterSubmitFormChickin = () => {
@@ -180,6 +186,7 @@ const ChickinFormKandang = ({
       </div>
       {openChickin && (
         <ChickinLogsView
+          rawDataApprovals={rawDataApprovals as BaseApproval[]}
           initialValues={initialValues}
           afterSubmit={afterSubmitFormChickin}
         />

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

@@ -8,6 +8,7 @@ import PillBadge from '@/components/PillBadge';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
 import { ChickinApi } from '@/services/api/production/chickin';
+import { BaseApproval } from '@/types/api/api-general';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
@@ -16,9 +17,11 @@ import toast from 'react-hot-toast';
 const ChickinLogsView = ({
   initialValues,
   afterSubmit,
+  rawDataApprovals,
 }: {
   initialValues: ProjectFlockKandang;
   afterSubmit?: () => void;
+  rawDataApprovals: BaseApproval[];
 }) => {
   const confirmModal = useModal();
   const [isApproveLoading, setIsApproveLoading] = useState(false);
@@ -60,9 +63,15 @@ const ChickinLogsView = ({
           </div>
         ) : (
           (initialValues?.chickins || []).map((chickin, index) => {
+            const latestApproval = rawDataApprovals[0];
             const isApproved =
-              initialValues.chickin_approval?.step_number === 2;
+              index == (initialValues?.chickins || []).length - 1
-            const isPending = initialValues.chickin_approval?.step_number === 1;
+                ? latestApproval?.step_number === 2
+                : true;
+            const isPending =
+              index == (initialValues?.chickins || []).length - 1
+                ? latestApproval?.step_number === 1
+                : false;
             const quantity = isApproved
               ? chickin.usage_qty
               : isPending
@@ -82,7 +91,7 @@ const ChickinLogsView = ({
                   {/* Header with Status Badge */}
                   <div className='flex flex-row justify-between items-center'>
                     <div className='text-lg font-semibold'>
-                      Chick In #{index + 1}
+                      Chick In #{index + 1} - {latestApproval?.step_number}
                     </div>
                     <PillBadge
                       content={

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

@@ -64,9 +64,9 @@ export const ProjectFlockBudgetsSchema: Yup.ObjectSchema<ProjectFlockBudgetsSche
       .min(1, 'Harga minimal 1!')
       .required('Harga wajib diisi!'),
     total_price: Yup.number()
-      .typeError('Harga harus berupa angka!')
+      .typeError('Total Harga harus berupa angka!')
-      .min(1, 'Harga minimal 1!')
+      .min(1, 'Total Harga minimal 1!')
-      .required('Harga wajib diisi!'),
+      .required('Total Harga wajib diisi!'),
   });
 
 export const ProjectFlockFormSchema: Yup.ObjectSchema<ProjectFlockFormSchemaType> =

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

@@ -6,6 +6,8 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import {
   AreaApi,
   FcrApi,
@@ -64,6 +66,7 @@ const ProjectFlockForm = ({
 
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [selectedArea, setSelectedArea] = useState('');
   const [selectedLocation, setSelectedLocation] = useState('');
   const [selectedCategory, setSelectedCategory] = useState('');
@@ -134,6 +137,7 @@ const ProjectFlockForm = ({
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
+    limit: 'limit',
   }).toString()}`;
   const {
     data: kandang,
@@ -638,6 +642,17 @@ const ProjectFlockForm = ({
     return !isNonstockAlreadyInBudgets;
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      // Parse and display errors
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return; // Stop submission
+    }
+  };
+
   return (
     <>
       <section className='w-full'>
@@ -697,7 +712,11 @@ const ProjectFlockForm = ({
 
         <form
           className='w-auto h-auto'
-          onSubmit={formik.handleSubmit}
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleValidateForm();
+            formik.handleSubmit(e);
+          }}
           onReset={formik.handleReset}
         >
           {/* Form Informasi Umum */}
@@ -1063,6 +1082,14 @@ const ProjectFlockForm = ({
             </div>
           </div>
 
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
             {formType !== 'detail' && (
               <RequirePermission

src/lib/formik-helper.ts

@@ -0,0 +1,71 @@
+import { FormikErrors } from 'formik';
+
+export type ErrorMessage = {
+  key: string;
+  message: string;
+};
+
+/**
+ * Parse Formik errors object into a flat array of error messages
+ * @param errors - Formik errors object
+ * @param parentKey - Parent key for nested objects (used internally for recursion)
+ * @returns Array of error messages
+ */
+export function parseFormikErrors<T>(
+  errors: FormikErrors<T>,
+  parentKey: string = ''
+): ErrorMessage[] {
+  const errorList: ErrorMessage[] = [];
+
+  Object.keys(errors).forEach((key) => {
+    const value = errors[key as keyof typeof errors];
+    const fullKey = parentKey ? `${parentKey}.${key}` : key;
+
+    if (typeof value === 'string') {
+      // Direct error message
+      errorList.push({ key: fullKey, message: value });
+    } else if (Array.isArray(value)) {
+      // Array of errors
+      value.forEach((item, index) => {
+        if (typeof item === 'string') {
+          errorList.push({ key: `${fullKey}[${index}]`, message: item });
+        } else if (item && typeof item === 'object') {
+          // Nested object in array
+          const nestedErrors = parseFormikErrors(
+            item as FormikErrors<unknown>,
+            `${fullKey}[${index}]`
+          );
+          errorList.push(...nestedErrors);
+        }
+      });
+    } else if (value && typeof value === 'object') {
+      // Nested object
+      const nestedErrors = parseFormikErrors(
+        value as FormikErrors<unknown>,
+        fullKey
+      );
+      errorList.push(...nestedErrors);
+    }
+  });
+
+  return errorList;
+}
+
+/**
+ * Get unique error messages from Formik errors
+ * @param errors - Formik errors object
+ * @returns Array of unique error messages
+ */
+export function getUniqueFormikErrors<T>(errors: FormikErrors<T>): string[] {
+  const errorList = parseFormikErrors(errors);
+  return Array.from(new Set(errorList.map((e) => e.message)));
+}
+
+/**
+ * Get all error messages from Formik errors
+ * @param errors - Formik errors object
+ * @returns Array of error messages
+ */
+export function getAllFormikErrors<T>(errors: FormikErrors<T>): ErrorMessage[] {
+  return parseFormikErrors(errors);
+}