Merge branch 'development' into feat/FE/daily-checklist

package-lock.json

@@ -4506,6 +4506,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4516,6 +4517,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4597,6 +4599,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -5120,6 +5123,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5825,7 +5829,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -6201,7 +6206,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -6462,6 +6468,7 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6635,6 +6642,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -8152,6 +8160,7 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
       "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "fast-png": "^6.2.0",
@@ -9371,6 +9380,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9401,6 +9411,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9468,7 +9479,8 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-number-format": {
       "version": "5.4.4",
@@ -9485,6 +9497,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -9653,7 +9666,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -10519,6 +10533,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10686,6 +10701,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

src/app/closing/detail/page.tsx

@@ -19,10 +19,10 @@ const ClosingDetailPage = () => {
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
-  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+  // const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId ? `sales-${closingId}` : null,
+  //   closingId ? `sales-${closingId}` : null,
-    () => ClosingApi.getPenjualan(Number(closingId))
+  //   () => ClosingApi.getPenjualan(Number(closingId))
-  );
+  // );
 
   const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
     closingId ? `hpp-ekspedisi-${closingId}` : null,
@@ -44,7 +44,8 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
+  const isLoading = isLoadingClosing || isLoadingHppEkspedisi;
+  // const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -54,7 +55,7 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
-          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          // salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
           hppExpeditionData={
             isResponseSuccess(hppEkspedisiData)
               ? hppEkspedisiData.data

src/components/pages/closing/ClosingDetail.tsx

@@ -52,11 +52,11 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           />
         ),
       },
-      {
+      // {
-        id: 'penjualan',
+      //   id: 'penjualan',
-        label: 'Penjualan',
+      //   label: 'Penjualan',
-        content: <SalesReportTable initialValues={salesData} />,
+      //   content: <SalesReportTable initialValues={salesData} />,
-      },
+      // },
       {
         id: 'overhead',
         label: 'Overhead',

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -23,6 +23,14 @@ type HppTableRow =
       type?: never;
       budgeting?: never;
       realization?: never;
+    }
+  | {
+      type: string;
+      group_name: string;
+      group_index: number;
+      isGroupHeader: false;
+      budgeting?: { rp_per_bird: number; rp_per_kg: number; amount: number };
+      realization?: { rp_per_bird: number; rp_per_kg: number; amount: number };
     };
 
 type ProfitLossTableRow =
@@ -52,25 +60,117 @@ const ClosingFinanceTable = ({
     () => ClosingApi.getFinance(projectFlockId)
   );
 
-  const hppTableData: HppTableRow[] = isResponseSuccess(finance)
+  const staticHppRows: Array<{
-    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
+    group_name: string;
-        // Group header row
+    type: string;
+    group_index: number;
+  }> = [
     {
-          group_name: hpp.group_name,
+      group_name: 'HPP dan Pengeluaran',
-          group_index: groupIndex,
+      type: 'Pembelian PAKAN',
+      group_index: 0,
+    },
+    {
+      group_name: 'HPP dan Pengeluaran',
+      type: 'Pembelian STARTER',
+      group_index: 0,
+    },
+    {
+      group_name: 'HPP dan Pengeluaran',
+      type: 'Pembelian DOC',
+      group_index: 0,
+    },
+    {
+      group_name: 'HPP dan Pengeluaran',
+      type: 'Pembelian PULLET',
+      group_index: 0,
+    },
+    {
+      group_name: 'HPP dan Pengeluaran',
+      type: 'Pembelian LAYER',
+      group_index: 0,
+    },
+    {
+      group_name: 'HPP dan Bahan Baku',
+      type: 'Pengeluaran Overhead',
+      group_index: 1,
+    },
+    {
+      group_name: 'HPP dan Bahan Baku',
+      type: 'Beban Ekspedisi',
+      group_index: 1,
+    },
+  ];
+
+  const hppTableData: HppTableRow[] = [
+    {
+      group_name: 'HPP dan Pengeluaran',
+      group_index: 0,
       isGroupHeader: true as const,
     },
-        // Data rows
+    ...staticHppRows
-        ...hpp.data.map((item) => ({
+      .filter((row) => row.group_index === 0)
-          group_name: hpp.group_name,
+      .map((staticRow) => {
-          group_index: groupIndex,
+        const apiData = isResponseSuccess(finance)
-          type: item.type,
+          ? finance.data.hpp_purchases.hpp
-          budgeting: item.budgeting,
+              .find((g) => g.group_name === staticRow.group_name)
-          realization: item.realization,
+              ?.data.find((d) => d.type === staticRow.type)
+          : null;
+
+        return {
+          group_name: staticRow.group_name,
+          group_index: staticRow.group_index,
+          type: staticRow.type,
+          budgeting: apiData?.budgeting || {
+            rp_per_bird: 0,
+            rp_per_kg: 0,
+            amount: 0,
+          },
+          realization: apiData?.realization || {
+            rp_per_bird: 0,
+            rp_per_kg: 0,
+            amount: 0,
+          },
           isGroupHeader: false as const,
-        })),
+        };
-      ])
+      }),
-    : [];
+    {
+      group_name: 'HPP dan Bahan Baku',
+      group_index: 1,
+      isGroupHeader: true as const,
+    },
+    ...staticHppRows
+      .filter((row) => row.group_index === 1)
+      .map((staticRow) => {
+        const apiData = isResponseSuccess(finance)
+          ? finance.data.hpp_purchases.hpp
+              .find((g) => g.group_name === staticRow.group_name)
+              ?.data.find((d) => d.type === staticRow.type)
+          : null;
+
+        return {
+          group_name: staticRow.group_name,
+          group_index: staticRow.group_index,
+          type: staticRow.type,
+          budgeting: apiData?.budgeting || {
+            rp_per_bird: 0,
+            rp_per_kg: 0,
+            amount: 0,
+          },
+          realization: apiData?.realization || {
+            rp_per_bird: 0,
+            rp_per_kg: 0,
+            amount: 0,
+          },
+          isGroupHeader: false as const,
+        };
+      }),
+    {
+      group_name: 'HPP',
+      group_index: 2,
+      isGroupHeader: true as const,
+    },
+  ];
 
   const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
     ? [
@@ -217,8 +317,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.budgeting
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
-                                .rp_per_bird || 0
+                                ?.rp_per_bird || 0
                             )
                           : '-';
                       },
@@ -233,8 +333,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.budgeting
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
-                                .rp_per_kg || 0
+                                ?.rp_per_kg || 0
                             )
                           : '-';
                       },
@@ -249,8 +349,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.budgeting
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
-                                .amount || 0
+                                ?.amount || 0
                             )
                           : '-';
                       },
@@ -271,8 +371,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.realization
+                              finance.data.hpp_purchases.summary_hpp
-                                .rp_per_bird || 0
+                                ?.realization?.rp_per_bird || 0
                             )
                           : '-';
                       },
@@ -287,8 +387,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.realization
+                              finance.data.hpp_purchases.summary_hpp
-                                .rp_per_kg || 0
+                                ?.realization?.rp_per_kg || 0
                             )
                           : '-';
                       },
@@ -303,8 +403,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp.realization
+                              finance.data.hpp_purchases.summary_hpp
-                                .amount || 0
+                                ?.realization?.amount || 0
                             )
                           : '-';
                       },

src/components/pages/inventory/movement/form/MovementForm.schema.ts

@@ -85,7 +85,10 @@ const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  product_id: Yup.number().required('Produk wajib diisi!'),
+  product_id: Yup.number()
+    .required('Produk wajib diisi!')
+    .min(1, 'Produk wajib diisi!')
+    .typeError('Produk wajib diisi!'),
   product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
@@ -97,7 +100,10 @@ const DeliveryProductObjectSchema = Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  product_id: Yup.number().required('Produk wajib diisi!'),
+  product_id: Yup.number()
+    .required('Produk wajib diisi!')
+    .min(1, 'Produk wajib diisi!')
+    .typeError('Produk wajib diisi!'),
   product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
@@ -127,13 +133,13 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
         (delivery_cost !== undefined && delivery_cost > 0)
       );
     }),
-  document_path: Yup.string().optional(),
+  document_path: Yup.string().nullable().optional(),
   document_index: Yup.number().optional(),
   document: Yup.mixed<File | MovementDocument>()
     .nullable()
-    .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
+    .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
       if (!value) return true;
-      if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+      if (value instanceof File) return value.size <= 5 * 1024 * 1024;
       return true;
     }),
   driver_name: Yup.string().required('Nama sopir wajib diisi!'),
@@ -142,7 +148,10 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  supplier_id: Yup.number().required('Supplier wajib diisi!'),
+  supplier_id: Yup.number()
+    .required('Supplier wajib diisi!')
+    .min(1, 'Supplier wajib diisi!')
+    .typeError('Supplier wajib diisi!'),
   products: Yup.array()
     .of(DeliveryProductObjectSchema)
     .min(1, 'Minimal harus ada 1 produk!')
@@ -161,6 +170,7 @@ export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
     }).nullable(),
     source_warehouse_id: Yup.number()
       .required('Gudang asal wajib diisi!')
+      .min(1, 'Gudang asal wajib diisi!')
       .typeError('Gudang asal wajib diisi!'),
     destination_warehouse: Yup.object({
       value: Yup.number().min(1).required(),
@@ -170,6 +180,7 @@ export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
     }).nullable(),
     destination_warehouse_id: Yup.number()
       .required('Gudang tujuan wajib diisi!')
+      .min(1, 'Gudang tujuan wajib diisi!')
       .typeError('Gudang tujuan wajib diisi!')
       .test(
         'different-warehouse',
@@ -226,20 +237,23 @@ export const getMovementFormInitialValues = (
         }
       : null,
     destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
-    products:
+    products: initialValues?.details?.map((detail) => ({
-      initialValues?.details?.map((detail) => ({
       product: {
         value: detail.product.id,
         label: detail.product.name,
       },
       product_id: detail.product.id,
       product_qty: detail.quantity,
-      })) ?? [],
+    })) ?? [
-    deliveries:
+      {
-      initialValues?.deliveries?.map((d) => ({
+        product: null,
+        product_id: 0,
+        product_qty: '',
+      },
+    ],
+    deliveries: initialValues?.deliveries?.map((d) => ({
       delivery_cost: d.shipping_cost_total ?? undefined,
       delivery_cost_per_item: d.shipping_cost_item ?? undefined,
-        document_number: d.document_number ?? '',
       document: d.document ?? null,
       document_path: d.document_path ?? null,
       driver_name: d.driver_name ?? '',
@@ -261,6 +275,24 @@ export const getMovementFormInitialValues = (
             product_qty: item.quantity,
           };
         }) ?? [],
-      })) ?? [],
+    })) ?? [
+      {
+        delivery_cost: undefined,
+        delivery_cost_per_item: undefined,
+        document: null,
+        document_path: null,
+        driver_name: '',
+        vehicle_plate: '',
+        supplier: null,
+        supplier_id: 0,
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: '',
+          },
+        ],
+      },
+    ],
   };
 };

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -36,6 +36,8 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import Badge from '@/components/Badge';
 import Card from '@/components/Card';
 import { S3_PUBLIC_BASE_URL } from '@/config/constant';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -53,6 +55,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ===== FORM HANDLERS =====
   const createMovementHandler = useCallback(
@@ -186,12 +189,45 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         return;
       }
       const documents: File[] = [];
+      const documentNameToIndex = new Map<string, number>();
+      let sequentialDocumentIndex = 0;
+
       const deliveriesPayload = values.deliveries.map((d) => {
-        let documentIndex = 0;
+        let documentIndex = -1;
 
         if (d.document && d.document instanceof File) {
+          const fileName = d.document.name;
+
+          if (documentNameToIndex.has(fileName)) {
+            documentIndex = documentNameToIndex.get(fileName)!;
+          } else {
             documents.push(d.document);
-          documentIndex = documents.length - 1;
+            documentIndex = sequentialDocumentIndex;
+            documentNameToIndex.set(fileName, documentIndex);
+            sequentialDocumentIndex++;
+          }
+        } else if (d.document_path) {
+          const pathFileName =
+            d.document_path.split('/').pop() || d.document_path;
+
+          if (documentNameToIndex.has(pathFileName)) {
+            documentIndex = documentNameToIndex.get(pathFileName)!;
+          } else {
+            documentIndex = sequentialDocumentIndex;
+            documentNameToIndex.set(pathFileName, documentIndex);
+            sequentialDocumentIndex++;
+          }
+        } else if (d.document && !(d.document instanceof File)) {
+          const existingDocFileName =
+            d.document.path.split('/').pop() || d.document.path;
+
+          if (documentNameToIndex.has(existingDocFileName)) {
+            documentIndex = documentNameToIndex.get(existingDocFileName)!;
+          } else {
+            documentIndex = sequentialDocumentIndex;
+            documentNameToIndex.set(existingDocFileName, documentIndex);
+            sequentialDocumentIndex++;
+          }
         }
 
         return {
@@ -199,7 +235,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           delivery_cost_per_item:
             parseInt((d.delivery_cost_per_item || '').toString()) || 0,
           document_index: documentIndex,
-          document_path: d.document_path,
           driver_name: d.driver_name,
           vehicle_plate: d.vehicle_plate,
           supplier_id: d.supplier_id,
@@ -761,8 +796,36 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       type !== 'edit' &&
       type !== 'detail'
     ) {
-      formik.setFieldValue('products', []);
+      if (formik.values.products.length === 0) {
-      formik.setFieldValue('deliveries', []);
+        formik.setFieldValue('products', [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: '',
+          },
+        ]);
+      }
+      if (formik.values.deliveries.length === 0) {
+        formik.setFieldValue('deliveries', [
+          {
+            delivery_cost: undefined,
+            delivery_cost_per_item: undefined,
+            document: null,
+            document_path: null,
+            driver_name: '',
+            vehicle_plate: '',
+            supplier: null,
+            supplier_id: 0,
+            products: [
+              {
+                product: null,
+                product_id: 0,
+                product_qty: '',
+              },
+            ],
+          },
+        ]);
+      }
     }
   }, [formik.values.source_warehouse_id]);
 
@@ -791,6 +854,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.errors.destination_warehouse_id,
   ]);
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   return (
     <>
       <section className='w-full'>
@@ -810,10 +889,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {movementFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{movementFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Top card - Movement details */}
           <Card
             title='Detail Movement'
@@ -1097,7 +1195,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Produk
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1106,7 +1204,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Qty
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1119,7 +1217,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   {formik.values.products?.map((product, idx) => (
                     <tr key={`product-row-${idx}-${product.product_id}`}>
                       {type !== 'detail' && (
-                        <td className='!align-middle'>
+                        <td className='align-middle!'>
                           <CheckboxInput
                             name={`product-${idx}`}
                             checked={selectedProducts.includes(idx)}
@@ -1311,7 +1409,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Produk
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1320,7 +1418,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Qty
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1329,7 +1427,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Supplier
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1338,7 +1436,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Plat Nomor
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1348,7 +1446,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Biaya Pengiriman (Rp.)
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1357,7 +1455,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Biaya Per Item (Rp.)
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1366,7 +1464,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <th>
                       Nama Sopir
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom z-9999'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1379,7 +1477,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   {formik.values.deliveries?.map((delivery, idx) => (
                     <tr key={`delivery-row-${idx}`}>
                       {type !== 'detail' && (
-                        <td className='!align-middle'>
+                        <td className='align-middle!'>
                           <CheckboxInput
                             name={`delivery-${idx}`}
                             checked={selectedDeliveries.includes(idx)}
@@ -1589,8 +1687,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             onChange={(e) => {
                               const file = e.target.files?.[0];
                               if (file) {
-                                if (file.size > 2 * 1024 * 1024) {
+                                if (file.size > 5 * 1024 * 1024) {
-                                  toast.error('Ukuran dokumen maksimal 2 MB!');
+                                  toast.error('Ukuran dokumen maksimal 5 MB!');
                                   e.target.value = '';
                                   return;
                                 }
@@ -1747,7 +1845,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   disabled={
                     hasInvalidQty ||
                     hasExceededStock ||
-                    !formik.isValid ||
                     formik.isSubmitting ||
                     (formik.values.source_warehouse_id ===
                       formik.values.destination_warehouse_id &&
@@ -1760,17 +1857,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               </div>
             )}
           </div>
-
-          {movementFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{movementFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
     </>

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -11,6 +11,8 @@ import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   ProductCategoryFormSchema,
@@ -39,6 +41,7 @@ const ProductCategoryForm = ({
   const deleteModal = useModal();
 
   const [formErrorMessage, setFormErrorMessage] = useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createProductCategoryHandler = useCallback(
@@ -129,6 +132,22 @@ const ProductCategoryForm = ({
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   return (
     <>
       <section className='w-full max-w-2xl'>
@@ -150,10 +169,29 @@ const ProductCategoryForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           <div className='flex flex-col gap-4'>
             <TextInput
               required
@@ -236,7 +274,7 @@ const ProductCategoryForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit
@@ -244,17 +282,6 @@ const ProductCategoryForm = ({
               </div>
             )}
           </div>
-
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
 

src/components/pages/master-data/product/form/ProductForm.schema.ts

@@ -29,36 +29,38 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     sku: Yup.string().required('SKU wajib diisi!'),
 
     uom: Yup.object({
-      value: Yup.number().min(1).required(),
+      value: Yup.number()
-      label: Yup.string().required(),
+        .min(1, 'Satuan wajib dipilih!')
-    })
+        .required('Satuan wajib dipilih!'),
-      .nullable()
+      label: Yup.string().required('Satuan wajib dipilih!'),
-      .required('Satuan wajib diisi!'),
+    }).nullable(),
 
     uom_id: Yup.number()
-      .required('Satuan wajib diisi!')
+      .min(1, 'Satuan wajib dipilih!')
-      .typeError('Satuan wajib diisi!'),
+      .required('Satuan wajib dipilih!')
+      .typeError('Satuan wajib dipilih!'),
 
     product_category: Yup.object({
-      value: Yup.number().min(1).required(),
+      value: Yup.number()
-      label: Yup.string().required(),
+        .min(1, 'Kategori produk wajib dipilih!')
-    })
+        .required('Kategori produk wajib dipilih!'),
-      .nullable()
+      label: Yup.string().required('Kategori produk wajib dipilih!'),
-      .required('Kategori produk wajib diisi!'),
+    }).nullable(),
 
     product_category_id: Yup.number()
-      .required('Kategori produk wajib diisi!')
+      .min(1, 'Kategori produk wajib dipilih!')
-      .typeError('Kategori produk wajib diisi!'),
+      .required('Kategori produk wajib dipilih!')
+      .typeError('Kategori produk wajib dipilih!'),
 
     product_price: Yup.number()
       .required('Harga produk wajib diisi!')
       .typeError('Harga produk wajib diisi!')
-      .min(0, 'Harga produk tidak boleh kurang dari 0!'),
+      .min(1, 'Harga produk tidak boleh kurang dari 1!'),
 
     selling_price: Yup.number()
       .required('Harga jual wajib diisi!')
       .typeError('Harga jual wajib diisi!')
-      .min(0, 'Harga jual tidak boleh kurang dari 0!'),
+      .min(1, 'Harga jual tidak boleh kurang dari 1!'),
 
     tax: Yup.number()
       .required('Pajak wajib diisi!')
@@ -69,7 +71,7 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     expiry_period: Yup.number()
       .required('Periode kadaluarsa wajib diisi!')
       .typeError('Periode kadaluarsa wajib diisi!')
-      .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
+      .min(1, 'Periode kadaluarsa tidak boleh kurang dari 1 hari!'),
 
     supplier_ids: Yup.array()
       .of(Yup.number().required().typeError('Supplier tidak valid!'))

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -17,6 +17,8 @@ import SelectInput, {
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   ProductFormSchema,
@@ -48,6 +50,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   const deleteModal = useModal();
 
   const [productFormErrorMessage, setProductFormErrorMessage] = useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createProductHandler = useCallback(
@@ -201,6 +204,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   return (
     <>
       <section className='w-full max-w-2xl'>
@@ -220,11 +239,30 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          <div className='flex flex-col gap-4'>
+          {productFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{productFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
+          <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
               label='Nama'
@@ -237,6 +275,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               errorMessage={formik.errors.name}
               readOnly={type === 'detail'}
             />
+            <div className='grid sm:grid-cols-2 gap-4'>
               <TextInput
                 required
                 label='Merek'
@@ -261,6 +300,8 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 errorMessage={formik.errors.sku}
                 readOnly={type === 'detail'}
               />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
               <SelectInput
                 required
                 label='Satuan'
@@ -270,7 +311,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 options={uomOptions}
                 onInputChange={setUomSelectInputValue}
                 isLoading={isLoadingUoms}
-              isError={formik.touched.uom_id && Boolean(formik.errors.uom_id)}
+                isError={
+                  (formik.touched.uom || formik.touched.uom_id) &&
+                  Boolean(formik.errors.uom_id)
+                }
                 errorMessage={formik.errors.uom_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
@@ -285,13 +329,16 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 onInputChange={setCategorySelectInputValue}
                 isLoading={isLoadingCategories}
                 isError={
-                formik.touched.product_category_id &&
+                  (formik.touched.product_category ||
+                    formik.touched.product_category_id) &&
                   Boolean(formik.errors.product_category_id)
                 }
                 errorMessage={formik.errors.product_category_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
               />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
               <NumberInput
                 required
                 label='Harga Produk'
@@ -332,6 +379,8 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 errorMessage={formik.errors.selling_price as string}
                 readOnly={type === 'detail'}
               />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
               <NumberInput
                 required
                 label='Pajak (%)'
@@ -369,6 +418,8 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 errorMessage={formik.errors.expiry_period as string}
                 readOnly={type === 'detail'}
               />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
               <SelectInput
                 required
                 label='Supplier'
@@ -411,6 +462,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 isClearable
               />
             </div>
+          </div>
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
@@ -463,7 +515,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit
@@ -471,16 +523,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               </div>
             )}
           </div>
-          {productFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{productFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
       {type !== 'add' && (

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

@@ -17,6 +17,7 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import { useModal } from '@/components/Modal';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   ProjectFlockKandangApi,
@@ -52,6 +53,7 @@ import {
 
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import toast from 'react-hot-toast';
 import ApprovalSteps, {
   useApprovalSteps,
@@ -60,7 +62,6 @@ import {
   GROWING_RECORDING_APPROVAL_LINE,
   LAYING_RECORDING_APPROVAL_LINE,
 } from '@/config/approval-line';
-import Table from '@/components/Table';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -92,6 +93,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [, setApprovalNotes] = useState('');
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [, setNewRecordingData] = useState<Recording | null>(null);
   const [nextDayRecording, setNextDayRecording] =
@@ -758,6 +760,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   // ===== HELPER FUNCTIONS =====
   useCallback((): OptionType | null => {
     if (
@@ -1323,9 +1341,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         )}
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {recordingFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{recordingFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card
@@ -2507,9 +2544,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={
+                    disabled={hasExceededStock || formik.isSubmitting}
-                      hasExceededStock || !formik.isValid || formik.isSubmitting
-                    }
                   >
                     Submit
                   </Button>
@@ -2534,9 +2569,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={
+                    disabled={hasExceededStock || formik.isSubmitting}
-                      hasExceededStock || !formik.isValid || formik.isSubmitting
-                    }
                   >
                     Submit
                   </Button>
@@ -2544,16 +2577,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               )}
             </div>
           </div>
-          {recordingFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{recordingFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
 

src/components/pages/production/uniformity/UniformityChart.tsx

@@ -1,93 +1,104 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import Card from '@/components/Card';
 import UniformityBarChart from '@/components/pages/production/uniformity/chart/UniformityBarChart';
 import UniformityGaugeChart from '@/components/pages/production/uniformity/chart/UniformityGaugeChart';
 import UniformityBarChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton';
 import UniformityGaugeChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton';
-import {
+import { Uniformity, type ChartData } from '@/types/api/production/uniformity';
-  UniformityDetailItem,
-  Uniformity,
-} from '@/types/api/production/uniformity';
 
 interface UniformityChartProps {
   uniformityData?: Uniformity | null;
-  uniformityDetails?: UniformityDetailItem[];
+  isFiltered?: boolean;
 }
 
 const UniformityChart = ({
   uniformityData,
-  uniformityDetails,
+  isFiltered = false,
 }: UniformityChartProps) => {
-  const defaultUniformityDetails: UniformityDetailItem[] = [
+  const [currentWeekIndex, setCurrentWeekIndex] = useState(0);
-    { id: 1, weight: 61, range: 'Ideal' },
-    { id: 2, weight: 62, range: 'Ideal' },
-    { id: 3, weight: 63, range: 'Ideal' },
-    { id: 4, weight: 64, range: 'Ideal' },
-    { id: 5, weight: 65, range: 'Ideal' },
-    { id: 6, weight: 66, range: 'Ideal' },
-    { id: 7, weight: 67, range: 'Ideal' },
-  ];
 
-  const detailsToUse = uniformityDetails || defaultUniformityDetails;
+  const chartData = useMemo((): ChartData | undefined => {
+    if (!uniformityData?.chart_data) return undefined;
+    return uniformityData.chart_data;
+  }, [uniformityData]);
+
+  useEffect(() => {
+    if (uniformityData?.chart_data?.gauge_chart?.week_info) {
+      const { current_week_index } =
+        uniformityData.chart_data.gauge_chart.week_info;
+      setCurrentWeekIndex(current_week_index);
+    }
+  }, [uniformityData]);
 
   const barChartData = useMemo(() => {
-    if (!uniformityData) {
+    if (!chartData?.bar_chart || !chartData?.gauge_chart) {
       return [];
     }
 
-    if (!detailsToUse || detailsToUse.length === 0) {
+    const { bar_chart, gauge_chart } = chartData;
+    const currentWeekData = gauge_chart.available_weeks[currentWeekIndex];
+
+    if (!currentWeekData || !currentWeekData.has_data) {
       return [];
     }
 
-    const weights = detailsToUse.map((d) => d.weight);
+    const currentWeekStr = String(currentWeekData.week);
-    const minWeight = Math.floor(Math.min(...weights) / 5) * 5;
+    const weekData = bar_chart.all_weeks[currentWeekStr];
-    const maxWeight = Math.ceil(Math.max(...weights) / 5) * 5;
 
-    const rangeSize = maxWeight - minWeight < 11 ? 4 : 5;
+    if (!weekData || !weekData.has_data) {
-    const ranges: string[] = [];
+      return [];
-
-    for (let start = minWeight; start <= maxWeight; start += rangeSize) {
-      const end = start + rangeSize;
-      ranges.push(`${start}-${end}`);
     }
 
-    const totalIdealCount = detailsToUse.filter(
+    return weekData.weight_distribution.map((range) => ({
-      (d) => d.range === 'Ideal'
+      name: range.range,
-    ).length;
+      uv: range.bird_count,
-
+      isIdeal: range.is_ideal_range,
-    return ranges.map((range) => {
+      idealRange: range.ideal_range,
-      const [minStr, maxStr] = range.split('-').map(Number);
+      outsideRange: range.outside_range,
-      const min = minStr;
+    }));
-      const max = maxStr;
+  }, [chartData, currentWeekIndex]);
-
-      const birdsInRange = detailsToUse.filter(
-        (d) => d.weight >= min && d.weight < max
-      ).length;
-
-      const hasIdeal = detailsToUse.some(
-        (d) => d.range === 'Ideal' && d.weight >= min && d.weight < max
-      );
-
-      return {
-        name: range,
-        uv: birdsInRange,
-        isIdeal: hasIdeal,
-        idealCount: hasIdeal ? totalIdealCount : undefined,
-      };
-    });
-  }, [uniformityData, detailsToUse]);
 
   const gaugeChartData = useMemo(() => {
-    if (!uniformityData) return undefined;
+    if (!chartData?.gauge_chart || !uniformityData) return undefined;
+
+    const { gauge_chart } = chartData;
+    const currentWeekData = gauge_chart.available_weeks[currentWeekIndex];
+
+    if (!currentWeekData || !currentWeekData.has_data) {
+      return undefined;
+    }
+
+    const hasPrevWeek = currentWeekIndex > 0;
+    const hasNextWeek =
+      currentWeekIndex < gauge_chart.available_weeks.length - 1;
 
     return {
-      value: uniformityData.uniformity,
+      value: currentWeekData.uniformity_percentage,
       label: 'Uniformity',
-      week: `Week ${uniformityData.week}`,
+      week: `Week ${currentWeekData.week}`,
-      currentValue: uniformityData.uniform_qty,
+      currentValue: currentWeekData.ideal_count,
-      totalValue: uniformityData.chick_qty_of_weight,
+      totalValue: currentWeekData.total_count,
+      hasPrevWeek,
+      hasNextWeek,
     };
-  }, [uniformityData]);
+  }, [chartData, currentWeekIndex, uniformityData]);
+
+  const handleWeekChange = (direction: 'prev' | 'next') => {
+    if (!chartData?.gauge_chart) return;
+
+    const { available_weeks } = chartData.gauge_chart;
+
+    if (direction === 'prev' && currentWeekIndex > 0) {
+      setCurrentWeekIndex((prev) => prev - 1);
+    } else if (
+      direction === 'next' &&
+      currentWeekIndex < available_weeks.length - 1
+    ) {
+      setCurrentWeekIndex((prev) => prev + 1);
+    }
+  };
+
+  const shouldShowEmptyState = !isFiltered;
 
   return (
     <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
@@ -100,14 +111,16 @@ const UniformityChart = ({
         }}
       >
         <div className='w-full h-full flex items-center justify-center'>
-          {!uniformityData || barChartData.length === 0 ? (
+          {shouldShowEmptyState ||
+          !uniformityData ||
+          barChartData.length === 0 ? (
             <UniformityBarChartSkeleton />
           ) : (
             <UniformityBarChart data={barChartData} />
           )}
         </div>
       </Card>
-      {!uniformityData || !gaugeChartData ? (
+      {shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
         <Card
           variant='bordered'
           title='Weekly Performance ⓘ'
@@ -133,6 +146,9 @@ const UniformityChart = ({
             week={gaugeChartData.week}
             currentValue={gaugeChartData.currentValue}
             totalValue={gaugeChartData.totalValue}
+            onWeekChange={handleWeekChange}
+            hasPrevWeek={gaugeChartData.hasPrevWeek}
+            hasNextWeek={gaugeChartData.hasNextWeek}
           />
         </Card>
       )}

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -151,8 +151,10 @@ const UniformityConfirmationPreview = ({
 
 const UniformityChartWrapper = ({
   uniformitySwrKey,
+  isFiltered,
 }: {
   uniformitySwrKey: string;
+  isFiltered: boolean;
 }) => {
   const { data: uniformities } = useSWR(
     uniformitySwrKey,
@@ -166,31 +168,8 @@ const UniformityChartWrapper = ({
     return null;
   }, [uniformities]);
 
-  const shouldFetchDetails = !!uniformityData;
-  const uniformityDetailSwrKey = useMemo(() => {
-    if (!uniformityData) return null;
-    return `${UniformityApi.basePath}/${uniformityData.id}?with_details=true`;
-  }, [uniformityData]);
-
-  const { data: uniformityDetailResponse } = useSWR(
-    uniformityDetailSwrKey,
-    shouldFetchDetails ? UniformityApi.getAllFetcher : null
-  );
-
-  const uniformityDetails = useMemo(() => {
-    if (shouldFetchDetails && isResponseSuccess(uniformityDetailResponse)) {
-      const detailData =
-        uniformityDetailResponse.data as unknown as UniformityDetail;
-      return detailData.uniformity_details;
-    }
-    return undefined;
-  }, [shouldFetchDetails, uniformityDetailResponse]);
-
   return (
-    <UniformityChart
+    <UniformityChart uniformityData={uniformityData} isFiltered={isFiltered} />
-      uniformityData={uniformityData}
-      uniformityDetails={uniformityDetails}
-    />
   );
 };
 
@@ -251,12 +230,15 @@ const UniformityTable = () => {
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
   const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
     options: filterLocationOptions,
     isLoadingOptions: isLoadingFilterLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
+    limit: '100',
+  });
 
   // ===== FETCH PROJECT FLOCKS DATA FOR FILTER =====
   const filterProjectFlocksUrl = useMemo(() => {
@@ -328,6 +310,7 @@ const UniformityTable = () => {
       project_flock_id: filterProjectFlock.value.toString(),
       kandang_id: filterKandang.value.toString(),
       withpopulation: Boolean(true).toString(),
+      limit: '100',
     });
     return `${ProjectFlockApi.basePath}/kandangs/lookup?${params.toString()}`;
   }, [filterProjectFlock, filterKandang]);
@@ -374,6 +357,7 @@ const UniformityTable = () => {
       if (filterEndDate) {
         queryParams.append('end_date', filterEndDate);
       }
+      queryParams.append('with_chart', 'true');
     }
 
     const tableQueryString = getTableFilterQueryString();
@@ -433,6 +417,7 @@ const UniformityTable = () => {
   );
 
   const handleResetFilters = useCallback(() => {
+    setIsSubmitted(false);
     setFilterLocation(null);
     setFilterProjectFlock(null);
     setFilterKandang(null);
@@ -442,9 +427,38 @@ const UniformityTable = () => {
   }, []);
 
   const handleApplyFilters = useCallback(() => {
+    const errors: Record<string, string> = {};
+
+    if (!filterStartDate) {
+      errors.start_date = 'Tanggal mulai wajib diisi';
+    }
+    if (!filterEndDate) {
+      errors.end_date = 'Tanggal akhir wajib diisi';
+    }
+    if (!filterLocation) {
+      errors.location = 'Lokasi wajib dipilih';
+    }
+    if (!filterProjectFlock) {
+      errors.project_flock = 'Project Flock wajib dipilih';
+    }
+    if (!filterKandang) {
+      errors.kandang = 'Kandang wajib dipilih';
+    }
+
+    setFilterErrors(errors);
+
+    if (Object.keys(errors).length === 0) {
       setIsSubmitted(true);
       filterModal.closeModal();
-  }, [filterModal]);
+    }
+  }, [
+    filterModal,
+    filterStartDate,
+    filterEndDate,
+    filterLocation,
+    filterProjectFlock,
+    filterKandang,
+  ]);
 
   const selectedRowIds = useMemo(() => {
     return Object.keys(rowSelection)
@@ -633,7 +647,7 @@ const UniformityTable = () => {
     if (filterEndDate) {
       queryParams.append('end_date', filterEndDate);
     }
-    queryParams.append('limit', '10000');
+    queryParams.append('limit', '100');
     queryParams.append('page', '1');
 
     const queryString = queryParams.toString();
@@ -896,7 +910,10 @@ const UniformityTable = () => {
       <div className='my-4 divider'></div>
 
       <section>
-        <UniformityChartWrapper uniformitySwrKey={uniformitySwrKey} />
+        <UniformityChartWrapper
+          uniformitySwrKey={uniformitySwrKey}
+          isFiltered={isSubmitted}
+        />
       </section>
 
       <Card
@@ -1140,58 +1157,105 @@ const UniformityTable = () => {
             </div>
             <div className='space-y-4 px-4'>
               <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
+                <div>
                   <DateInput
                     label='Tanggal'
                     name='start_date'
                     value={filterStartDate}
-                  onChange={(e) => setFilterStartDate(e.target.value)}
+                    onChange={(e) => {
+                      setFilterStartDate(e.target.value);
+                      setFilterErrors((prev) => ({ ...prev, start_date: '' }));
+                    }}
                     className={{ wrapper: 'w-full' }}
                   />
+                  {filterErrors.start_date && (
+                    <p className='text-red-500 text-sm mt-1'>
+                      {filterErrors.start_date}
+                    </p>
+                  )}
+                </div>
 
+                <div>
                   <DateInput
                     label='‎ '
                     name='end_date'
                     value={filterEndDate}
-                  onChange={(e) => setFilterEndDate(e.target.value)}
+                    onChange={(e) => {
+                      setFilterEndDate(e.target.value);
+                      setFilterErrors((prev) => ({ ...prev, end_date: '' }));
+                    }}
                     className={{ wrapper: 'w-full' }}
                   />
+                  {filterErrors.end_date && (
+                    <p className='text-red-500 text-sm mt-1'>
+                      {filterErrors.end_date}
+                    </p>
+                  )}
+                </div>
               </div>
 
+              <div>
                 <SelectInput
                   label='Lokasi'
                   placeholder='Pilih Lokasi...'
                   value={filterLocation}
-                onChange={handleFilterLocationChange}
+                  onChange={(value) => {
+                    handleFilterLocationChange(value);
+                    setFilterErrors((prev) => ({ ...prev, location: '' }));
+                  }}
                   options={filterLocationOptions}
                   onInputChange={setFilterLocationInputValue}
                   isLoading={isLoadingFilterLocations}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.location && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.location}
+                  </p>
+                )}
+              </div>
 
+              <div>
                 <SelectInput
                   label='Project Flock'
                   placeholder='Pilih Project Flock...'
                   value={filterProjectFlock}
-                onChange={handleFilterProjectFlockChange}
+                  onChange={(value) => {
+                    handleFilterProjectFlockChange(value);
+                    setFilterErrors((prev) => ({ ...prev, project_flock: '' }));
+                  }}
                   options={filterProjectFlockOptions}
                   onInputChange={setProjectFlockSearchValue}
                   isLoading={isLoadingFilterProjectFlocks}
                   isDisabled={!filterLocation}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.project_flock && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.project_flock}
+                  </p>
+                )}
+              </div>
 
+              <div>
                 <SelectInput
                   label='Kandang'
                   placeholder='Pilih Kandang...'
                   value={filterKandang}
-                onChange={handleFilterKandangChange}
+                  onChange={(value) => {
+                    handleFilterKandangChange(value);
+                    setFilterErrors((prev) => ({ ...prev, kandang: '' }));
+                  }}
                   options={filterKandangOptions}
                   isDisabled={!filterProjectFlock}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.kandang && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.kandang}
+                  </p>
+                )}
+              </div>
             </div>
 
             {/* Action Buttons */}

src/components/pages/production/uniformity/chart/UniformityBarChart.tsx

@@ -27,7 +27,8 @@ interface BarChartData {
   name: string;
   uv: number;
   isIdeal?: boolean;
-  idealCount?: number;
+  idealRange?: string;
+  outsideRange?: string;
 }
 
 interface UniformityBarChartProps {
@@ -40,30 +41,117 @@ function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
     const chartData = data.payload as BarChartData;
     const labelStr = String(label);
 
-    if (chartData.isIdeal && chartData.idealCount !== undefined) {
+    // If the range has both ideal and outside ranges (like 340-344)
+    if (chartData.idealRange && chartData.outsideRange) {
       return (
         <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
           <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
-          <div className='flex items-center gap-2 mt-2 justify-between'>
+          <div className='flex flex-col gap-2 mt-2'>
+            <div className='flex items-center justify-between'>
               <div className='flex items-center gap-2'>
                 <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
-              {chartData.idealCount} of Birds
+                <span className='text-sm'>Ideal</span>
               </div>
-            <span>{labelStr}</span>
+              <span className='text-sm font-medium'>
+                {chartData.idealRange}
+              </span>
+            </div>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <div className='w-5 h-5 bg-[#EF4444] rounded-md'></div>
+                <span className='text-sm'>Outside</span>
+              </div>
+              <span className='text-sm font-medium'>
+                {chartData.outsideRange}
+              </span>
+            </div>
+            <div className='border-t border-white/20 pt-2 mt-1'>
+              <div className='flex items-center justify-between'>
+                <span className='text-white/70 text-sm'>Total Birds:</span>
+                <span className='font-semibold'>{payload[0].value}</span>
+              </div>
+            </div>
+            <div className='text-center text-xs text-white/50'>{labelStr}</div>
           </div>
         </div>
       );
     }
 
+    // If the range has only ideal range
+    if (chartData.idealRange) {
       return (
         <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
           <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
           <div className='flex items-center gap-2 mt-2 justify-between'>
             <div className='flex items-center gap-2'>
               <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
-            {payload[0].value} of Birds
+              <span className='text-sm'>Ideal</span>
+            </div>
+            <span className='text-sm font-medium'>{chartData.idealRange}</span>
+          </div>
+          <div className='border-t border-white/20 pt-2 mt-2'>
+            <div className='flex items-center justify-between'>
+              <span className='text-white/70 text-sm'>Birds:</span>
+              <span className='font-semibold'>{payload[0].value}</span>
+            </div>
+          </div>
+          <div className='text-center text-xs text-white/50 mt-1'>
+            {labelStr}
+          </div>
+        </div>
+      );
+    }
+
+    // If the range has only outside range
+    if (chartData.outsideRange) {
+      return (
+        <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+          <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+          <div className='flex items-center gap-2 mt-2 justify-between'>
+            <div className='flex items-center gap-2'>
+              <div className='w-5 h-5 bg-[#EF4444] rounded-md'></div>
+              <span className='text-sm'>Outside</span>
+            </div>
+            <span className='text-sm font-medium'>
+              {chartData.outsideRange}
+            </span>
+          </div>
+          <div className='border-t border-white/20 pt-2 mt-2'>
+            <div className='flex items-center justify-between'>
+              <span className='text-white/70 text-sm'>Birds:</span>
+              <span className='font-semibold'>{payload[0].value}</span>
+            </div>
+          </div>
+          <div className='text-center text-xs text-white/50 mt-1'>
+            {labelStr}
+          </div>
+        </div>
+      );
+    }
+
+    // Fallback for backward compatibility
+    return (
+      <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+        <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+        <div className='flex items-center gap-2 mt-2 justify-between'>
+          <div className='flex items-center gap-2'>
+            <div
+              className='w-5 h-5 rounded-md'
+              style={{
+                backgroundColor: chartData.isIdeal ? '#0069E0' : '#EF4444',
+              }}
+            ></div>
+            <span className='text-sm'>
+              {chartData.isIdeal ? 'Ideal' : 'Outside'}
+            </span>
+          </div>
+          <span className='text-sm font-medium'>{labelStr}</span>
+        </div>
+        <div className='border-t border-white/20 pt-2 mt-2'>
+          <div className='flex items-center justify-between'>
+            <span className='text-white/70 text-sm'>Birds:</span>
+            <span className='font-semibold'>{payload[0].value}</span>
           </div>
-          <span>{labelStr}</span>
         </div>
       </div>
     );

src/components/pages/production/uniformity/detail/UniformityDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -11,9 +11,12 @@ import Badge from '@/components/Badge';
 import Tooltip from '@/components/Tooltip';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/production/uniformity';
-import { formatDate } from '@/lib/helper';
+import { formatDate, formatNumber } from '@/lib/helper';
 import { useUiStore } from '@/stores/ui/ui.store';
 import UniformityDetailsPreview from '@/components/pages/production/uniformity/detail/UniformityDetailsPreview';
+import { UniformityApi } from '@/services/api/uniformity';
+import useSWR from 'swr';
+import { isResponseSuccess } from '@/lib/api-helper';
 import {
   getStatusColor,
   getStatusIndicatorColor,
@@ -33,6 +36,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
   const setExpandedDrawerContent = useUiStore(
     (s) => s.setExpandedDrawerContent
   );
+  const [shouldFetchDetails, setShouldFetchDetails] = useState(false);
+  const [hasFetchedDetails, setHasFetchedDetails] = useState(false);
+
+  const { data: uniformityDetailResponse, isLoading } = useSWR(
+    shouldFetchDetails
+      ? `uniformity-detail-${initialValues.id}-with-details`
+      : null,
+    () => UniformityApi.getUniformityDetail(initialValues.id, true)
+  );
+
+  const uniformity_details = useMemo(() => {
+    if (shouldFetchDetails && isResponseSuccess(uniformityDetailResponse)) {
+      return uniformityDetailResponse.data.uniformity_details;
+    }
+    return initialValues.uniformity_details;
+  }, [shouldFetchDetails, uniformityDetailResponse, initialValues]);
 
   const handleApprove = () => {
     router.push(`/production/uniformity?action=approve&id=${initialValues.id}`);
@@ -43,12 +62,15 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
   };
 
   const handleViewUniformityDetails = () => {
+    if (!uniformity_details || uniformity_details.length === 0) {
+      setShouldFetchDetails(true);
+      return;
+    }
+
     setExpandedDrawerContent(
       <UniformityDetailsPreview
         info_umum={initialValues.info_umum}
-        uniformity_details={initialValues.uniformity_details}
+        uniformity_details={uniformity_details}
-        sampling={initialValues.sampling}
-        result={initialValues.result}
         uniformityId={initialValues.id}
       />
     );
@@ -58,6 +80,28 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     }, 0);
   };
 
+  useEffect(() => {
+    if (
+      shouldFetchDetails &&
+      uniformity_details &&
+      uniformity_details.length > 0 &&
+      !hasFetchedDetails
+    ) {
+      setExpandedDrawerContent(
+        <UniformityDetailsPreview
+          info_umum={initialValues.info_umum}
+          uniformity_details={uniformity_details}
+          uniformityId={initialValues.id}
+        />
+      );
+
+      setHasFetchedDetails(true);
+      setTimeout(() => {
+        setExpandedDrawerOpen(true);
+      }, 0);
+    }
+  }, [shouldFetchDetails, uniformity_details, hasFetchedDetails]);
+
   useEffect(() => {
     return () => {
       setExpandedDrawerOpen(false);
@@ -154,12 +198,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             return (
               <div className='flex items-center gap-2'>
                 <span>{valueMap[id]}</span>
-                <Tooltip content='Lihat Detail'>
+                <Tooltip content='Lihat Detail' position='left'>
                   <button
-                    className='p-1 hover:bg-gray-100 rounded cursor-pointer'
+                    className='p-1 hover:bg-gray-100 rounded cursor-pointer disabled:opacity-50'
                     onClick={handleViewUniformityDetails}
+                    disabled={isLoading}
                   >
+                    {isLoading ? (
+                      <Icon
+                        icon='mdi:loading'
+                        width={18}
+                        height={18}
+                        className='animate-spin'
+                      />
+                    ) : (
                       <Icon icon='mdi:eye-outline' width={18} height={18} />
+                    )}
                   </button>
                 </Tooltip>
               </div>
@@ -173,6 +227,92 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     [initialValues]
   );
 
+  const samplingTableData: DetailOptionType[] = useMemo(() => {
+    if (!initialValues.sampling) return [];
+
+    return [
+      {
+        id: 'sampling-size',
+        label: 'Sampling size',
+        value: `${formatNumber(initialValues.sampling.chick_qty_of_weight)} of Birds`,
+      },
+      {
+        id: 'mean-weight',
+        label: 'Mean Weight',
+        value: `${initialValues.sampling.mean_weight} g`,
+      },
+      {
+        id: 'min-limit',
+        label: 'Min Limit (-10%)',
+        value: `${initialValues.sampling.mean_down} g`,
+      },
+      {
+        id: 'max-limit',
+        label: 'Max Limit (+10%)',
+        value: `${initialValues.sampling.mean_up} g`,
+      },
+    ];
+  }, [initialValues.sampling]);
+
+  const columnsSampling: ColumnDef<DetailOptionType>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'label',
+        header: 'Label',
+        cell: (props) => props.row.original.label,
+      },
+      {
+        accessorKey: 'value',
+        header: 'Value',
+        cell: (props) => <span>{props.row.original.value}</span>,
+      },
+    ],
+    []
+  );
+
+  const resultTableData: DetailOptionType[] = useMemo(() => {
+    if (!initialValues.result) return [];
+
+    return [
+      {
+        id: 'ideal-birds',
+        label: 'Ideal Birds',
+        value: `${formatNumber(initialValues.result.uniform_qty)} of Birds`,
+      },
+      {
+        id: 'outside-range',
+        label: 'Outside Range',
+        value: `${formatNumber(initialValues.result.outside_qty)} of Birds`,
+      },
+      {
+        id: 'uniformity',
+        label: 'Uniformity',
+        value: `${initialValues.result.uniformity} %`,
+      },
+      {
+        id: 'cv',
+        label: 'CV',
+        value: `${initialValues.result.cv} %`,
+      },
+    ];
+  }, [initialValues.result]);
+
+  const resultColumns: ColumnDef<DetailOptionType>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'label',
+        header: 'Label',
+        cell: (props) => props.row.original.label,
+      },
+      {
+        accessorKey: 'value',
+        header: 'Value',
+        cell: (props) => <span>{props.row.original.value}</span>,
+      },
+    ],
+    []
+  );
+
   return (
     <section className='w-full h-full bg-white border-l border-gray-200'>
       {/* Header */}
@@ -185,7 +325,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
 
       {/* Form Section */}
       <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full px-6 mb-6'>
         {initialValues ? (
           <div className='flex flex-col gap-4'>
             {/* Info Umum */}
@@ -200,6 +340,39 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
                   paginationClassName: 'hidden',
                 }}
               />
+            </div>
+
+            {/* Sampling and Range */}
+            {initialValues.sampling && (
+              <div className=''>
+                <p className='text-sm font-medium mb-5'>Sampling and Range</p>
+                <Table<DetailOptionType>
+                  data={samplingTableData}
+                  columns={columnsSampling}
+                  pageSize={4}
+                  className={{
+                    containerClassName: 'mb-0',
+                    paginationClassName: 'hidden',
+                  }}
+                />
+              </div>
+            )}
+
+            {/* Result */}
+            {initialValues.result && (
+              <div className=''>
+                <p className='text-sm font-medium mb-5'>Result</p>
+                <Table<DetailOptionType>
+                  data={resultTableData}
+                  columns={resultColumns}
+                  pageSize={4}
+                  className={{
+                    containerClassName: 'mb-0',
+                    paginationClassName: 'hidden',
+                  }}
+                />
+              </div>
+            )}
 
             {/* Approve/Reject Buttons */}
             {initialValues.result &&
@@ -217,7 +390,6 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
               </>
             ) : null}
           </div>
-          </div>
         ) : (
           <div className='flex flex-col items-center justify-center py-10 text-gray-400'>
             <Icon

src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx

@@ -1,152 +1,39 @@
 'use client';
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
 import {
   UniformityDetailItem,
-  UniformitySampling,
-  UniformityResult,
   UniformityInfoUmum,
 } from '@/types/api/production/uniformity';
 import Table from '@/components/Table';
 import Badge from '@/components/Badge';
-import { formatNumber } from '@/lib/helper';
-import { DetailOptionType } from '@/types/api/production/uniformity';
 import {
   getWeightStatusColor,
   getWeightStatusIndicatorColor,
   getWeightStatusText,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { BodyWeightData } from '@/types/api/production/uniformity';
-import Button from '@/components/Button';
-import { UniformityApi } from '@/services/api/uniformity';
-import useSWR from 'swr';
-import { isResponseSuccess } from '@/lib/api-helper';
 
 interface UniformityDetailsPreviewProps {
   info_umum: UniformityInfoUmum;
-  sampling: UniformitySampling;
-  result: UniformityResult;
   uniformity_details?: UniformityDetailItem[];
   uniformityId: number;
 }
 
 const UniformityDetailsPreview = ({
   info_umum,
-  uniformity_details: initialUniformityDetails,
+  uniformity_details,
-  sampling,
-  result,
-  uniformityId,
 }: UniformityDetailsPreviewProps) => {
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
-  const [shouldFetchDetails, setShouldFetchDetails] = useState(false);
-
-  const { data: uniformityDetailResponse, isLoading } = useSWR(
-    shouldFetchDetails
-      ? `uniformity-detail-${uniformityId}-with-details`
-      : null,
-    () => UniformityApi.getUniformityDetail(uniformityId, true)
-  );
-
-  const uniformity_details = useMemo(() => {
-    if (shouldFetchDetails && isResponseSuccess(uniformityDetailResponse)) {
-      return uniformityDetailResponse.data.uniformity_details;
-    }
-    return initialUniformityDetails;
-  }, [shouldFetchDetails, uniformityDetailResponse, initialUniformityDetails]);
 
   const handleClose = () => {
     setExpandedDrawerOpen(false);
   };
 
-  const fetchWeightData = () => {
-    setShouldFetchDetails(true);
-  };
-
-  const samplingTableData: DetailOptionType[] = useMemo(() => {
-    if (!sampling) return [];
-
-    return [
-      {
-        id: 'sampling-size',
-        label: 'Sampling size',
-        value: `${formatNumber(sampling.chick_qty_of_weight)} of Birds`,
-      },
-      {
-        id: 'mean-weight',
-        label: 'Mean Weight',
-        value: `${sampling.mean_weight} g`,
-      },
-      {
-        id: 'min-limit',
-        label: 'Min Limit (-10%)',
-        value: `${sampling.mean_down} g`,
-      },
-      {
-        id: 'max-limit',
-        label: 'Max Limit (+10%)',
-        value: `${sampling.mean_up} g`,
-      },
-    ];
-  }, [sampling]);
-
-  const columnsSampling: ColumnDef<DetailOptionType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'label',
-        header: 'Label',
-        cell: (props) => props.row.original.label,
-      },
-      {
-        accessorKey: 'value',
-        header: 'Value',
-        cell: (props) => <span>{props.row.original.value}</span>,
-      },
-    ],
-    []
-  );
-
-  const resultTableData: DetailOptionType[] = useMemo(() => {
-    if (!result) return [];
-
-    return [
-      {
-        id: 'ideal-birds',
-        label: 'Ideal Birds',
-        value: `${formatNumber(result.uniform_qty)} of Birds`,
-      },
-      {
-        id: 'outside-range',
-        label: 'Outside Range',
-        value: `${formatNumber(result.outside_qty)} of Birds`,
-      },
-      {
-        id: 'uniformity',
-        label: 'Uniformity',
-        value: `${result.uniformity} %`,
-      },
-    ];
-  }, [result]);
-
-  const resultColumns: ColumnDef<DetailOptionType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'label',
-        header: 'Label',
-        cell: (props) => props.row.original.label,
-      },
-      {
-        accessorKey: 'value',
-        header: 'Value',
-        cell: (props) => <span>{props.row.original.value}</span>,
-      },
-    ],
-    []
-  );
-
   const tableData = useMemo(() => {
     if (!uniformity_details) return [];
 
@@ -229,55 +116,10 @@ const UniformityDetailsPreview = ({
       {/* Form Section */}
       <div className='divider mt-3.5'></div>
       <section className='w-full px-6'>
-        {info_umum || sampling || result ? (
+        {info_umum ? (
           <div className='flex flex-col gap-4'>
-            {/* Sampling and Range */}
-            {sampling && (
-              <div className=''>
-                <p className='text-sm font-medium mb-5'>Sampling and Range</p>
-                <Table<DetailOptionType>
-                  data={samplingTableData}
-                  columns={columnsSampling}
-                  pageSize={4}
-                  className={{
-                    containerClassName: 'mb-0',
-                    paginationClassName: 'hidden',
-                  }}
-                />
-              </div>
-            )}
-
-            {/* Result */}
-            {result && (
-              <div className=''>
-                <p className='text-sm font-medium mb-5'>Result</p>
-                <Table<DetailOptionType>
-                  data={resultTableData}
-                  columns={resultColumns}
-                  pageSize={4}
-                  className={{
-                    containerClassName: 'mb-0',
-                    paginationClassName: 'hidden',
-                  }}
-                />
-              </div>
-            )}
-
-            {!uniformity_details || uniformity_details.length === 0 ? (
-              <div className='mt-4'>
-                <Button
-                  type='button'
-                  onClick={fetchWeightData}
-                  disabled={isLoading}
-                  className='w-full'
-                >
-                  {isLoading ? 'Loading...' : 'Show Body Weight Details'}
-                </Button>
-              </div>
-            ) : null}
-
             {/* Body Weight Details */}
-            {uniformity_details && uniformity_details.length > 0 && (
+            {uniformity_details && uniformity_details.length > 0 ? (
               <div className='mt-4'>
                 <Table<BodyWeightData>
                   data={tableData}
@@ -286,6 +128,17 @@ const UniformityDetailsPreview = ({
                   className={{ containerClassName: 'mb-5' }}
                 />
               </div>
+            ) : (
+              <div className='flex flex-col items-center justify-center py-10 text-gray-400'>
+                <Icon
+                  icon='mdi:file-document-outline'
+                  width={64}
+                  height={64}
+                  className='mb-4'
+                />
+                <p className='text-lg'>No data available</p>
+                <p className='text-sm'>Body weight details not found</p>
+              </div>
             )}
           </div>
         ) : (

src/components/pages/production/uniformity/form/UniformityForm.schema.ts

@@ -24,9 +24,9 @@ type UniformityFormSchemaType = {
 };
 
 const FileSchema = Yup.mixed<File>()
-  .test('documentSize', 'Ukuran file maksimal 2 MB', (value): boolean => {
+  .test('documentSize', 'Ukuran file maksimal 5 MB', (value): boolean => {
     if (!value) return true;
-    if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+    if (value instanceof File) return value.size <= 5 * 1024 * 1024;
     return false;
   })
   .test('documentType', 'Format file harus Excel', (value): boolean => {

src/components/pages/production/uniformity/form/UniformityForm.tsx

@@ -43,7 +43,9 @@ import UniformityResultForm from '@/components/pages/production/uniformity/form/
 import { generateUniformityTemplate } from '@/components/pages/production/uniformity/export/UniformityTemplate';
 import useSWR from 'swr';
 import { cn, formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import Tooltip from '@/components/Tooltip';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface UniformityFormProps {
   formType?: 'add' | 'edit';
@@ -77,6 +79,7 @@ const UniformityForm = ({
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -282,6 +285,22 @@ const UniformityForm = ({
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   // ===== FORM HANDLERS =====
   const handleLocationChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -339,8 +358,8 @@ const UniformityForm = ({
         return;
       }
 
-      if (document.size > 2 * 1024 * 1024) {
+      if (document.size > 5 * 1024 * 1024) {
-        toast.error(`Ukuran file ${document.name} maksimal 2 MB!`);
+        toast.error(`Ukuran file ${document.name} maksimal 5 MB!`);
         return;
       }
 
@@ -454,7 +473,7 @@ const UniformityForm = ({
         <section className='w-full px-6 mb-6'>
           <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
 
-          <form onSubmit={formik.handleSubmit} className='flex flex-col gap-6'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
             {uniformityFormErrorMessage && (
               <div className='alert alert-error' role='alert'>
                 <Icon
@@ -466,6 +485,14 @@ const UniformityForm = ({
               </div>
             )}
 
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+
             <DateInput
               required
               label='Tanggal'
@@ -693,7 +720,7 @@ const UniformityForm = ({
                   type='submit'
                   color='primary'
                   className='w-full'
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                 >
                   {formik.isSubmitting ? (
                     <span className='loading loading-spinner'></span>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
@@ -14,6 +14,7 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { useRouter } from 'next/navigation';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   PurchaseRequestAcceptApprovalFormDefaultValues,
@@ -28,6 +29,7 @@ import {
 } from '@/types/api/purchase/purchase';
 import DateInput from '@/components/input/DateInput';
 import { formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { SupplierApi } from '@/services/api/master-data';
 
@@ -52,7 +54,9 @@ const PurchaseOrderAcceptApprovalForm = ({
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [key, setKey] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const isRejected = initialValues?.latest_approval?.action === 'REJECTED';
 
@@ -67,7 +71,6 @@ const PurchaseOrderAcceptApprovalForm = ({
       | 'purchase_item_id'
       | 'received_date'
       | 'travel_number'
-      | 'travel_document_path'
       | 'vehicle_number'
       | 'expedition_vendor_id'
       | 'received_qty'
@@ -180,7 +183,6 @@ const PurchaseOrderAcceptApprovalForm = ({
               purchase_item_id: formItem.purchase_item_id || 0,
               received_date: formItem.received_date || '',
               travel_number: formItem.travel_number || '',
-              travel_document_path: formItem.travel_document_path || '',
               vehicle_number: formItem.vehicle_number || '',
               expedition_vendor_id: formItem.expedition_vendor_id || 0,
               received_qty:
@@ -210,6 +212,22 @@ const PurchaseOrderAcceptApprovalForm = ({
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   // ===== API DATA FETCHING =====
   const purchaseItems = useMemo(() => {
     if (initialValues?.items) {
@@ -235,6 +253,9 @@ const PurchaseOrderAcceptApprovalForm = ({
   useEffect(() => {
     if (purchaseItems.length > 0 && initialValues?.items) {
       const updatedItems = initialValues.items.map((item) => {
+        const expeditionVendorId =
+          item.expedition_vendor_id || item.expedition_vendor?.id || 0;
+
         return {
           purchase_item: null,
           purchase_item_id: item.id,
@@ -242,7 +263,6 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? new Date(item.received_date).toISOString().split('T')[0]
             : '',
           travel_number: item.travel_number || '',
-          travel_document_path: item.travel_document_path || '',
           vehicle_number: item.vehicle_number || '',
           expedition_vendor: item.expedition_vendor
             ? {
@@ -250,7 +270,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                 label: item.expedition_vendor.name,
               }
             : null,
-          expedition_vendor_id: item.expedition_vendor_id || 0,
+          expedition_vendor_id: expeditionVendorId,
           received_qty: item.total_qty || '',
           transport_per_item: item.transport_per_item || '',
         };
@@ -259,20 +279,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   }, [purchaseItems, initialValues, key]);
 
-  useEffect(() => {
-    if (
-      formik.values.travel_documents &&
-      formik.values.travel_documents.length > 0
-    ) {
-      const fileNames = formik.values.travel_documents
-        .map((file) => file.name)
-        .join(', ');
-      formik.values.items?.forEach((item, idx) => {
-        formik.setFieldValue(`items.${idx}.travel_document_path`, fileNames);
-      });
-    }
-  }, [formik.values.travel_documents]);
-
   // ===== HELPER FUNCTIONS =====
   const getQuantityExceededError = useCallback(
     (idx: number, receivedQty: number) => {
@@ -349,7 +355,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   return (
     <form
       key={key}
-      onSubmit={formik.handleSubmit}
+      onSubmit={handleFormSubmit}
       className='w-full flex flex-col gap-6'
     >
       <div className='w-full'>
@@ -358,6 +364,24 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? 'Konfirmasi Penerimaan Produk'
             : 'Edit Penerimaan Produk'}
         </h2>
+        {purchaseOrderFormErrorMessage && (
+          <div role='alert' className='alert alert-error'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{purchaseOrderFormErrorMessage}</span>
+          </div>
+        )}
+
+        {/* Error List Alert */}
+        {formErrorList.length > 0 && (
+          <AlertErrorList
+            formErrorList={formErrorList}
+            onClose={() => setFormErrorList([])}
+          />
+        )}
 
         <div className='overflow-x-auto'>
           <table className='table'>
@@ -510,33 +534,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }}
                       />
                     </td>
-                    <td className='hidden'>
-                      <TextInput
-                        required
-                        name={`items.${idx}.travel_document_path`}
-                        type='text'
-                        value={formItem?.travel_document_path || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.travel_document_path`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          isRepeaterInputError(idx, 'travel_document_path')
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(idx, 'travel_document_path')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan path dokumen'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
                     <td>
                       <TextInput
                         required
@@ -687,14 +684,15 @@ const PurchaseOrderAcceptApprovalForm = ({
             name='travel_documents'
             label='Dokumen Surat Jalan'
             accept='.pdf,.jpg,.jpeg,.png'
+            ref={fileInputRef}
             onChange={(e) => {
               const files = Array.from(e.target.files || []);
               const invalidFiles = files.filter(
-                (file) => file.size > 2 * 1024 * 1024
+                (file) => file.size > 5 * 1024 * 1024
               );
 
               if (invalidFiles.length > 0) {
-                toast.error('Ukuran dokumen maksimal 2 MB!');
+                toast.error('Ukuran dokumen maksimal 5 MB!');
                 e.target.value = '';
                 return;
               }
@@ -726,6 +724,10 @@ const PurchaseOrderAcceptApprovalForm = ({
               onClick={() => {
                 if (type === 'add') {
                   formik.resetForm();
+                  formik.setFieldValue('travel_documents', []);
+                  if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                  }
                 }
                 setPurchaseOrderFormErrorMessage('');
                 onCancel?.();
@@ -741,27 +743,13 @@ const PurchaseOrderAcceptApprovalForm = ({
               className='px-4'
               isLoading={formik.isSubmitting}
               disabled={
-                !formik.isValid ||
+                formik.isSubmitting || hasQuantityExceededErrors || isRejected
-                formik.isSubmitting ||
-                hasQuantityExceededErrors ||
-                isRejected
               }
             >
               Submit
             </Button>
           </div>
         </div>
-
-        {purchaseOrderFormErrorMessage && (
-          <div role='alert' className='alert alert-error'>
-            <Icon
-              icon='material-symbols:error-outline'
-              width={24}
-              height={24}
-            />
-            <span>{purchaseOrderFormErrorMessage}</span>
-          </div>
-        )}
       </div>
     </form>
   );

src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts

@@ -38,7 +38,6 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    travel_document_path: string;
     vehicle_number: string;
     expedition_vendor?: {
       value: number;
@@ -76,7 +75,6 @@ export type PurchaseAcceptApprovalItemSchema = {
   purchase_item_id: number;
   received_date: string;
   travel_number: string;
-  travel_document_path: string;
   vehicle_number: string;
   expedition_vendor?: {
     value: number;
@@ -185,9 +183,6 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
     travel_number: Yup.string()
       .required('No. Surat jalan wajib diisi!')
       .typeError('No. Surat jalan wajib diisi!'),
-    travel_document_path: Yup.string()
-      .required('Dokumen Surat jalan wajib diisi!')
-      .typeError('Dokumen Surat jalan wajib diisi!'),
     vehicle_number: Yup.string()
       .required('Nomor kendaraan wajib diisi!')
       .typeError('Nomor kendaraan wajib diisi!'),
@@ -395,9 +390,9 @@ export const PurchaseRequestAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseR
       .of(
         Yup.mixed<File>()
           .required('Dokumen surat jalan wajib diupload!')
-          .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
+          .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
             if (!value) return true;
-            if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+            if (value instanceof File) return value.size <= 5 * 1024 * 1024;
             return true;
           })
       )
@@ -415,7 +410,6 @@ export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcce
         purchase_item_id: 0,
         received_date: '',
         travel_number: '',
-        travel_document_path: '',
         vehicle_number: '',
         expedition_vendor_id: 0,
         received_qty: '',
@@ -436,7 +430,6 @@ export const PurchaseRequestAcceptApprovalFormDefaultValues = (
           purchase_item_id: item.id,
           received_date: '',
           travel_number: '',
-          travel_document_path: '',
           vehicle_number: '',
           expedition_vendor_id: 0,
           received_qty: '',
@@ -447,7 +440,6 @@ export const PurchaseRequestAcceptApprovalFormDefaultValues = (
             purchase_item_id: 0,
             received_date: '',
             travel_number: '',
-            travel_document_path: '',
             vehicle_number: '',
             expedition_vendor_id: 0,
             received_qty: '',

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

@@ -12,10 +12,12 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { SupplierApi } from '@/services/api/master-data';
 import { SupplierProducts } from '@/types/api/master-data/supplier';
 import { isResponseSuccess } from '@/lib/api-helper';
 
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
   PurchaseRequestStaffApprovalFormInitialValues,
@@ -87,6 +89,7 @@ const PurchaseOrderStaffApprovalForm = ({
   const deleteModal = useModal();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [selectedItemForDelete, setSelectedItemForDelete] = useState<
     number | null
   >(null);
@@ -415,6 +418,22 @@ const PurchaseOrderStaffApprovalForm = ({
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   const supplierProductOptions = baseSupplierProductOptions;
 
   // ===== API DATA FETCHING =====
@@ -652,16 +671,32 @@ const PurchaseOrderStaffApprovalForm = ({
 
   return (
     <>
-      <form
+      <form onSubmit={handleFormSubmit} className='w-full flex flex-col gap-6'>
-        onSubmit={formik.handleSubmit}
-        className='w-full flex flex-col gap-6'
-      >
         <div className='w-full'>
           <h2 className='text-lg font-semibold mb-4'>
             {type === 'add'
               ? 'Konfirmasi Item Pembelian'
               : 'Edit Item Pembelian'}
           </h2>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           <div className='overflow-x-auto'>
             {groupedPurchaseItems.length > 0 ? (
               <div>
@@ -1164,23 +1199,12 @@ const PurchaseOrderStaffApprovalForm = ({
                 color='primary'
                 className='px-4'
                 isLoading={formik.isSubmitting}
-                disabled={!formik.isValid || formik.isSubmitting || isRejected}
+                disabled={formik.isSubmitting || isRejected}
               >
                 Submit
               </Button>
             </div>
           </div>
-
-          {purchaseOrderFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseOrderFormErrorMessage}</span>
-            </div>
-          )}
         </div>
       </form>
 

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -16,6 +16,7 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   PurchaseRequestFormSchema,
@@ -32,6 +33,7 @@ import {
 import { Supplier, SupplierProducts } from '@/types/api/master-data/supplier';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
@@ -59,6 +61,7 @@ const PurchaseRequestForm = ({
   );
   const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ===== TYPE DEFINITIONS =====
   interface ProductOptionType {
@@ -211,6 +214,22 @@ const PurchaseRequestForm = ({
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   // ===== API DATA FETCHING =====
   const { data: supplierData, isLoading: isLoadingProducts } = useSWR(
     formik.values.supplier_id && Number(formik.values.supplier_id) > 0
@@ -487,10 +506,29 @@ const PurchaseRequestForm = ({
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {purchaseRequestFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseRequestFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Basic Info Card */}
           <Card
             title='Informasi Purchase Request'
@@ -896,7 +934,7 @@ const PurchaseRequestForm = ({
                   color='primary'
                   className='px-4'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                 >
                   Submit
                 </Button>
@@ -935,17 +973,6 @@ const PurchaseRequestForm = ({
               </div>
             )}
           </div>
-
-          {purchaseRequestFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseRequestFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
 

src/types/api/production/uniformity.d.ts

@@ -1,6 +1,70 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { BaseApproval } from '@/types/api/approval/approval';
 
+// ==================== CHART DATA TYPES ====================
+export type WeightDistributionRange = {
+  range: string;
+  min_weight: number;
+  max_weight: number;
+  bird_count: number;
+  is_ideal_range: boolean;
+  ideal_range?: string;
+  outside_range?: string;
+};
+
+export type IdealRange = {
+  min_weight: number;
+  max_weight: number;
+  total_ideal_birds: number;
+};
+
+export type StatisticsData = {
+  min_weight: number;
+  max_weight: number;
+  average_weight: number;
+  total_birds_measured: number;
+};
+
+export type WeekBarChartData = {
+  has_data: boolean;
+  weight_distribution: WeightDistributionRange[];
+  ideal_range: IdealRange;
+  statistics: StatisticsData;
+};
+
+export type BarChart = {
+  current_week: number;
+  all_weeks: Record<string, WeekBarChartData>;
+};
+
+export type AvailableWeek = {
+  week: number;
+  uniformity_percentage: number;
+  ideal_count: number;
+  outside_ideal_count: number;
+  total_count: number;
+  has_data: boolean;
+};
+
+export type WeekInfo = {
+  total_weeks: number;
+  weeks_with_data: number;
+  current_week_index: number;
+  has_prev_week: boolean;
+  has_next_week: boolean;
+};
+
+export type GaugeChart = {
+  current_week: number;
+  available_weeks: AvailableWeek[];
+  week_info: WeekInfo;
+};
+
+export type ChartData = {
+  bar_chart: BarChart;
+  gauge_chart: GaugeChart;
+};
+
 // ==================== GET ALL RESPONSE ====================
 export type Uniformity = BaseMetadata & {
   id: number;
@@ -21,6 +85,7 @@ export type Uniformity = BaseMetadata & {
   standard_mean_weight: number | null;
   standard_uniformity: number | null;
   created_at: string;
+  chart_data?: ChartData;
   created_by: number;
   latest_approval?: BaseApproval;
 };

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

@@ -120,7 +120,6 @@ export type CreateAcceptApprovalRequestPayload = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    travel_document_path: string;
     vehicle_number: string;
     expedition_vendor_id: number;
     received_qty: number;