fix(FE): change options value debt supplier

[FIX/FE] Daily Marketing Report

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

.gitlab-ci.yml

@@ -2,6 +2,17 @@ stages:
   - build
   - deploy
 
+# ==========================================================
+# ✅ Global defaults
+# ==========================================================
+default:
+  tags:
+    - server-development-biznet
+  interruptible: true
+
+# ==========================================================
+# 🏗️ Build Template
+# ==========================================================
 .build_template: &build_template
   stage: build
   image: node:20-alpine
@@ -39,6 +50,9 @@ stages:
       - out/
     expire_in: 1 week
 
+# ==========================================================
+# 🚀 Deploy Template
+# ==========================================================
 .deploy_template: &deploy_template
   stage: deploy
   image:
@@ -82,11 +96,11 @@ stages:
       if [ "$STATUS" = "success" ]; then
         COLOR=3066993
         TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
-        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` completed successfully."
+        DESC="Deployment job on branch \${CI_COMMIT_REF_NAME}\ completed successfully."
       else
         COLOR=15158332
         TITLE="❌ Deployment ${ENVIRONMENT_NAME} Failed"
-        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
+        DESC="Deployment job on branch \${CI_COMMIT_REF_NAME}\ encountered issues."
       fi
 
       jq -n \
@@ -114,7 +128,9 @@ stages:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ====== DEVELOPMENT (Branch development) ======
+# ==========================================================
+# ==== DEVELOPMENT (Branch development) ======
+# ==========================================================
 build:dev:
   <<: *build_template
   rules:
@@ -140,7 +156,9 @@ deploy:dev:
     name: development
     url: https://dev-lti-erp.mbugroup.id
 
+# ==========================================================
 # ====== STAGING (Branch staging) ======
+# ==========================================================
 build:staging:
   <<: *build_template
   rules:
@@ -165,25 +183,3 @@ deploy:staging:
   environment:
     name: staging
     url: https://stg-lti-erp.mbugroup.id
-# ====== PRODUCTION ======
-# build:production:
-#   <<: *build_template
-#   rules:
-#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
-#     - if: '$CI_COMMIT_BRANCH == "master"'
-#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
-#   environment:
-#     name: production
-
-# deploy:production:
-#   <<: *deploy_template
-#   needs: ["build:production"]
-#   rules:
-#     - if: '$CI_COMMIT_BRANCH == "master"'
-#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
-#   variables:
-#     S3_BUCKET: "lti-erp.mbugroup.id"
-#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
-#   environment:
-#     name: production
-

package.json

@@ -15,23 +15,34 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
     "formik": "^2.4.6",
+    "input-otp": "^1.4.2",
     "jspdf": "^3.0.4",
     "jspdf-autotable": "^5.0.2",
+    "lucide-react": "^0.562.0",
     "moment": "^2.30.1",
     "next": "15.5.9",
-    "react": "19.1.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.1.2",
     "react-day-picker": "^9.11.1",
-    "react-dom": "19.1.0",
+    "react-dom": "^19.1.2",
     "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.70.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
+    "react-resizable-panels": "2.1.7",
     "react-select": "^5.10.2",
     "recharts": "^3.6.0",
+    "sonner": "^2.0.7",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
+    "vaul": "^1.1.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"

src/app/closing/detail/page.tsx

@@ -7,18 +7,33 @@ import ClosingDetail from '@/components/pages/closing/ClosingDetail';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
 
 const ClosingDetailPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const closingId = searchParams.get('closingId');
+  const kandangId = searchParams.get('kandangId'); // project flock kandang ID
 
   const { data: closing, isLoading: isLoadingClosing } = useSWR(
     closingId,
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
+  // WORKAROUND - get flock data from closing ID
+  const { data: projectData, isLoading: isLoadingProject } = useSWR(
+    `flock-${closingId}`,
+    () => ProjectFlockApi.getSingle(Number(closingId))
+  );
+  // WORKAROUND - get kandang data from closing ID
+  const { data: kandangData, isLoading: isLoadingKandang } = useSWR(
+    kandangId ? `kandang-${closingId}-${kandangId}` : null,
+    () => ProjectFlockKandangApi.getSingle(Number(kandangId))
+  );
+
   const { data: salesData, isLoading: isLoadingSales } = useSWR(
     closingId ? `sales-${closingId}` : null,
     () => ClosingApi.getPenjualan(Number(closingId))
@@ -44,7 +59,12 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
+  const isLoading =
+    isLoadingClosing ||
+    isLoadingSales ||
+    isLoadingHppEkspedisi ||
+    isLoadingProject ||
+    isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -60,6 +80,12 @@ const ClosingDetailPage = () => {
               ? hppEkspedisiData.data
               : undefined
           }
+          projectData={
+            isResponseSuccess(projectData) ? projectData.data : undefined
+          }
+          kandangData={
+            isResponseSuccess(kandangData) ? kandangData.data : undefined
+          }
         />
       )}
     </div>

src/app/daily-checklist/daily-checklist/page.tsx

@@ -0,0 +1,11 @@
+import { DailyChecklistContent } from '@/figma-make/components/pages/daily-checklist/DailyChecklistContent';
+
+const DailyChecklistPage = () => {
+  return (
+    <section className='w-full'>
+      <DailyChecklistContent />
+    </section>
+  );
+};
+
+export default DailyChecklistPage;

src/app/daily-checklist/dashboard/page.tsx

@@ -0,0 +1,11 @@
+import { Dashboard as DashboardDailyChecklist } from '@/figma-make/components/pages/dashboard/Dashboard';
+
+const DailyChecklistDashboardPage = () => {
+  return (
+    <section className='w-full'>
+      <DashboardDailyChecklist />
+    </section>
+  );
+};
+
+export default DailyChecklistDashboardPage;

src/app/daily-checklist/list-daily-checklist/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/daily-checklist/list-daily-checklist/detail/page.tsx

@@ -0,0 +1,11 @@
+import { DetailDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent';
+
+const ListDailyChecklistDetailPage = () => {
+  return (
+    <section className='w-full'>
+      <DetailDailyChecklistContent />
+    </section>
+  );
+};
+
+export default ListDailyChecklistDetailPage;

src/app/daily-checklist/list-daily-checklist/page.tsx

@@ -0,0 +1,11 @@
+import { ListDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent';
+
+const ListDailyChecklistPage = () => {
+  return (
+    <section className='w-full'>
+      <ListDailyChecklistContent />
+    </section>
+  );
+};
+
+export default ListDailyChecklistPage;

src/app/daily-checklist/master-data/activity/page.tsx

@@ -0,0 +1,11 @@
+import { MasterAktivitasContent } from '@/figma-make/components/pages/master-data/activity/MasterAktivitasContent';
+
+const MasterAktivitasPage = () => {
+  return (
+    <section className='w-full'>
+      <MasterAktivitasContent />
+    </section>
+  );
+};
+
+export default MasterAktivitasPage;

src/app/daily-checklist/master-data/configuration/page.tsx

@@ -0,0 +1,11 @@
+import { MasterConfigurationContent } from '@/figma-make/components/pages/master-data/configuration/MasterConfigurationContent';
+
+const MasterConfigurationPage = () => {
+  return (
+    <section className='w-full'>
+      <MasterConfigurationContent />
+    </section>
+  );
+};
+
+export default MasterConfigurationPage;

src/app/daily-checklist/master-data/employee/page.tsx

@@ -0,0 +1,11 @@
+import { MasterEmployeeContent } from '@/figma-make/components/pages/master-data/employee/MasterEmployeeContent';
+
+const MasterEmployeePage = () => {
+  return (
+    <section className='w-full'>
+      <MasterEmployeeContent />
+    </section>
+  );
+};
+
+export default MasterEmployeePage;

src/app/daily-checklist/reports/page.tsx

@@ -0,0 +1,11 @@
+import { DailyChecklistReportsContent } from '@/figma-make/components/pages/reports/DailyChecklistReportsContent';
+
+const DailyChecklistReportsPage = () => {
+  return (
+    <section className='w-full'>
+      <DailyChecklistReportsContent />
+    </section>
+  );
+};
+
+export default DailyChecklistReportsPage;

src/app/expense/realization/page.tsx

@@ -37,7 +37,7 @@ const ExpenseRealization = () => {
   const isExpenseCanBeRealized =
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    expense.data.latest_approval.step_number === 3;
+    expense.data.latest_approval.step_number === 4;
 
   if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
     if (typeof window !== 'undefined') {

src/app/globals.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @plugin "daisyui";
 @import '../styles/daisyui.css';
+@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import '@/app/globals.css';
 
 import { Toaster } from 'react-hot-toast';
+import { Toaster as SonnerToaster } from '@/figma-make/components/base/sonner';
 import MainDrawer from '@/components/MainDrawer';
 import RequireAuth from '@/components/helper/RequireAuth';
 
@@ -35,6 +36,7 @@ export default function RootLayout({
         </RequireAuth>
 
         <Toaster />
+        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

src/app/production/uniformity/add/page.tsx

@@ -0,0 +1,7 @@
+import UniformityForm from '@/components/pages/production/uniformity/form/UniformityForm';
+
+const AddUniformity = () => {
+  return <UniformityForm formType='add' />;
+};
+
+export default AddUniformity;

src/app/production/uniformity/detail/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import UniformityDetail from '@/components/pages/production/uniformity/detail/UniformityDetail';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { UniformityApi } from '@/services/api/uniformity';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const UniformityDetailPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const uniformityId = searchParams.get('uniformityId');
+
+  const { data: uniformity, isLoading: isLoadingUniformity } = useSWR(
+    uniformityId,
+    (id: string) => UniformityApi.getUniformityDetail(parseInt(id))
+  );
+
+  if (!uniformityId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingUniformity && (!uniformity || isResponseError(uniformity))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full h-full flex flex-col justify-center'>
+      {isLoadingUniformity && (
+        <div className='w-full flex flex-row justify-center items-center p-4 min-h-screen'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      )}
+      {isResponseSuccess(uniformity) && (
+        <UniformityDetail initialValues={uniformity.data} />
+      )}
+    </div>
+  );
+};
+
+export default UniformityDetailPage;

src/app/production/uniformity/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import UniformityPageWrapper from '@/components/pages/production/uniformity/UniformityPageWrapper';
+
+export default function UniformityLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <UniformityPageWrapper>{children}</UniformityPageWrapper>;
+}

src/app/production/uniformity/page.tsx

@@ -0,0 +1,7 @@
+import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
+
+const Uniformity = () => {
+  return <UniformityTable />;
+};
+
+export default Uniformity;

src/app/report/finance/page.tsx

@@ -0,0 +1,7 @@
+import FinanceTabs from '@/components/pages/report/finance/FinanceTabs';
+
+const Finance = () => {
+  return <FinanceTabs />;
+};
+
+export default Finance;

src/components/Badge.tsx

@@ -3,29 +3,25 @@
 import { HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
+import type { Color, Variant, Size } from '@/types/theme';
 
 export interface BadgeProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
   children?: ReactNode;
   className?: {
     badge?: string;
+    status?: string;
   };
-  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
-  color?:
-    | 'neutral'
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  statusIndicator?: boolean;
+  variant?: Variant;
+  color?: Color;
+  size?: Size;
 }
 
 const Badge = ({
   children,
   className,
+  statusIndicator = false,
   variant = 'default',
   color,
   size = 'md',
@@ -34,7 +30,7 @@ const Badge = ({
   const getBadgeClasses = () => {
     const baseClasses = 'badge';
 
-    const variantClasses = {
+    const variantClasses: Record<Variant, string> = {
       default: '',
       outline: 'badge-outline',
       ghost: 'badge-ghost',
@@ -42,7 +38,7 @@ const Badge = ({
       dash: 'badge-dash',
     };
 
-    const colorClasses = {
+    const colorClasses: Record<Color, string> = {
       neutral: 'badge-neutral',
       primary: 'badge-primary',
       secondary: 'badge-secondary',
@@ -51,9 +47,10 @@ const Badge = ({
       success: 'badge-success',
       warning: 'badge-warning',
       error: 'badge-error',
+      none: '',
     };
 
-    const sizeClasses = {
+    const sizeClasses: Record<Size, string> = {
       xs: 'badge-xs',
       sm: 'badge-sm',
       md: 'badge-md',
@@ -70,8 +67,31 @@ const Badge = ({
     );
   };
 
+  const getStatusClasses = () => {
+    if (!statusIndicator) return '';
+
+    const statusIndicatorClasses: Record<Color, string> = {
+      neutral: 'bg-neutral',
+      primary: 'bg-primary',
+      secondary: 'bg-secondary',
+      accent: 'bg-accent',
+      info: 'bg-info',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      error: 'bg-error',
+      none: '',
+    };
+
+    return cn(
+      'w-2.5 h-2.5 rounded-full',
+      color && statusIndicatorClasses[color],
+      className?.status
+    );
+  };
+
   return (
     <span className={getBadgeClasses()} {...props}>
+      {statusIndicator && <span className={getStatusClasses()} />}
       {children}
     </span>
   );

src/components/Drawer.tsx

@@ -15,6 +15,8 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
+  expandedContent?: ReactNode;
+  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -36,6 +38,8 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
+  expandedContent,
+  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -46,12 +50,21 @@ const Drawer = ({
       drawerSidebarContent: 'min-h-full bg-base-100',
     };
 
+    const getSidebarWidth = () => {
+      if (variant === 'sidebar') {
+        return expandedContent
+          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
+          : 'w-full max-w-[300px] lg:w-[300px]';
+      }
+      return 'w-full sm:min-w-120 sm:w-fit';
+    };
+
     if (variant === 'sidebar') {
       return {
         ...baseClassNames,
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full max-w-[300px] lg:w-[300px]'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'right') {
@@ -60,11 +73,11 @@ const Drawer = ({
         drawer: cn(baseClassNames.drawer, 'drawer-end'),
         drawerSide: cn(
           baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
+          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -76,7 +89,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     }
@@ -138,14 +151,37 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content */}
+        {/* Sidebar Content - Full height container */}
         <div
           className={cn(
-            varianClassName?.drawerSidebarContent,
-            className?.drawerContent
+            'flex h-screen bg-base-100 overflow-hidden',
+            variant === 'right' && 'flex-row'
           )}
         >
-          {sidebarContent}
+          {/* Primary Sidebar Content */}
+          <div
+            className={cn(
+              varianClassName?.drawerSidebarContent,
+              className?.drawerContent,
+              'overflow-y-auto'
+            )}
+          >
+            {sidebarContent}
+          </div>
+
+          {/* Expanded Drawer (Right side, side-by-side) */}
+          {expandedContent && (
+            <div
+              className={cn(
+                'border-l border-gray-200 bg-white flex flex-col h-full',
+                expandedWidth
+              )}
+            >
+              <div className='overflow-y-auto flex-1 h-full'>
+                {expandedContent}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/FloatingActionsButton.tsx

@@ -39,8 +39,8 @@ const FloatingActionsButton = ({
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
     selectedRowIds.length > 0
-      ? 'bottom-[10%] opacity-100'
-      : 'bottom-[-10%] opacity-0';
+      ? 'bottom-[5%] opacity-100'
+      : 'bottom-[-5%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -60,7 +60,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
         'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
         'bg-slate-950 backdrop-blur-md'
       )}

src/components/MainDrawer.tsx

@@ -67,7 +67,9 @@ const MainDrawer = ({
   const pathname = usePathname();
   const { permissionCheck } = useAuth();
 
-  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
+
+  const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
     permissionCheck(permission)
   );
 

src/components/helper/RequireAuth.tsx

@@ -5,6 +5,7 @@ import useSWR from 'swr';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { AuthApi } from '@/services/api/auth';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
 import { AxiosError } from 'axios';
@@ -28,8 +29,8 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
 
-    // refresh every 13 minutes
-    refreshInterval: 13 * 60 * 1000,
+    // refresh every 12 minutes
+    refreshInterval: 12 * 60 * 1000,
   });
 
   useEffect(() => {
@@ -55,6 +56,25 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     setIsLoadingUser(isLoadingUserResponse);
   }, [isLoadingUserResponse]);
 
+  useEffect(() => {
+    const interval = setInterval(
+      async () => {
+        await AuthApi.refresh();
+      },
+      12 * 60 * 1000
+    );
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const refreshUserSession = async () => {
+      await AuthApi.refresh();
+    };
+
+    refreshUserSession();
+  }, []);
+
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||
     (!userResponse && !userErrorResponse)
@@ -66,7 +86,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     );
   }
 
-  if (userErrorResponse) {
+  if (!isLoadingUserResponse && userErrorResponse) {
     return (
       <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
         <h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
@@ -74,10 +94,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
           Please try refreshing the page or contact support if the problem
           persists.
         </p>
-        <button
-          className='btn btn-primary'
-          onClick={() => window.location.reload()}
-        >
+        <button className='btn btn-primary' onClick={() => redirectToSSO()}>
           Retry
         </button>
       </div>

src/components/helper/form/FormErrors.tsx

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

src/components/input/FileInput.tsx

@@ -33,6 +33,7 @@ const FileInput = ({
   isError,
   errorMessage,
   disabled = false,
+  required = false,
   onChange,
   onBlur,
   readOnly = false,
@@ -56,6 +57,13 @@ const FileInput = ({
           )}
         >
           {label}
+          {required && (
+            <>
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
         </label>
       )}
 

src/components/modal/ConfirmationModal.tsx

@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
+export type IconPosition = 'left' | 'center' | 'right';
+
 export interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
+  subtitleText?: string;
   closeOnBackdrop?: boolean;
   primaryButton?: ButtonProps & {
     text?: string;
@@ -24,17 +27,84 @@ export interface ConfirmationModalProps {
     modalBox?: string;
   };
   children?: React.ReactNode;
+  iconSize?: number;
+  iconPosition?: IconPosition;
 }
 
+const iconConfig = {
+  info: {
+    icon: 'material-symbols:info-outline-rounded',
+    iconClassName: 'text-info-content',
+    bgClassName: 'bg-info',
+    outerRingClassName: 'bg-info/20',
+    borderClassName: 'border-info',
+  },
+  success: {
+    icon: 'heroicons:check',
+    iconClassName: 'text-white',
+    bgClassName: 'bg-[#00D390]',
+    outerRingClassName: 'bg-[#00D3901F]',
+    borderClassName: 'border-[#CCF7EB]',
+  },
+  error: {
+    icon: 'solar:danger-triangle-linear',
+    iconClassName: 'text-error-content',
+    bgClassName: 'bg-[#f03338]',
+    outerRingClassName: 'bg-[#f3cdcd]',
+    borderClassName: 'border-[#fff0ef]',
+  },
+} as const;
+
+const ConfirmationModalIcon = ({
+  type,
+  size = 24,
+}: {
+  type: 'info' | 'success' | 'error';
+  size?: number;
+}) => {
+  const config = iconConfig[type];
+
+  return (
+    <div className='flex items-center justify-center p-2'>
+      <div
+        className={cn(
+          'rounded-full border-4 p-1',
+          config.outerRingClassName,
+          config.borderClassName
+        )}
+      >
+        <div className={cn('rounded-full p-1', config.outerRingClassName)}>
+          <div
+            className={cn(
+              'rounded-full p-3 flex items-center justify-center',
+              config.bgClassName
+            )}
+          >
+            <Icon
+              icon={config.icon}
+              width={size}
+              height={size}
+              className={config.iconClassName}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const ConfirmationModal = ({
   ref,
   type = 'info',
   text,
+  subtitleText,
   closeOnBackdrop,
   primaryButton,
   secondaryButton,
   className,
   children,
+  iconSize = 32,
+  iconPosition = 'center',
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
 
@@ -55,47 +125,44 @@ const ConfirmationModal = ({
   return (
     <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
       <div className='w-full flex flex-col gap-4'>
-        <div
-          className={cn(
-            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
-            {
-              'bg-error': type === 'error',
-              'bg-info': type === 'info',
-              'bg-success': type === 'success',
-            }
-          )}
-        >
-          {type === 'info' && (
-            <Icon
-              icon='material-symbols:info-outline-rounded'
-              width={64}
-              height={64}
-              className='text-info-content'
-            />
-          )}
+        {iconPosition === 'center' ? (
+          <>
+            <div className='w-fit mx-auto'>
+              <ConfirmationModalIcon type={type} size={iconSize} />
+            </div>
 
-          {type === 'success' && (
-            <Icon
-              icon='qlementine-icons:success-12'
-              width={64}
-              height={64}
-              className='text-success-content'
-            />
-          )}
+            <p className='text-center font-medium'>
+              {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+            </p>
 
-          {type === 'error' && (
-            <Icon
-              icon='solar:danger-triangle-linear'
-              width={64}
-              height={64}
-              className='text-error-content'
-            />
-          )}
-        </div>
+            {subtitleText && (
+              <p className='text-center text-sm text-gray-400'>
+                {subtitleText}
+              </p>
+            )}
+          </>
+        ) : (
+          <div
+            className={cn('flex flex-row items-center gap-4', {
+              'flex-row': iconPosition === 'left',
+              'flex-row-reverse': iconPosition === 'right',
+            })}
+          >
+            <div className='w-fit'>
+              <ConfirmationModalIcon type={type} size={iconSize} />
+            </div>
 
-        <p className='text-center font-medium'>
-          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
-        </p>
+            <div className='flex flex-col gap-1'>
+              <p className='font-medium'>
+                {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+              </p>
+
+              {subtitleText && (
+                <p className='text-sm text-gray-400'>{subtitleText}</p>
+              )}
+            </div>
+          </div>
+        )}
 
         {children && <div className='w-full'>{children}</div>}
 
@@ -103,7 +170,7 @@ const ConfirmationModal = ({
           {secondaryButton && secondaryButton.text && (
             <Button
               {...secondaryButton}
-              variant='ghost'
+              variant='outline'
               color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
               disabled={

src/components/pages/ApprovalSteps.tsx

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

src/components/pages/closing/ClosingDetail.tsx

@@ -19,12 +19,16 @@ import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverhea
 import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
 import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
 import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
-
+import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
   hppExpeditionData?: ClosingHppExpedition;
+  projectData?: ProjectFlock;
+  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
@@ -32,6 +36,8 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
   initialValue,
   salesData,
   hppExpeditionData,
+  projectData,
+  kandangData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -45,7 +51,12 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'perhitunganSapronak',
         label: 'Perhitungan Sapronak',
-        content: <ClosingSapronakCalculationTabContent projectFlockId={id} />,
+        content: (
+          <ClosingSapronakCalculationTabContent
+            closingGeneralInformation={initialValue}
+            projectFlockId={id}
+          />
+        ),
       },
       {
         id: 'penjualan',
@@ -82,7 +93,9 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       <section className='w-full max-w-7xl pb-16'>
         <header className='flex flex-col gap-4'>
           <Button
-            href='/closing'
+            href={
+              !kandangData ? '/closing' : `/closing/detail/?closingId=${id}`
+            }
             variant='link'
             className='w-fit p-0 text-primary'
           >
@@ -93,7 +106,18 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
         </header>
 
-        <ClosingGeneralInformationTable initialValue={initialValue} />
+        <ClosingGeneralInformationTable
+          initialValue={initialValue}
+          projectData={projectData}
+          kandangData={kandangData}
+        />
+
+        {!kandangData && (
+          <ClosingKandangList
+            initialValue={initialValue}
+            projectData={projectData}
+          />
+        )}
 
         <Tabs
           activeTabId={activeTab}

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)
-    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
-        // Group header row
-        {
-          group_name: hpp.group_name,
-          group_index: groupIndex,
-          isGroupHeader: true as const,
-        },
-        // Data rows
-        ...hpp.data.map((item) => ({
-          group_name: hpp.group_name,
-          group_index: groupIndex,
-          type: item.type,
-          budgeting: item.budgeting,
-          realization: item.realization,
+  const staticHppRows: Array<{
+    group_name: string;
+    type: string;
+    group_index: number;
+  }> = [
+    {
+      group_name: 'HPP dan Pengeluaran',
+      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,
+    },
+    ...staticHppRows
+      .filter((row) => row.group_index === 0)
+      .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 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
-                                .rp_per_bird || 0
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.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
-                                .rp_per_kg || 0
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.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
-                                .amount || 0
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.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
-                                .rp_per_bird || 0
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.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
-                                .rp_per_kg || 0
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.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
-                                .amount || 0
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.realization?.amount || 0
                             )
                           : '-';
                       },

src/components/pages/closing/ClosingGeneralInformationTable.tsx

@@ -1,12 +1,29 @@
 import { ClosingGeneralInformation } from '@/types/api/closing';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { useMemo } from 'react';
 
 interface ClosingGeneralInformationProps {
   initialValue?: ClosingGeneralInformation;
+  projectData?: ProjectFlock;
+  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingGeneralInformationTable = ({
   initialValue,
+  projectData,
+  kandangData,
 }: ClosingGeneralInformationProps) => {
+  const chickinPopulation = useMemo(() => {
+    if (kandangData) {
+      return kandangData?.chickins?.reduce(
+        (acc, chickin) => acc + chickin.usage_qty,
+        0
+      );
+    }
+    return 0;
+  }, [kandangData]);
+
   return (
     <div className='w-full my-4 @container'>
       <div className='flex flex-col @sm:flex-row gap-4'>
@@ -17,7 +34,9 @@ const ClosingGeneralInformationTable = ({
                 <tr>
                   <td>Lokasi</td>
                   <td>:</td>
-                  <td>{initialValue?.location_name}</td>
+                  <td>
+                    {initialValue?.location_name ?? projectData?.location?.name}
+                  </td>
                 </tr>
                 <tr>
                   <td>Periode</td>
@@ -27,12 +46,20 @@ const ClosingGeneralInformationTable = ({
                 <tr>
                   <td>Project Flock</td>
                   <td>:</td>
-                  <td>{initialValue?.project_flock?.name}</td>
+                  <td>
+                    {initialValue?.project_flock?.name ??
+                      projectData?.flock_name}
+                  </td>
                 </tr>
                 <tr>
                   <td>Populasi</td>
                   <td>:</td>
-                  <td>{initialValue?.population} Ekor</td>
+                  <td>
+                    {!kandangData
+                      ? (initialValue?.population ?? 0)
+                      : (chickinPopulation ?? 0)}{' '}
+                    Ekor
+                  </td>
                 </tr>
                 <tr>
                   <td>Jenis Project</td>
@@ -40,9 +67,13 @@ const ClosingGeneralInformationTable = ({
                   <td>{initialValue?.project_type}</td>
                 </tr>
                 <tr className='table-row @sm:hidden'>
-                  <td>Kandang Aktif</td>
+                  <td>Kandang {!kandangData && 'Aktif'}</td>
                   <td>:</td>
-                  <td>{initialValue?.active_house_count} Kandang</td>
+                  <td>
+                    {!kandangData
+                      ? `${initialValue?.active_house_count} Kandang`
+                      : kandangData?.kandang?.name}
+                  </td>
                 </tr>
                 <tr className='table-row @sm:hidden'>
                   <td>Status Pembayaran Penjualan</td>
@@ -69,9 +100,13 @@ const ClosingGeneralInformationTable = ({
             <table className='table table-zebra table-sm'>
               <tbody>
                 <tr>
-                  <td>Kandang Aktif</td>
+                  <td>Kandang {!kandangData && 'Aktif'}</td>
                   <td>:</td>
-                  <td>{initialValue?.active_house_count} Kandang</td>
+                  <td>
+                    {!kandangData
+                      ? `${initialValue?.active_house_count} Kandang`
+                      : kandangData?.kandang?.name}
+                  </td>
                 </tr>
                 <tr>
                   <td>Status Pembayaran Penjualan</td>

src/components/pages/closing/ClosingKandangList.tsx

@@ -0,0 +1,37 @@
+import Button from '@/components/Button';
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+
+const ClosingKandangList = ({
+  initialValue,
+  projectData,
+}: {
+  initialValue?: ClosingGeneralInformation;
+  projectData?: ProjectFlock;
+}) => {
+  return (
+    <div className='w-full my-4 @container'>
+      <div className='flex flex-col @sm:flex-row gap-4'>
+        <div className='w-full'>
+          <div className='overflow-x-auto'>
+            <h1 className='font-bold my-4'>Kandang</h1>
+            <div className='flex flex-wrap gap-2 mb-4'>
+              {projectData?.kandangs?.map((kandang) => (
+                <Button
+                  key={kandang.id}
+                  variant='outline'
+                  href={`/closing/detail/?closingId=${initialValue?.flock_id}&kandangId=${kandang.project_flock_kandang_id}`}
+                  className='min-w-32'
+                >
+                  {kandang.name}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingKandangList;

src/components/pages/closing/ClosingProductionDataTabContent.tsx

@@ -96,11 +96,6 @@ const ClosingProductionDataTabContent = ({
                 value={formatNumber(purchase.feed_used)}
                 unit='Kg'
               />
-              <DataRow
-                label='Pakan Terpakai per Ekor'
-                value={formatNumber(purchase.feed_used_per_head)}
-                unit='Kg'
-              />
             </div>
           </section>
 
@@ -124,14 +119,12 @@ const ClosingProductionDataTabContent = ({
                 />
                 <DataRow
                   label='Bobot Rata-Rata'
-                  value={formatNumber(sales.chicken.average_weight)}
+                  value={formatNumber(sales.chicken.avg_weight)}
                   unit='Kg/Ekor'
                 />
                 <DataRow
                   label='Harga Jual Rata-Rata'
-                  value={formatNumber(
-                    sales.chicken.chicken_average_selling_price
-                  )}
+                  value={formatNumber(sales.chicken.avg_selling_price)}
                   unit='Rupiah'
                 />
               </div>
@@ -148,17 +141,17 @@ const ClosingProductionDataTabContent = ({
                     />
                     <DataRow
                       label='Telur (Kg)'
-                      value={formatNumber(sales.egg.egg_mass_kg)}
+                      value={formatNumber(sales.egg.egg_mass)}
                       unit='Kg'
                     />
                     <DataRow
                       label='Berat Telur Rata-Rata'
-                      value={formatNumber(sales.egg.average_egg_weight_kg)}
+                      value={formatNumber(sales.egg.avg_egg_weight)}
                       unit='Kg'
                     />
                     <DataRow
                       label='Harga Jual Telur Rata-Rata'
-                      value={formatNumber(sales.egg.egg_average_selling_price)}
+                      value={formatNumber(sales.egg.avg_selling_price)}
                       unit='Rupiah'
                     />
                   </div>
@@ -191,17 +184,37 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='Mortalitas Std'
-                value={formatNumber(performance.mortality_std)}
+                value={formatNumber(performance.mor_std)}
                 unitClassName='hidden'
               />
               <DataRow
                 label='Mortalitas Act'
-                value={formatNumber(performance.mortality_act)}
+                value={formatNumber(performance.mor_act)}
                 unitClassName='hidden'
               />
               <DataRow
                 label='DEFF Mortalitas'
-                value={formatNumber(performance.deff_mortality)}
+                value={formatNumber(performance.mor_diff)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='AWG Std'
+                value={formatNumber(performance.awg_std)}
+                unit='Gr/Hari'
+              />
+              <DataRow
+                label='AWG Act'
+                value={formatNumber(performance.awg_act)}
+                unit='Gr/Hari'
+              />
+              <DataRow
+                label='Feed Intake Std'
+                value={formatNumber(performance.feed_intake_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Feed Intake Act'
+                value={formatNumber(performance.feed_intake)}
                 unitClassName='hidden'
               />
               <DataRow
@@ -216,14 +229,70 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='DEFF FCR'
-                value={formatNumber(performance.deff_fcr)}
+                value={formatNumber(performance.fcr_diff)}
                 unitClassName='hidden'
               />
-              <DataRow
-                label='AWG'
-                value={formatNumber(performance.awg)}
-                unit='Gr/Hari'
-              />
+
+              {/* Laying Specific Fields */}
+              {performance.hen_day_act !== undefined && (
+                <>
+                  <DataRow
+                    label='Hen Day Std'
+                    value={formatNumber(performance.hen_day_std!)}
+                    unit='%'
+                  />
+                  <DataRow
+                    label='Hen Day Act'
+                    value={formatNumber(performance.hen_day_act)}
+                    unit='%'
+                  />
+                </>
+              )}
+
+              {performance.egg_mass !== undefined && (
+                <>
+                  <DataRow
+                    label='Egg Mass Std'
+                    value={formatNumber(performance.egg_mass_std!)}
+                    unit='Kg'
+                  />
+                  <DataRow
+                    label='Egg Mass Act'
+                    value={formatNumber(performance.egg_mass)}
+                    unit='Kg'
+                  />
+                </>
+              )}
+
+              {performance.egg_weight !== undefined && (
+                <>
+                  <DataRow
+                    label='Egg Weight Std'
+                    value={formatNumber(performance.egg_weight_std!)}
+                    unit='Gr'
+                  />
+                  <DataRow
+                    label='Egg Weight Act'
+                    value={formatNumber(performance.egg_weight)}
+                    unit='Gr'
+                  />
+                </>
+              )}
+
+              {performance.hen_housed_act !== undefined && (
+                <>
+                  <DataRow
+                    label='Hen Housed Std'
+                    value={formatNumber(performance.hen_housed_std!)}
+                    unit='%'
+                  />
+                  <DataRow
+                    label='Hen Housed Act'
+                    value={formatNumber(performance.hen_housed_act)}
+                    unit='%'
+                  />
+                </>
+              )}
             </div>
           </section>
         </div>

src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx

@@ -1,21 +1,25 @@
 'use client';
 
-import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
-import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
 import ClosingSapronakCalculationTable from '@/components/pages/closing/ClosingSapronakCalculationTable';
+import { ClosingGeneralInformation } from '@/types/api/closing';
 
 interface ClosingSapronakCalculationTabContentProps {
   projectFlockId?: number;
+  closingGeneralInformation?: ClosingGeneralInformation;
 }
 
 const ClosingSapronakCalculationTabContent = ({
   projectFlockId,
+  closingGeneralInformation,
 }: ClosingSapronakCalculationTabContentProps) => {
   return (
     <div className='flex flex-col gap-4'>
       {projectFlockId && (
         <>
-          <ClosingSapronakCalculationTable projectFlockId={projectFlockId} />
+          <ClosingSapronakCalculationTable
+            closingGeneralInformation={closingGeneralInformation}
+            projectFlockId={projectFlockId}
+          />
         </>
       )}
     </div>

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

@@ -3,7 +3,7 @@
 import Card from '@/components/Card';
 
 import Table from '@/components/Table';
-import { formatCurrency, formatNumber } from '@/lib/helper';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import {
   RowSapronakCalculation,
   TotalSapronakCalculation,
@@ -13,19 +13,24 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import { useSearchParams } from 'next/navigation';
 
 interface ClosingSapronakCalculationTableProps {
-  type?: 'detail';
   projectFlockId: number;
+  closingGeneralInformation?: ClosingGeneralInformation;
 }
 
 const ClosingSapronakCalculationTable = ({
-  type,
   projectFlockId,
+  closingGeneralInformation,
 }: ClosingSapronakCalculationTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const { data: sapronakCalculation, isLoading } = useSWR(
-    `/closing/sapronak-calculation/${projectFlockId}`,
-    () => ClosingApi.getPerhitunganSapronak(projectFlockId),
+    `/closing/sapronak-calculation/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
+    () => ClosingApi.getPerhitunganSapronak(projectFlockId, Number(kandangId)),
     {
       keepPreviousData: true,
     }
@@ -37,101 +42,121 @@ const ClosingSapronakCalculationTable = ({
   ): ColumnDef<RowSapronakCalculation>[] => [
     {
       header: 'Tanggal',
-      accessorKey: 'tanggal',
-      cell: (props) => (props.getValue() as string) || '-',
+      accessorKey: 'date',
+      cell: (props) =>
+        props.row.original.date
+          ? formatDate(props.row.original.date, 'DD MMM YYYY')
+          : '-',
       footer: 'Total',
     },
     {
       header: 'No. Referensi',
-      accessorKey: 'no_referensi',
-      cell: (props) => (props.getValue() as string) || '-',
+      accessorKey: 'reference_number',
+      cell: (props) => (props.row.original.reference_number as string) || '-',
       footer: '',
     },
     {
       header: 'QTY Masuk',
-      accessorKey: 'qty_masuk',
-      cell: (props) => formatNumber(props.getValue() as number),
+      accessorKey: 'qty_in',
+      cell: (props) =>
+        props.row.original.qty_in
+          ? formatNumber(props.row.original.qty_in as number)
+          : '0',
       footer: total
         ? () => (
             <div className='font-semibold text-gray-900'>
-              {formatNumber(total?.qty_masuk)}
+              {total?.qty_in ? formatNumber(total?.qty_in) : '0'}
             </div>
           )
         : '',
     },
     {
       header: 'QTY Keluar',
-      accessorKey: 'qty_keluar',
-      cell: (props) => formatNumber(props.getValue() as number),
+      accessorKey: 'qty_out',
+      cell: (props) =>
+        props.row.original.qty_out
+          ? formatNumber(props.row.original.qty_out as number)
+          : '0',
       footer: total
         ? () => (
             <div className='font-semibold text-gray-900'>
-              {formatNumber(total?.qty_keluar)}
+              {total?.qty_out ? formatNumber(total?.qty_out) : '0'}
             </div>
           )
         : '',
     },
     {
       header: 'QTY Pakai',
-      accessorKey: 'qty_pakai',
-      cell: (props) => formatNumber(props.getValue() as number),
+      accessorKey: 'qty_used',
+      cell: (props) =>
+        props.row.original.qty_used
+          ? formatNumber(props.row.original.qty_used as number)
+          : '0',
       footer: total
         ? () => (
             <div className='font-semibold text-gray-900'>
-              {formatNumber(total?.qty_pakai)}
+              {total?.qty_used ? formatNumber(total?.qty_used) : '0'}
             </div>
           )
         : '',
     },
     {
       header: 'Uraian',
-      accessorKey: 'uraian',
-      cell: (props) => (props.getValue() as string) || '-',
+      accessorKey: 'description',
+      cell: (props) => (props.row.original.description as string) || '-',
       footer: '',
     },
     {
       header: 'Kategori Produk',
-      accessorKey: 'kategori_produk',
-      cell: (props) => (props.getValue() as string) || '-',
+      accessorKey: 'product_category',
+      cell: (props) => (props.row.original.product_category as string) || '-',
       footer: '',
     },
     {
       header: 'Harga Beli/Qty (Rp)',
-      accessorKey: 'harga_beli_per_qty',
-      cell: (props) => formatCurrency(props.getValue() as number),
+      accessorKey: 'unit_price',
+      cell: (props) =>
+        props.row.original.unit_price
+          ? formatCurrency(props.row.original.unit_price as number)
+          : '-',
       footer: total
         ? () => (
             <div className='font-semibold text-gray-900'>
-              {formatCurrency(total?.harga_beli_per_qty)}
+              {total?.avg_unit_price
+                ? formatCurrency(total?.avg_unit_price)
+                : '-'}
             </div>
           )
         : '',
     },
     {
       header: 'Total Harga (Rp)',
-      accessorKey: 'total_harga',
-      cell: (props) => formatCurrency(props.getValue() as number),
+      accessorKey: 'total_amount',
+      cell: (props) =>
+        props.row.original.total_amount
+          ? formatCurrency(props.row.original.total_amount as number)
+          : '-',
       footer: total
         ? () => (
             <div className='font-semibold text-gray-900'>
-              {formatCurrency(total?.total_harga)}
+              {total?.total_amount ? formatCurrency(total?.total_amount) : '-'}
             </div>
           )
         : '',
     },
     {
       header: 'Keterangan',
-      accessorKey: 'keterangan',
-      cell: (props) => (props.getValue() as string) || '-',
+      accessorKey: 'notes',
+      cell: (props) => (props.row.original.notes as string) || '-',
       footer: '',
     },
   ];
 
   // Memoize columns untuk setiap kategori
-  const docBroilerColumns = useMemo(
+  const docColumns = useMemo(
     () =>
       isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.doc_broiler?.total)
+        ? createColumns(sapronakCalculation.data?.doc?.total)
         : createColumns(),
     [sapronakCalculation]
   );
@@ -154,8 +179,13 @@ const ClosingSapronakCalculationTable = ({
 
   return (
     <div className='flex flex-col gap-4'>
+      {/* Table DOC jika kategori Project Flock Growing */}
       <Card
-        title='DOC Broiler'
+        title={
+          closingGeneralInformation?.project_type == 'GROWING'
+            ? 'DOC'
+            : 'Pullet'
+        }
         collapsible
         defaultCollapsed={false}
         className={{
@@ -166,14 +196,17 @@ const ClosingSapronakCalculationTable = ({
         <Table<RowSapronakCalculation>
           data={
             isResponseSuccess(sapronakCalculation)
-              ? (sapronakCalculation.data?.doc_broiler?.rows ?? [])
+              ? (sapronakCalculation.data?.doc?.rows ?? [])
               : []
           }
-          columns={docBroilerColumns}
+          columns={docColumns}
           className={{
             containerClassName: 'my-4',
           }}
-          renderFooter={isResponseSuccess(sapronakCalculation)}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.doc?.rows.length > 0
+          }
         />
       </Card>
 
@@ -196,7 +229,10 @@ const ClosingSapronakCalculationTable = ({
           className={{
             containerClassName: 'my-4',
           }}
-          renderFooter={isResponseSuccess(sapronakCalculation)}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.ovk?.rows.length > 0
+          }
         />
       </Card>
 
@@ -219,7 +255,10 @@ const ClosingSapronakCalculationTable = ({
           className={{
             containerClassName: 'my-4',
           }}
-          renderFooter={isResponseSuccess(sapronakCalculation)}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.pakan?.rows.length > 0
+          }
         />
       </Card>
     </div>

src/components/pages/closing/sale/SalesReportTable.tsx

@@ -215,31 +215,31 @@ const SalesReportTable = ({
           return kandang?.name || '-';
         },
       },
-      {
-        id: 'payment_status',
-        accessorKey: 'payment_status',
-        header: 'Status Pembayaran',
-        cell: (props) => {
-          const status = props.getValue() as string;
-          const getStatusColor = (status: string) => {
-            if (!status) return 'neutral';
-            switch (status.toLowerCase()) {
-              case 'paid':
-                return 'success';
-              case 'tempo':
-                return 'warning';
-              default:
-                return 'neutral';
-            }
-          };
+      // {
+      //   id: 'payment_status',
+      //   accessorKey: 'payment_status',
+      //   header: 'Status Pembayaran',
+      //   cell: (props) => {
+      //     const status = props.getValue() as string;
+      //     const getStatusColor = (status: string) => {
+      //       if (!status) return 'neutral';
+      //       switch (status.toLowerCase()) {
+      //         case 'paid':
+      //           return 'success';
+      //         case 'tempo':
+      //           return 'warning';
+      //         default:
+      //           return 'neutral';
+      //       }
+      //     };
 
-          return (
-            <Badge variant='soft' size='sm' color={getStatusColor(status)}>
-              {status || '-'}
-            </Badge>
-          );
-        },
-      },
+      //     return (
+      //       <Badge variant='soft' size='sm' color={getStatusColor(status)}>
+      //         {status || '-'}
+      //       </Badge>
+      //     );
+      //   },
+      // },
     ],
     []
   );

src/components/pages/dashboard/DashboardProduction.tsx

@@ -1,63 +1,90 @@
 'use client';
 
 import Button from '@/components/Button';
-import Card from '@/components/Card';
 import { Icon } from '@iconify/react';
-import ProductionLineChart from '@/components/pages/dashboard/chart/ProductionLineChart';
-import StandardLineChart from '@/components/pages/dashboard/chart/StandardLineChart';
-import EggWeightBarChart from '@/components/pages/dashboard/chart/EggWeightBarChart';
-import FCRBarChart from '@/components/pages/dashboard/chart/FCRBarChart';
-import ProductionStat from '@/components/pages/dashboard/chart/ProductionStat';
 import Modal, { useModal } from '@/components/Modal';
 import DateInput from '@/components/input/DateInput';
 import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { RadioGroup } from '@/components/input/RadioInput';
 import { useState } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
-import dashboardProductionFilterSchema from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
 import { ProjectFlockApi } from '@/services/api/production';
-import { ProductionStandardApi } from '@/services/api/master-data';
+import { KandangApi, LocationApi } from '@/services/api/master-data';
+
+import {
+  DashboardFilterType,
+  getDashboardFilterSchema,
+} from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
+import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
+import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
+import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
+import {
+  DashboardFilter,
+  DashboardMeta,
+} from '@/types/api/dashboard/dashboard';
+import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
+import { isResponseSuccess } from '@/lib/api-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+
+// Helper function to normalize values to array
+const normalizeToArray = (
+  value: OptionType | OptionType[] | null | undefined
+): number[] => {
+  if (!value) return [];
+  if (Array.isArray(value)) {
+    return value.map((v) => Number(v.value));
+  }
+  return [Number(value.value)];
+};
 
 const DashboardProduction = () => {
   const filterModal = useModal();
-  const [selectedPeriod, setSelectedPeriod] = useState('daily');
-  const [selectedStandards, setSelectedStandards] = useState<string[]>([
-    'hen_day',
-    'hen_house',
-  ]);
-  const [endpointUrl, setEndpointUrl] = useState('/dashboard');
+  const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
+    'OVERVIEW'
+  );
+  const [endpointUrl, setEndpointUrl] = useState('/dashboards');
+  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
 
   // ===== FETCH DATA =====
   const {
     data: dashboardProductionResponse,
     isLoading: isLoadingDashboardProductionData,
-    error: dashboardProductionError,
+    mutate: refreshDashboardProductionData,
   } = useSWR(endpointUrl, () =>
     DashboardApi.getDashboardProductionFetcher(endpointUrl)
   );
 
-  const dashboardProductionData =
-    dashboardProductionResponse?.status === 'success'
-      ? dashboardProductionResponse.data
-      : undefined;
+  const dashboardProductionData = isResponseSuccess(dashboardProductionResponse)
+    ? dashboardProductionResponse.data
+    : undefined;
 
   // ===== SELECT =====
   const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
     useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
       limit: 'limit',
-      category: 'LAYING',
+      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
     });
   const {
-    options: standardProductionOptions,
-    isLoadingOptions: isLoadingStandardProductionOptions,
-  } = useSelect(ProductionStandardApi.basePath, 'id', 'name', '', {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
     limit: 'limit',
   });
+  const { options: kandangOptions, isLoadingOptions: isLoadingKandangOptions } =
+    useSelect(KandangApi.basePath, 'id', 'name', '', {
+      limit: 'limit',
+      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+    });
+  const comparisonTypeOptions = [
+    { value: 'FARM', label: 'Farm' },
+    { value: 'FLOCK', label: 'Flock' },
+    { value: 'KANDANG', label: 'Kandang' },
+  ];
 
   // ===== FORMIK =====
   const formik = useFormik({
@@ -65,57 +92,63 @@ const DashboardProduction = () => {
       startDate: '',
       endDate: '',
       flock: [] as OptionType[],
-      standard_production_id: [] as OptionType[],
-      standard_productions: [] as OptionType[],
-      period: selectedPeriod,
-    },
-    validationSchema: dashboardProductionFilterSchema,
+      location: [] as OptionType[],
+      kandang: [] as OptionType[],
+      analysisMode: analysisMode,
+      comparisonType: '',
+      lokasiIds: [],
+      flockIds: [],
+      kandangIds: [],
+    } as DashboardFilterType,
+    validationSchema: getDashboardFilterSchema(analysisMode),
     onSubmit: (values) => {
       console.log(values);
-      // Build URL with query parameters
-      const params = new URLSearchParams();
 
-      if (values.startDate) params.set('startDate', values.startDate);
-      if (values.endDate) params.set('endDate', values.endDate);
-
-      if (values.flock && values.flock.length > 0) {
-        const flockIds = values.flock
-          .map((f: OptionType) => f.value || f)
-          .join(',');
-        params.set('flock', flockIds);
-      }
-
-      if (
-        values.standard_production_id &&
-        values.standard_production_id.length > 0
-      ) {
-        const standardIds = values.standard_production_id
-          .map((s: OptionType) => s.value || s)
-          .join(',');
-        params.set('standard_production_id', standardIds);
-      }
-
-      if (selectedStandards.length > 0) {
-        params.set('standards', selectedStandards.join(','));
-      }
-
-      params.set('period', selectedPeriod);
-
-      const newUrl = `/dashboard?${params.toString()}`;
-      setEndpointUrl(newUrl);
-
-      // Close modal after applying filter
-      filterModal.closeModal();
+      handleApplyFilter({
+        start_date: values.startDate || '',
+        end_date: values.endDate || '',
+        analysis_mode: values.analysisMode as 'OVERVIEW' | 'COMPARISON',
+        location_ids: normalizeToArray(values.location),
+        flock_ids: normalizeToArray(values.flock),
+        kandang_ids: normalizeToArray(values.kandang),
+        comparison_type: values.comparisonType,
+      });
     },
   });
 
   const handleResetFilter = () => {
     formik.resetForm();
-    setSelectedPeriod('daily');
-    setSelectedStandards(['hen_day', 'hen_house']);
-    setEndpointUrl('/dashboard');
+    setAnalysisMode('OVERVIEW');
+    setEndpointUrl('/dashboards');
   };
 
+  const handleApplyFilter = (values: DashboardFilter) => {
+    console.log(values);
+
+    // Build query params object, only include non-empty values
+    const params: Record<string, string> = {};
+
+    if (values.start_date) params.start_date = values.start_date;
+    if (values.end_date) params.end_date = values.end_date;
+    if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
+    if (values.location_ids.length > 0)
+      params.location_ids = values.location_ids.toString();
+    if (values.flock_ids.length > 0)
+      params.flock_ids = values.flock_ids.toString();
+    if (values.kandang_ids.length > 0)
+      params.kandang_ids = values.kandang_ids.toString();
+    if (values.comparison_type) params.comparison_type = values.comparison_type;
+
+    setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
+    console.log(endpointUrl);
+    filterModal.closeModal();
+    refreshDashboardProductionData();
+    formik.resetForm();
+  };
+
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -127,15 +160,57 @@ const DashboardProduction = () => {
     <>
       <section className='w-full p-4 space-y-6'>
         <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
-          <h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
+          <div></div>
           <div className='flex flex-row justify-end gap-2'>
             <Button
               variant='outline'
-              className='min-w-28 rounded-lg'
+              className={`min-w-28 rounded-lg ${
+                isResponseSuccess(dashboardProductionResponse) &&
+                (dashboardProductionResponse.meta as unknown as DashboardMeta)
+                  .filters
+                  ? 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
+                  : ''
+              }`}
               onClick={() => filterModal.openModal()}
             >
-              <Icon icon='heroicons:funnel' width={20} height={20} />
+              <Icon
+                icon='heroicons:funnel'
+                width={20}
+                height={20}
+                className={
+                  isResponseSuccess(dashboardProductionResponse) &&
+                  (dashboardProductionResponse.meta as unknown as DashboardMeta)
+                    .filters
+                    ? 'text-blue-600'
+                    : ''
+                }
+              />
               Filter
+              {isResponseSuccess(dashboardProductionResponse) &&
+                dashboardProductionResponse.meta &&
+                (dashboardProductionResponse.meta as unknown as DashboardMeta)
+                  .filters && (
+                  <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
+                    {(() => {
+                      const meta =
+                        dashboardProductionResponse.meta as unknown as DashboardMeta;
+                      if (!meta.filters) return 0;
+                      const count =
+                        (meta.filters.location_ids.length > 1
+                          ? meta.filters.location_ids.length
+                          : 0) +
+                        (meta.filters.flock_ids.length > 1
+                          ? meta.filters.flock_ids.length
+                          : 0) +
+                        (meta.filters.kandang_ids.length > 1
+                          ? meta.filters.kandang_ids.length
+                          : 0);
+                      return meta.filters.analysis_mode === 'OVERVIEW'
+                        ? 1
+                        : count;
+                    })()}
+                  </span>
+                )}
             </Button>
             <Button
               variant='outline'
@@ -149,55 +224,38 @@ const DashboardProduction = () => {
           </div>
         </div>
 
-        {/* Dashboard Statistics */}
-        <ProductionStat data={dashboardProductionData?.statistics_data} />
+        {/* Dashboard Stats */}
+        <DashboardStats data={dashboardProductionData?.statistics_data ?? []} />
 
-        {/* Charts Grid */}
-        <div className='grid grid-cols-1 gap-4'>
-          {/* Production Line Chart */}
-          <Card
-            variant='bordered'
-            className={{ wrapper: 'w-full', body: 'p-6' }}
-          >
-            <ProductionLineChart
-              period={
-                selectedPeriod as 'daily' | 'weekly' | 'monthly' | 'yearly'
-              }
-              data={dashboardProductionData?.production_charts}
-            />
-          </Card>
-
-          {/* Standard Line Chart */}
-          <Card
-            variant='bordered'
-            className={{ wrapper: 'w-full', body: 'p-6' }}
-          >
-            <StandardLineChart
-              selectedStandards={selectedStandards}
-              data={dashboardProductionData?.standard_productions}
-            />
-          </Card>
-
-          {/* Bar Charts Grid - 2 columns */}
-          <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
-            {/* FCR Bar Chart */}
-            <Card
-              variant='bordered'
-              className={{ wrapper: 'w-full', body: 'p-6' }}
-            >
-              <FCRBarChart data={dashboardProductionData?.fcr_data} />
-            </Card>
-
-            {/* Egg Weight Bar Chart */}
-            <Card
-              variant='bordered'
-              className={{ wrapper: 'w-full', body: 'p-6' }}
-            >
-              <EggWeightBarChart data={dashboardProductionData?.egg_weights} />
-            </Card>
-          </div>
-        </div>
+        {/* Use DashboardLineChart component or skeleton */}
+        {isLoadingDashboardProductionData ? (
+          <DashboardLineChartSkeleton />
+        ) : dashboardProductionData &&
+          dashboardProductionData.charts &&
+          Object.keys(dashboardProductionData.charts).length > 0 ? (
+          <DashboardLineChart
+            analysisMode={
+              isResponseSuccess(dashboardProductionResponse)
+                ? dashboardProductionResponse.meta
+                  ? (
+                      dashboardProductionResponse.meta as unknown as DashboardMeta
+                    ).filters?.analysis_mode
+                  : analysisMode
+                : analysisMode
+            }
+            data={dashboardProductionData}
+          />
+        ) : (
+          <DashboardLineChartSkeleton
+            meta={
+              isResponseSuccess(dashboardProductionResponse)
+                ? (dashboardProductionResponse.meta as unknown as DashboardMeta)
+                : undefined
+            }
+          />
+        )}
       </section>
+
       <Modal
         ref={filterModal.ref}
         className={{
@@ -221,13 +279,14 @@ const DashboardProduction = () => {
             </Button>
           </div>
 
-          <form className='space-y-4' onSubmit={formik.handleSubmit}>
+          <form
+            className='space-y-4'
+            onSubmit={handleFormSubmit}
+            onReset={handleResetFilter}
+          >
             {/* Rentang Waktu */}
             <div className='px-4'>
-              <label className='flex items-center gap-2 mb-3'>
-                <Icon icon='heroicons:calendar' width={20} height={20} />
-                Rentang Waktu
-              </label>
+              <label className='flex items-center gap-2 mb-3'>Tanggal</label>
               <div className='flex items-center gap-2'>
                 <DateInput
                   name='startDate'
@@ -261,119 +320,152 @@ const DashboardProduction = () => {
               </div>
             </div>
 
-            {/* Flock */}
+            {/* Analysis Mode */}
             <div className='px-4'>
-              <SelectInput
-                label='Flock'
-                value={formik.values.flock}
-                onChange={(selected) => formik.setFieldValue('flock', selected)}
-                errorMessage={formik.errors.flock as string}
-                options={flockOptions}
-                isLoading={isLoadingFlockOptions}
-                isMulti
-                isError={
-                  Boolean(formik.errors.flock) && Boolean(formik.touched.flock)
-                }
-              />
-            </div>
-
-            {/* Production */}
-            <div className='px-4'>
-              <SelectInput
-                label='Standard Produksi'
-                value={formik.values.standard_production_id}
-                onChange={(selected) =>
-                  formik.setFieldValue('standard_production_id', selected)
-                }
-                errorMessage={formik.errors.standard_production_id as string}
-                options={standardProductionOptions}
-                isLoading={isLoadingStandardProductionOptions}
-                isMulti
-                isError={
-                  Boolean(formik.errors.standard_production_id) &&
-                  Boolean(formik.touched.standard_production_id)
-                }
-              />
-            </div>
-
-            {/* Standard */}
-            <div className='px-4'>
-              <SelectInput
-                label='Standard'
-                value={selectedStandards.map((s) => ({
-                  value: s,
-                  label:
-                    s === 'hen_day'
-                      ? 'Hen Day'
-                      : s === 'hen_house'
-                        ? 'Hen House'
-                        : s === 'uniformity'
-                          ? 'Uniformity'
-                          : s === 'egg_weight'
-                            ? 'Egg Weight'
-                            : 'Egg Mass',
-                }))}
-                options={[
-                  { value: 'hen_day', label: 'Hen Day' },
-                  { value: 'hen_house', label: 'Hen House' },
-                  { value: 'uniformity', label: 'Uniformity' },
-                  { value: 'egg_weight', label: 'Egg Weight' },
-                  { value: 'egg_mass', label: 'Egg Mass' },
-                ]}
-                isMulti
-                onChange={(selected: OptionType | OptionType[] | null) => {
-                  const values = Array.isArray(selected)
-                    ? selected.map((item) => String(item.value))
-                    : [];
-                  setSelectedStandards(
-                    values.length > 0 ? values : ['hen_day']
-                  );
+              <label className='block mb-3'>Analysis Mode</label>
+              <RadioGroup
+                name='analysisMode'
+                value={formik.values.analysisMode}
+                onChange={(e) => {
+                  formik.handleChange(e);
+                  setAnalysisMode(e.target.value as 'OVERVIEW' | 'COMPARISON');
+                  // Reset all dependent fields when analysis mode changes
+                  formik.setFieldValue('location', []);
+                  formik.setFieldValue('flock', []);
+                  formik.setFieldValue('kandang', []);
+                  formik.setFieldValue('comparisonType', '');
+                  setSelectedLocationIds([]);
                 }}
+                color='primary'
+                className={{
+                  wrapper: 'w-full my-6 font-semibold text-neutral-500',
+                }}
+              >
+                <RadioGroupItem
+                  color='primary'
+                  value='OVERVIEW'
+                  label='Performance Overview'
+                />
+                <RadioGroupItem
+                  color='primary'
+                  value='COMPARISON'
+                  label='Performance Comparison'
+                />
+              </RadioGroup>
+            </div>
+
+            {formik.values.analysisMode === 'COMPARISON' && (
+              <div className='px-4'>
+                <SelectInput
+                  label='Compared By'
+                  value={comparisonTypeOptions.find(
+                    (option) => option.value === formik.values.comparisonType
+                  )}
+                  onChange={(selected) =>
+                    formik.setFieldValue(
+                      'comparisonType',
+                      selected ? (selected as OptionType).value : ''
+                    )
+                  }
+                  errorMessage={formik.errors.comparisonType as string}
+                  options={comparisonTypeOptions}
+                  isLoading={isLoadingLocationOptions}
+                  isError={
+                    Boolean(formik.errors.comparisonType) &&
+                    Boolean(formik.touched.comparisonType)
+                  }
+                />
+              </div>
+            )}
+
+            {/* Location */}
+            <div className='px-4'>
+              <SelectInput
+                label='Farm'
+                value={formik.values.location}
+                onChange={(selected) => {
+                  formik.setFieldValue('location', selected);
+                  // Update selectedLocationIds for kandang filter
+                  setSelectedLocationIds(normalizeToArray(selected));
+                  // Reset dependent fields when location changes
+                  formik.setFieldValue('flock', []);
+                  formik.setFieldValue('kandang', []);
+                }}
+                errorMessage={formik.errors.location as string}
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                isMulti={
+                  comparisonTypeOptions.find(
+                    (option) => option.value === formik.values.comparisonType
+                  )?.value === 'FARM'
+                }
                 isError={
-                  Boolean(formik.errors.standard_productions) &&
-                  Boolean(formik.touched.standard_productions)
+                  Boolean(formik.errors.location) &&
+                  Boolean(formik.touched.location)
                 }
               />
             </div>
 
-            {/* Periode Perbandingan */}
-            <div className='px-4'>
-              <label className='block mb-3'>Periode Perbandingan</label>
-              <div className='grid grid-cols-4 gap-2'>
-                <Button
-                  variant={selectedPeriod === 'daily' ? 'active' : 'soft'}
-                  type='button'
-                  className='rounded-lg'
-                  onClick={() => setSelectedPeriod('daily')}
-                >
-                  Harian
-                </Button>
-                <Button
-                  variant={selectedPeriod === 'weekly' ? 'active' : 'soft'}
-                  type='button'
-                  className='rounded-lg'
-                  onClick={() => setSelectedPeriod('weekly')}
-                >
-                  Mingguan
-                </Button>
-                <Button
-                  variant={selectedPeriod === 'monthly' ? 'active' : 'soft'}
-                  type='button'
-                  className='rounded-lg'
-                  onClick={() => setSelectedPeriod('monthly')}
-                >
-                  Bulanan
-                </Button>
-                <Button
-                  variant={selectedPeriod === 'yearly' ? 'active' : 'soft'}
-                  type='button'
-                  className='rounded-lg'
-                  onClick={() => setSelectedPeriod('yearly')}
-                >
-                  Tahunan
-                </Button>
+            {/* Flock */}
+            {!(
+              formik.values.analysisMode === 'COMPARISON' &&
+              !(
+                formik.values.comparisonType === 'FLOCK' ||
+                formik.values.comparisonType === 'KANDANG'
+              )
+            ) && (
+              <div className='px-4'>
+                <SelectInput
+                  label='Flock'
+                  value={formik.values.flock}
+                  onChange={(selected) =>
+                    formik.setFieldValue('flock', selected)
+                  }
+                  errorMessage={formik.errors.flock as string}
+                  options={flockOptions}
+                  isLoading={isLoadingFlockOptions}
+                  isMulti={
+                    comparisonTypeOptions.find(
+                      (option) => option.value === formik.values.comparisonType
+                    )?.value === 'FLOCK'
+                  }
+                  isError={
+                    Boolean(formik.errors.flock) &&
+                    Boolean(formik.touched.flock)
+                  }
+                />
               </div>
-            </div>
+            )}
+
+            {/* Kandang */}
+            {!(
+              formik.values.analysisMode === 'COMPARISON' &&
+              !(formik.values.comparisonType === 'KANDANG')
+            ) && (
+              <div className='px-4'>
+                <SelectInput
+                  label='Kandang'
+                  value={formik.values.kandang}
+                  onChange={(selected) =>
+                    formik.setFieldValue('kandang', selected)
+                  }
+                  errorMessage={formik.errors.kandang as string}
+                  options={kandangOptions}
+                  isLoading={isLoadingKandangOptions}
+                  isMulti={
+                    comparisonTypeOptions.find(
+                      (option) => option.value === formik.values.comparisonType
+                    )?.value === 'KANDANG'
+                  }
+                  isError={
+                    Boolean(formik.errors.kandang) &&
+                    Boolean(formik.touched.kandang)
+                  }
+                />
+              </div>
+            )}
+
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>

src/components/pages/dashboard/chart/DashboardLineChart.tsx

@@ -0,0 +1,545 @@
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Dropdown from '@/components/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import {
+  Dashboard,
+  DashboardOverviewCharts,
+  DashboardComparisonCharts,
+  DashboardChartsSeries,
+  DashboardChartsDataset,
+} from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+import { useState, useEffect } from 'react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+type DashboardLineChartProps = {
+  analysisMode: 'OVERVIEW' | 'COMPARISON';
+  data: Dashboard;
+};
+
+// Type guard to check if charts is DashboardOverviewCharts
+function isOverviewCharts(
+  charts: DashboardOverviewCharts | DashboardComparisonCharts
+): charts is DashboardOverviewCharts {
+  return 'deplesi' in charts;
+}
+
+// Type guard to check if charts is DashboardComparisonCharts
+function isComparisonCharts(
+  charts: DashboardOverviewCharts | DashboardComparisonCharts
+): charts is DashboardComparisonCharts {
+  return 'location' in charts || 'flock' in charts || 'kandang' in charts;
+}
+
+const lineColors: Record<string, string> = {
+  body_weight: '#10B981',
+  std_body_weight: '#10B981',
+  act_laying: '#1062B9',
+  std_laying: '#1062B9',
+  act_egg_weight: '#10B981',
+  std_egg_weight: '#10B981',
+  act_feed_intake: '#F52419',
+  std_feed_intake: '#F52419',
+  act_uniformity: '#F59E0B',
+  std_uniformity: '#F59E0B',
+  act_fcr: '#10B981',
+  std_fcr: '#10B981',
+  act_fcr_cum: '#F52419',
+  std_fcr_cum: '#10B981',
+  normal: '#10B981',
+  abnormal: '#F52419',
+  act_deplesi: '#10B981',
+  std_deplesi: '#10B981',
+};
+
+const defaultLineColors: string[] = [
+  '#10B981',
+  '#1062B9',
+  '#F52419',
+  '#F59E0B',
+  '#7F56D9',
+];
+
+// Helper function to get line color
+const getLineColor = (
+  seriesId: string | number,
+  index: number,
+  mode: 'OVERVIEW' | 'COMPARISON'
+): string => {
+  // For COMPARISON mode, use default colors with cycling
+  if (mode === 'COMPARISON') {
+    return defaultLineColors[index % defaultLineColors.length];
+  }
+
+  // For OVERVIEW mode, use predefined colors or fallback to default
+  const predefinedColor = lineColors[seriesId];
+  if (predefinedColor) {
+    return predefinedColor;
+  }
+
+  // Fallback to default colors with cycling
+  return defaultLineColors[index % defaultLineColors.length];
+};
+
+const DashboardLineChart = ({
+  analysisMode,
+  data,
+}: DashboardLineChartProps) => {
+  const [chartData, setChartData] =
+    useState<keyof DashboardOverviewCharts>('body_weight');
+  const [open, setOpen] = useState(false);
+  // Track which series are visible (by series id)
+  const [visibleSeries, setVisibleSeries] = useState<Set<string | number>>(
+    new Set()
+  );
+
+  // Mapping for chart type labels
+  const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
+    body_weight: 'Body Weight',
+    performance: 'Performance',
+    fcr: 'FCR',
+    quality_control: 'Quality Control',
+    deplesi: 'Deplesi',
+  };
+
+  // Initialize all series as visible when chartData changes
+  useEffect(() => {
+    let seriesData: DashboardChartsSeries[] = [];
+
+    if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+      seriesData = data.charts[chartData]?.series || [];
+    } else if (
+      analysisMode === 'COMPARISON' &&
+      isComparisonCharts(data.charts)
+    ) {
+      const comparisonChart =
+        data.charts.location || data.charts.flock || data.charts.kandang;
+      seriesData = comparisonChart?.series || [];
+    }
+
+    // Set all series as visible by default
+    const allSeriesIds = new Set(seriesData.map((s) => s.id));
+    setVisibleSeries(allSeriesIds);
+  }, [chartData, analysisMode, data.charts]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full rounded-lg',
+      }}
+      variant='bordered'
+    >
+      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
+        <div className='text-lg font-semibold'>
+          Performance{' '}
+          <Icon
+            icon='heroicons:information-circle'
+            width={20}
+            height={20}
+            className='inline text-neutral-500'
+          />
+        </div>
+        {analysisMode == 'OVERVIEW' && (
+          <Dropdown
+            align='end'
+            direction='bottom'
+            trigger={
+              <Button
+                variant='outline'
+                color='none'
+                className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
+                onClick={() => setOpen(!open)}
+              >
+                {chartTypeLabels[chartData]}{' '}
+                <div className='divider divider-horizontal p-0 m-0 before:bg-neutral-300 after:bg-neutral-300'></div>
+                <Icon icon='heroicons:chevron-down' width={20} height={20} />
+              </Button>
+            }
+            className={{
+              content: 'w-52 mt-3',
+            }}
+            controlled={open}
+          >
+            <Menu>
+              <MenuItem
+                title='Body weight'
+                onClick={() => {
+                  setChartData('body_weight');
+                  setOpen(!open);
+                }}
+              />
+              <MenuItem
+                title='Performance'
+                onClick={() => {
+                  setChartData('performance');
+                  setOpen(!open);
+                }}
+              />
+              <MenuItem
+                title='FCR'
+                onClick={() => {
+                  setChartData('fcr');
+                  setOpen(!open);
+                }}
+              />
+              <MenuItem
+                title='Quality Control'
+                onClick={() => {
+                  setChartData('quality_control');
+                  setOpen(!open);
+                }}
+              />
+              <MenuItem
+                title='Deplesi'
+                onClick={() => {
+                  setChartData('deplesi');
+                  setOpen(!open);
+                }}
+              />
+            </Menu>
+          </Dropdown>
+        )}
+      </div>
+
+      {/* Legend - Dynamic based on series data */}
+      <div className='flex flex-wrap gap-3 mb-6'>
+        {(() => {
+          // Get series data based on current mode and chartData
+          let seriesData: DashboardChartsSeries[] = [];
+
+          if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+            seriesData = data.charts[chartData]?.series || [];
+          } else if (
+            analysisMode === 'COMPARISON' &&
+            isComparisonCharts(data.charts)
+          ) {
+            const comparisonChart =
+              data.charts.location || data.charts.flock || data.charts.kandang;
+            seriesData = comparisonChart?.series || [];
+          }
+
+          return seriesData.map((series, index) => {
+            const isVisible = visibleSeries.has(series.id);
+            const isStandard = series.id
+              .toString()
+              .toLowerCase()
+              .includes('std');
+
+            return (
+              <button
+                key={series.id}
+                onClick={() => {
+                  const newVisible = new Set(visibleSeries);
+                  if (isVisible) {
+                    newVisible.delete(series.id);
+                  } else {
+                    newVisible.add(series.id);
+                  }
+                  setVisibleSeries(newVisible);
+                }}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors ${
+                  isVisible
+                    ? 'border-neutral-400 bg-neutral-50'
+                    : 'border-neutral-300 hover:bg-neutral-50'
+                }`}
+              >
+                <div
+                  className={`w-6 h-0.5 ${
+                    isStandard ? 'border-t-2 border-dashed' : ''
+                  } ${!isVisible ? 'opacity-30' : ''}`}
+                  style={{
+                    backgroundColor: isStandard
+                      ? 'transparent'
+                      : getLineColor(series.id, index, analysisMode),
+                    borderColor: isStandard
+                      ? getLineColor(series.id, index, analysisMode)
+                      : 'transparent',
+                  }}
+                ></div>
+                <span
+                  className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
+                >
+                  {series.label}
+                </span>
+                <Icon
+                  icon='heroicons:information-circle'
+                  width={16}
+                  height={16}
+                  className='text-neutral-400'
+                />
+              </button>
+            );
+          });
+        })()}
+      </div>
+
+      {/* Chart */}
+      <ResponsiveContainer width='100%' height={350}>
+        <LineChart
+          data={(() => {
+            // Transform data based on analysisMode
+            if (analysisMode === 'OVERVIEW') {
+              // For OVERVIEW mode, use the selected chart data
+              if (isOverviewCharts(data.charts)) {
+                const selectedChartData = data.charts[chartData];
+                if (!selectedChartData || !selectedChartData.dataset) return [];
+                return selectedChartData.dataset;
+              }
+              return [];
+            } else {
+              // For COMPARISON mode, use the first available comparison chart
+              if (isComparisonCharts(data.charts)) {
+                const chartData =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+
+                if (!chartData || !chartData.dataset) return [];
+                return chartData.dataset;
+              }
+              return [];
+            }
+          })()}
+          margin={{
+            top: 5,
+            right: 10,
+            left: 0,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
+          <XAxis
+            dataKey='week'
+            tick={{ fontSize: 11, fill: '#9ca3af' }}
+            tickLine={false}
+            axisLine={{ stroke: '#e5e7eb' }}
+            label={{
+              value: 'Weeks',
+              position: 'insideBottom',
+              offset: -5,
+              style: { fontSize: 12, fill: '#9ca3af' },
+            }}
+          />
+          <YAxis
+            tick={{ fontSize: 11, fill: '#9ca3af' }}
+            tickLine={false}
+            axisLine={{ stroke: '#e5e7eb' }}
+            domain={(() => {
+              // Calculate dynamic domain based on visible data
+              let seriesData: DashboardChartsSeries[] = [];
+              let dataset: DashboardChartsDataset[] = [];
+
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+                dataset = data.charts[chartData]?.dataset || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+                seriesData = comparisonChart?.series || [];
+                dataset = comparisonChart?.dataset || [];
+              }
+
+              // Get all values from visible series
+              const visibleSeriesIds = Array.from(visibleSeries);
+              const allValues: number[] = [];
+
+              dataset.forEach((item: DashboardChartsDataset) => {
+                visibleSeriesIds.forEach((seriesId) => {
+                  const value = item[seriesId];
+                  if (typeof value === 'number') {
+                    allValues.push(value);
+                  }
+                });
+              });
+
+              if (allValues.length === 0) return [0, 100];
+
+              const minValue = Math.min(...allValues);
+              const maxValue = Math.max(...allValues);
+
+              // Add padding (10% on each side)
+              const padding = (maxValue - minValue) * 0.1;
+              const domainMin = Math.floor(Math.max(0, minValue - padding));
+              const domainMax = Math.ceil(maxValue + padding);
+
+              return [domainMin, domainMax];
+            })()}
+            ticks={(() => {
+              // Calculate dynamic ticks based on domain
+              let seriesData: DashboardChartsSeries[] = [];
+              let dataset: DashboardChartsDataset[] = [];
+
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+                dataset = data.charts[chartData]?.dataset || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+                seriesData = comparisonChart?.series || [];
+                dataset = comparisonChart?.dataset || [];
+              }
+
+              const visibleSeriesIds = Array.from(visibleSeries);
+              const allValues: number[] = [];
+
+              dataset.forEach((item: DashboardChartsDataset) => {
+                visibleSeriesIds.forEach((seriesId) => {
+                  const value = item[seriesId];
+                  if (typeof value === 'number') {
+                    allValues.push(value);
+                  }
+                });
+              });
+
+              if (allValues.length === 0) return [0, 25, 50, 75, 100];
+
+              const minValue = Math.min(...allValues);
+              const maxValue = Math.max(...allValues);
+              const padding = (maxValue - minValue) * 0.1;
+              const domainMin = Math.floor(Math.max(0, minValue - padding));
+              const domainMax = Math.ceil(maxValue + padding);
+
+              // Generate 5 evenly spaced ticks
+              const range = domainMax - domainMin;
+              const step = range / 4;
+
+              return [
+                domainMin,
+                Math.round(domainMin + step),
+                Math.round(domainMin + step * 2),
+                Math.round(domainMin + step * 3),
+                domainMax,
+              ];
+            })()}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: '#1f2937',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '8px 12px',
+              color: 'white',
+            }}
+            labelStyle={{ color: 'white', marginBottom: '4px' }}
+            itemStyle={{ color: 'white', fontSize: '12px' }}
+            labelFormatter={(value) => `Week ${value}`}
+            formatter={(
+              value: number | undefined,
+              name: string | undefined
+            ) => {
+              if (value === undefined || name === undefined) return ['', ''];
+
+              // Get series data to find the unit
+              let seriesData: DashboardChartsSeries[] = [];
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+                seriesData = comparisonChart?.series || [];
+              }
+
+              // Find the series that matches this line's name
+              const series = seriesData.find((s) => s.label === name);
+              const unit = series?.unit || '';
+
+              return [`${value} ${unit}`, name];
+            }}
+          />
+          {/* Dynamic Line rendering based on visible series */}
+          {(() => {
+            let seriesData: DashboardChartsSeries[] = [];
+
+            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+              seriesData = data.charts[chartData]?.series || [];
+            } else if (
+              analysisMode === 'COMPARISON' &&
+              isComparisonCharts(data.charts)
+            ) {
+              const comparisonChart =
+                data.charts.location ||
+                data.charts.flock ||
+                data.charts.kandang;
+              seriesData = comparisonChart?.series || [];
+            }
+
+            return seriesData
+              .filter((series) => visibleSeries.has(series.id))
+              .map((series, index) => {
+                const isStandard = series.id
+                  .toString()
+                  .toLowerCase()
+                  .includes('std');
+                // Use series.id directly as dataKey to match dataset fields
+                const dataKey = series.id.toString();
+
+                return (
+                  <Line
+                    key={series.id}
+                    type='monotone'
+                    dataKey={dataKey}
+                    name={series.label}
+                    stroke={getLineColor(series.id, index, analysisMode)}
+                    opacity={isStandard ? 0.5 : 1}
+                    strokeWidth={2}
+                    strokeDasharray={isStandard ? '5 5' : undefined}
+                    dot={
+                      isStandard
+                        ? false
+                        : {
+                            r: 3,
+                            fill: '#fff',
+                            stroke: getLineColor(
+                              series.id,
+                              index,
+                              analysisMode
+                            ),
+                            strokeWidth: 2,
+                          }
+                    }
+                    activeDot={isStandard ? undefined : { r: 5 }}
+                  />
+                );
+              });
+          })()}
+        </LineChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+};
+
+export default DashboardLineChart;

src/components/pages/dashboard/chart/DashboardStats.tsx

@@ -0,0 +1,166 @@
+import Alert from '@/components/Alert';
+import Card from '@/components/Card';
+import { formatNumber } from '@/lib/helper';
+import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+
+interface DashboardStatsProps {
+  data: DashboardStatisticsData[];
+}
+
+// Konfigurasi untuk setiap kartu
+const CARD_CONFIG = [
+  {
+    key: 'HPP Global',
+    icon: 'heroicons:banknotes',
+    alertColor: 'warning' as const,
+    suffix: ' /Kg',
+    prefix: 'RP ',
+  },
+  {
+    key: 'Avg. Selling Price',
+    icon: 'heroicons:document-currency-dollar',
+    alertColor: 'success' as const,
+    suffix: ' /Kg',
+    prefix: '',
+  },
+  {
+    key: 'FCR',
+    icon: 'heroicons:clipboard-document-list',
+    alertColor: 'info' as const,
+    suffix: '',
+    prefix: '',
+  },
+  {
+    key: 'Mortality',
+    icon: 'heroicons:exclamation-triangle',
+    alertColor: 'error' as const,
+    suffix: ' %',
+    prefix: '',
+  },
+];
+
+const DashboardStats = ({ data }: DashboardStatsProps) => {
+  // Helper to get trend icon and color
+  const getTrendDisplay = (percent: number) => {
+    const isPositive = percent >= 0;
+    return {
+      icon: isPositive
+        ? 'heroicons:arrow-trending-up'
+        : 'heroicons:arrow-trending-down',
+      color: isPositive ? 'text-success' : 'text-error',
+      value: Math.abs(percent),
+    };
+  };
+
+  // Helper to format value
+  const formatValue = (value: number, prefix: string, suffix: string) => {
+    return (
+      <>
+        {prefix}
+        {formatNumber(value)}
+        {suffix && (
+          <span className='text-sm font-normal text-neutral-500'>{suffix}</span>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
+      {CARD_CONFIG.map((config) => {
+        // Find matching data from API
+        const cardData = data.find((item) => item.label === config.key);
+
+        if (!cardData) {
+          // Show placeholder card for missing data (FCR & Mortality)
+          return (
+            <Card
+              key={config.key}
+              className={{
+                wrapper: 'w-full rounded-lg',
+                body: 'p-0',
+              }}
+              variant='bordered'
+              footer={
+                <div className='flex flex-row justify-between px-4 pb-4'>
+                  <div className='text-neutral-400 font-semibold text-sm'>
+                    From last month
+                  </div>
+                  <div className='text-neutral-400 font-semibold text-sm'>
+                    Filter Required
+                  </div>
+                </div>
+              }
+            >
+              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+                <Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
+                  <Icon
+                    icon={config.icon}
+                    width={32}
+                    height={32}
+                    className='text-neutral-400'
+                  />
+                </Alert>
+                <div>
+                  <h3 className='text-neutral-400 font-semibold text-sm'>
+                    {config.key}
+                  </h3>
+                  <p className='text-2xl font-semibold text-neutral-400'>
+                    ********
+                  </p>
+                </div>
+              </div>
+            </Card>
+          );
+        }
+
+        const trend = getTrendDisplay(cardData.percent_last_month);
+
+        return (
+          <Card
+            key={config.key}
+            className={{
+              wrapper: 'w-full rounded-lg',
+              body: 'p-0',
+            }}
+            variant='bordered'
+            footer={
+              <div className='flex flex-row justify-between px-4 pb-4'>
+                <div className='text-neutral-500 font-semibold text-sm'>
+                  From last month
+                </div>
+                <div
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
+                >
+                  <Icon icon={trend.icon} width={16} height={16} />
+                  {trend.value}%
+                </div>
+              </div>
+            }
+          >
+            <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <Alert
+                variant='soft'
+                color={config.alertColor}
+                className='rounded-lg p-3'
+              >
+                <Icon icon={config.icon} width={32} height={32} />
+              </Alert>
+              <div>
+                <h3 className='text-neutral-500 font-semibold text-sm'>
+                  {cardData.label}
+                </h3>
+                <p className='text-2xl font-semibold'>
+                  {formatValue(cardData.value, config.prefix, config.suffix)}
+                </p>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DashboardStats;

src/components/pages/dashboard/chart/EggWeightBarChart.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from 'recharts';
-import { DashboardProductionEggWeights } from '@/types/api/dashboard/dashboard-production';
-
-interface EggWeightBarChartProps {
-  data?: DashboardProductionEggWeights[];
-}
-
-const EggWeightBarChart = ({ data }: EggWeightBarChartProps) => {
-  // Show loading state if no data
-  if (!data || data.length === 0) {
-    return (
-      <div className='w-full h-full'>
-        <h3 className='text-lg font-semibold mb-4'>
-          Rata-rata Berat Telur (EW)
-        </h3>
-        <div className='flex items-center justify-center h-[350px]'>
-          <p className='text-gray-500'>Memuat data...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className='w-full h-full'>
-      <h3 className='text-lg font-semibold mb-4'>Rata-rata Berat Telur (EW)</h3>
-      <ResponsiveContainer width='100%' height={350}>
-        <BarChart
-          data={data}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='flock.name'
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-          />
-          <YAxis
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={[0, 'auto']}
-            label={{
-              value: 'Berat (gram)',
-              angle: -90,
-              position: 'insideLeft',
-              style: { fontSize: 12 },
-            }}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: 'white',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              padding: '8px 12px',
-            }}
-            formatter={(value: number | undefined) =>
-              value !== undefined ? [`${value} gram`, ''] : ['', '']
-            }
-            cursor={{ fill: 'rgba(59, 130, 246, 0.1)' }}
-          />
-          <Bar dataKey='weight' radius={[8, 8, 0, 0]}>
-            {data.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill='#3b82f6' />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default EggWeightBarChart;

src/components/pages/dashboard/chart/FCRBarChart.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from 'recharts';
-import { DashboardProductionFcrData } from '@/types/api/dashboard/dashboard-production';
-
-interface FCRBarChartProps {
-  data?: DashboardProductionFcrData[];
-}
-
-// Alternating colors: green and red
-const colors = ['#10b981', '#ef4444'];
-
-const FCRBarChart = ({ data }: FCRBarChartProps) => {
-  // Show loading state if no data
-  if (!data || data.length === 0) {
-    return (
-      <div className='w-full h-full'>
-        <h3 className='text-lg font-semibold mb-4'>
-          Feed Conversion Ratio (FCR)
-        </h3>
-        <div className='flex items-center justify-center h-[350px]'>
-          <p className='text-gray-500'>Memuat data...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className='w-full h-full'>
-      <h3 className='text-lg font-semibold mb-4'>
-        Feed Conversion Ratio (FCR)
-      </h3>
-      <ResponsiveContainer width='100%' height={350}>
-        <BarChart
-          data={data}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='flock.name'
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-          />
-          <YAxis
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={[0, 'auto']}
-            label={{
-              value: 'FCR',
-              angle: -90,
-              position: 'insideLeft',
-              style: { fontSize: 12 },
-            }}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: 'white',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              padding: '8px 12px',
-            }}
-            formatter={(value: number | undefined) =>
-              value !== undefined ? [value.toFixed(2), 'FCR'] : ['', '']
-            }
-            cursor={{ fill: 'rgba(16, 185, 129, 0.1)' }}
-          />
-          <Bar dataKey='fcr' radius={[8, 8, 0, 0]}>
-            {data.map((entry, index) => (
-              <Cell
-                key={`cell-${index}`}
-                fill={colors[index % colors.length]}
-              />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default FCRBarChart;

src/components/pages/dashboard/chart/ProductionLineChart.tsx

@@ -1,357 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts';
-
-// Sample data in API format
-const sampleApiData: ProductionChartItem[] = [
-  {
-    date: '2025-12-01T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 88 },
-      { id: 2, name: 'Flock A-001', data: 92 },
-      { id: 3, name: 'Flock B-001', data: 90 },
-      { id: 4, name: 'Flock B-002', data: 85 },
-    ],
-  },
-  {
-    date: '2025-12-03T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 85 },
-      { id: 2, name: 'Flock A-001', data: 95 },
-      { id: 3, name: 'Flock B-001', data: 93 },
-      { id: 4, name: 'Flock B-002', data: 87 },
-    ],
-  },
-  {
-    date: '2025-12-05T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 82 },
-      { id: 2, name: 'Flock A-001', data: 98 },
-      { id: 3, name: 'Flock B-001', data: 91 },
-      { id: 4, name: 'Flock B-002', data: 84 },
-    ],
-  },
-  {
-    date: '2025-12-07T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 80 },
-      { id: 2, name: 'Flock A-001', data: 89 },
-      { id: 3, name: 'Flock B-001', data: 88 },
-      { id: 4, name: 'Flock B-002', data: 82 },
-    ],
-  },
-  {
-    date: '2025-12-08T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 83 },
-      { id: 2, name: 'Flock A-001', data: 92 },
-      { id: 3, name: 'Flock B-001', data: 95 },
-      { id: 4, name: 'Flock B-002', data: 85 },
-    ],
-  },
-  {
-    date: '2025-12-11T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 81 },
-      { id: 2, name: 'Flock A-001', data: 88 },
-      { id: 3, name: 'Flock B-001', data: 92 },
-      { id: 4, name: 'Flock B-002', data: 83 },
-    ],
-  },
-  {
-    date: '2025-12-13T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 84 },
-      { id: 2, name: 'Flock A-001', data: 90 },
-      { id: 3, name: 'Flock B-001', data: 89 },
-      { id: 4, name: 'Flock B-002', data: 86 },
-    ],
-  },
-  {
-    date: '2025-12-15T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 82 },
-      { id: 2, name: 'Flock A-001', data: 94 },
-      { id: 3, name: 'Flock B-001', data: 96 },
-      { id: 4, name: 'Flock B-002', data: 84 },
-    ],
-  },
-  {
-    date: '2025-12-17T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 80 },
-      { id: 2, name: 'Flock A-001', data: 91 },
-      { id: 3, name: 'Flock B-001', data: 93 },
-      { id: 4, name: 'Flock B-002', data: 82 },
-    ],
-  },
-  {
-    date: '2025-12-19T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 79 },
-      { id: 2, name: 'Flock A-001', data: 88 },
-      { id: 3, name: 'Flock B-001', data: 90 },
-      { id: 4, name: 'Flock B-002', data: 81 },
-    ],
-  },
-  {
-    date: '2025-12-21T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 81 },
-      { id: 2, name: 'Flock A-001', data: 97 },
-      { id: 3, name: 'Flock B-001', data: 92 },
-      { id: 4, name: 'Flock B-002', data: 83 },
-    ],
-  },
-  {
-    date: '2025-12-23T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 83 },
-      { id: 2, name: 'Flock A-001', data: 95 },
-      { id: 3, name: 'Flock B-001', data: 98 },
-      { id: 4, name: 'Flock B-002', data: 85 },
-    ],
-  },
-  {
-    date: '2025-12-25T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 80 },
-      { id: 2, name: 'Flock A-001', data: 89 },
-      { id: 3, name: 'Flock B-001', data: 94 },
-      { id: 4, name: 'Flock B-002', data: 82 },
-    ],
-  },
-  {
-    date: '2025-12-27T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 82 },
-      { id: 2, name: 'Flock A-001', data: 93 },
-      { id: 3, name: 'Flock B-001', data: 96 },
-      { id: 4, name: 'Flock B-002', data: 84 },
-    ],
-  },
-  {
-    date: '2025-12-28T00:00:00Z',
-    flocks: [
-      { id: 1, name: 'Flock A-002', data: 85 },
-      { id: 2, name: 'Flock A-001', data: 96 },
-      { id: 3, name: 'Flock B-001', data: 95 },
-      { id: 4, name: 'Flock B-002', data: 87 },
-    ],
-  },
-];
-
-// Helper function to format date based on period
-const formatDateByPeriod = (
-  dateString: string,
-  period: 'daily' | 'weekly' | 'monthly' | 'yearly'
-): string => {
-  const date = new Date(dateString);
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'Mei',
-    'Jun',
-    'Jul',
-    'Agu',
-    'Sep',
-    'Okt',
-    'Nov',
-    'Des',
-  ];
-
-  switch (period) {
-    case 'daily':
-      // Format: "1 Des"
-      return `${date.getDate()} ${monthNames[date.getMonth()]}`;
-
-    case 'weekly':
-      // Format: "Week 1 Des"
-      const weekNumber = Math.ceil(date.getDate() / 7);
-      return `Week ${weekNumber} ${monthNames[date.getMonth()]}`;
-
-    case 'monthly':
-      // Format: "Des"
-      return monthNames[date.getMonth()];
-
-    case 'yearly':
-      // Format: "2025"
-      return date.getFullYear().toString();
-
-    default:
-      return dateString;
-  }
-};
-
-// Type definitions for API data
-interface FlockData {
-  id: number;
-  name: string;
-  data: number;
-}
-
-interface ProductionChartItem {
-  date: string;
-  flocks: FlockData[];
-}
-
-interface ProductionChartsData {
-  production_charts: ProductionChartItem[];
-}
-
-// Transform API data to Recharts format
-const transformProductionData = (apiData: ProductionChartItem[]) => {
-  return apiData.map((item) => {
-    const transformed: Record<string, string | number> = {
-      date: item.date.split('T')[0], // Extract YYYY-MM-DD from ISO string
-    };
-
-    // Add each flock's data as a property
-    item.flocks.forEach((flock) => {
-      transformed[flock.name] = flock.data;
-    });
-
-    return transformed;
-  });
-};
-
-interface ProductionLineChartProps {
-  period?: 'daily' | 'weekly' | 'monthly' | 'yearly';
-  data?: ProductionChartItem[]; // Optional API data
-}
-
-const ProductionLineChart = ({
-  period = 'daily',
-  data: apiData,
-}: ProductionLineChartProps) => {
-  // State to track which lines are hidden
-  const [hiddenLines, setHiddenLines] = useState<string[]>([]);
-
-  // Use API data if provided, otherwise use sample data
-  const chartData = apiData
-    ? transformProductionData(apiData)
-    : transformProductionData(sampleApiData);
-
-  // Handle legend click to show/hide lines
-  const handleLegendClick = (dataKey: string) => {
-    setHiddenLines((prev) =>
-      prev.includes(dataKey)
-        ? prev.filter((key) => key !== dataKey)
-        : [...prev, dataKey]
-    );
-  };
-
-  return (
-    <div className='w-full h-full'>
-      <h3 className='text-lg font-semibold mb-4'>
-        Performa Produksi per Flock
-      </h3>
-      <ResponsiveContainer width='100%' height={400}>
-        <LineChart
-          data={chartData}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='date'
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            tickFormatter={(value) => formatDateByPeriod(value, period)}
-          />
-          <YAxis
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={[0, 100]}
-            label={{
-              value: 'Persentase (%)',
-              angle: -90,
-              position: 'insideLeft',
-              style: { fontSize: 12 },
-            }}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: 'white',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              padding: '8px 12px',
-            }}
-            labelFormatter={(value) =>
-              formatDateByPeriod(value as string, period)
-            }
-          />
-          <Legend
-            wrapperStyle={{
-              paddingTop: '20px',
-            }}
-            iconType='circle'
-            onClick={(e) => {
-              if (e.dataKey) handleLegendClick(e.dataKey as string);
-            }}
-            style={{ cursor: 'pointer' }}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock A-002'
-            stroke='#3b82f6'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#3b82f6' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock A-002')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock A-001'
-            stroke='#10b981'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#10b981' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock A-001')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock B-001'
-            stroke='#f59e0b'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#f59e0b' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock B-001')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock B-002'
-            stroke='#ef4444'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#ef4444' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock B-002')}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default ProductionLineChart;
-
-// Export types for external use
-export type { FlockData, ProductionChartItem, ProductionChartsData };

src/components/pages/dashboard/chart/ProductionStat.tsx

@@ -1,107 +0,0 @@
-import Card from '@/components/Card';
-import { Icon } from '@iconify/react';
-import { DashboardProductionStatisticsData } from '@/types/api/dashboard/dashboard-production';
-import { formatCurrency } from '@/lib/helper';
-
-interface ProductionStatProps {
-  data?: DashboardProductionStatisticsData[];
-}
-
-const ProductionStat = ({ data }: ProductionStatProps) => {
-  // Helper function to get icon based on title
-  const getIcon = (title: string) => {
-    if (title.toLowerCase().includes('keuangan'))
-      return 'heroicons:currency-dollar';
-    if (title.toLowerCase().includes('penjualan'))
-      return 'heroicons:arrow-trending-up';
-    if (title.toLowerCase().includes('pembelian'))
-      return 'heroicons:shopping-cart';
-    if (title.toLowerCase().includes('overhead')) return 'heroicons:calculator';
-    return 'heroicons:chart-bar';
-  };
-
-  // Helper function to get icon background color
-  const getIconBgColor = (title: string) => {
-    if (title.toLowerCase().includes('keuangan')) return 'bg-blue-500';
-    if (title.toLowerCase().includes('penjualan')) return 'bg-green-500';
-    if (title.toLowerCase().includes('pembelian')) return 'bg-orange-500';
-    if (title.toLowerCase().includes('overhead')) return 'bg-purple-500';
-    return 'bg-gray-500';
-  };
-
-  // Show loading state if no data
-  if (!data || data.length === 0) {
-    return (
-      <section className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
-        {[1, 2, 3, 4].map((i) => (
-          <Card
-            key={i}
-            variant='bordered'
-            className={{ wrapper: 'w-full', body: 'p-4' }}
-          >
-            <div className='animate-pulse'>
-              <div className='h-4 bg-gray-200 rounded w-1/2 mb-2'></div>
-              <div className='h-6 bg-gray-200 rounded w-3/4 mb-1'></div>
-              <div className='h-4 bg-gray-200 rounded w-1/3'></div>
-            </div>
-          </Card>
-        ))}
-      </section>
-    );
-  }
-
-  return (
-    <section className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
-      {data.map((stat, index) => (
-        <Card
-          key={index}
-          variant='bordered'
-          className={{ wrapper: 'w-full', body: 'p-4' }}
-        >
-          <div className='flex items-start justify-between'>
-            <div className='flex-1'>
-              <p className='text-sm text-gray-600 mb-2'>{stat.title}</p>
-              <p className='text-xl font-bold text-gray-900 mb-1'>
-                {formatCurrency(stat.value)}
-              </p>
-              <p
-                className={`text-sm flex items-center gap-1 ${
-                  stat.changeType === 'increase'
-                    ? 'text-green-600'
-                    : 'text-red-600'
-                }`}
-              >
-                <Icon
-                  icon={
-                    stat.changeType === 'increase'
-                      ? 'heroicons:arrow-trending-up'
-                      : 'heroicons:arrow-trending-down'
-                  }
-                  width={16}
-                  height={16}
-                />
-                {stat.change > 0 ? '+' : ''}
-                {stat.change}% vs{' '}
-                {stat.period === 'monthly' ? 'bulan lalu' : 'periode lalu'}
-              </p>
-            </div>
-            <div className='flex-shrink-0'>
-              <div
-                className={`w-12 h-12 rounded-lg ${getIconBgColor(stat.title)} flex items-center justify-center`}
-              >
-                <Icon
-                  icon={getIcon(stat.title)}
-                  width={24}
-                  height={24}
-                  className='text-white'
-                />
-              </div>
-            </div>
-          </div>
-        </Card>
-      ))}
-    </section>
-  );
-};
-
-export default ProductionStat;

src/components/pages/dashboard/chart/StandardLineChart.tsx

@@ -1,691 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts';
-
-// Type definitions for API data
-interface FlockData {
-  id: number;
-  name: string;
-  data: number;
-}
-
-interface StandardData {
-  name: string;
-  value: number;
-}
-
-interface StandardChartItem {
-  week: number;
-  standards: StandardData[];
-  flocks: FlockData[];
-}
-
-// Sample data in API format
-const sampleApiData: StandardChartItem[] = [
-  {
-    week: 18,
-    standards: [
-      { name: 'hen_day', value: 40 },
-      { name: 'hen_house', value: 38 },
-      { name: 'uniformity', value: 85 },
-      { name: 'egg_weight', value: 52 },
-      { name: 'egg_mass', value: 20 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 38 },
-      { id: 2, name: 'Flock A-002', data: 37 },
-      { id: 3, name: 'Flock B-001', data: 39 },
-      { id: 4, name: 'Flock B-002', data: 36 },
-    ],
-  },
-  {
-    week: 20,
-    standards: [
-      { name: 'hen_day', value: 45 },
-      { name: 'hen_house', value: 43 },
-      { name: 'uniformity', value: 86 },
-      { name: 'egg_weight', value: 54 },
-      { name: 'egg_mass', value: 24 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 43 },
-      { id: 2, name: 'Flock A-002', data: 42 },
-      { id: 3, name: 'Flock B-001', data: 44 },
-      { id: 4, name: 'Flock B-002', data: 41 },
-    ],
-  },
-  {
-    week: 22,
-    standards: [
-      { name: 'hen_day', value: 48 },
-      { name: 'hen_house', value: 46 },
-      { name: 'uniformity', value: 87 },
-      { name: 'egg_weight', value: 55 },
-      { name: 'egg_mass', value: 26 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 47 },
-      { id: 2, name: 'Flock A-002', data: 46 },
-      { id: 3, name: 'Flock B-001', data: 48 },
-      { id: 4, name: 'Flock B-002', data: 45 },
-    ],
-  },
-  {
-    week: 24,
-    standards: [
-      { name: 'hen_day', value: 50 },
-      { name: 'hen_house', value: 48 },
-      { name: 'uniformity', value: 88 },
-      { name: 'egg_weight', value: 56 },
-      { name: 'egg_mass', value: 28 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 49 },
-      { id: 2, name: 'Flock A-002', data: 48 },
-      { id: 3, name: 'Flock B-001', data: 50 },
-      { id: 4, name: 'Flock B-002', data: 47 },
-    ],
-  },
-  {
-    week: 26,
-    standards: [
-      { name: 'hen_day', value: 52 },
-      { name: 'hen_house', value: 50 },
-      { name: 'uniformity', value: 89 },
-      { name: 'egg_weight', value: 57 },
-      { name: 'egg_mass', value: 30 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 50 },
-      { id: 2, name: 'Flock A-002', data: 49 },
-      { id: 3, name: 'Flock B-001', data: 51 },
-      { id: 4, name: 'Flock B-002', data: 48 },
-    ],
-  },
-  {
-    week: 28,
-    standards: [
-      { name: 'hen_day', value: 55 },
-      { name: 'hen_house', value: 53 },
-      { name: 'uniformity', value: 90 },
-      { name: 'egg_weight', value: 58 },
-      { name: 'egg_mass', value: 32 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 53 },
-      { id: 2, name: 'Flock A-002', data: 52 },
-      { id: 3, name: 'Flock B-001', data: 54 },
-      { id: 4, name: 'Flock B-002', data: 51 },
-    ],
-  },
-  {
-    week: 30,
-    standards: [
-      { name: 'hen_day', value: 58 },
-      { name: 'hen_house', value: 56 },
-      { name: 'uniformity', value: 91 },
-      { name: 'egg_weight', value: 59 },
-      { name: 'egg_mass', value: 34 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 55 },
-      { id: 2, name: 'Flock A-002', data: 54 },
-      { id: 3, name: 'Flock B-001', data: 56 },
-      { id: 4, name: 'Flock B-002', data: 53 },
-    ],
-  },
-  {
-    week: 32,
-    standards: [
-      { name: 'hen_day', value: 60 },
-      { name: 'hen_house', value: 58 },
-      { name: 'uniformity', value: 92 },
-      { name: 'egg_weight', value: 60 },
-      { name: 'egg_mass', value: 36 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 58 },
-      { id: 2, name: 'Flock A-002', data: 57 },
-      { id: 3, name: 'Flock B-001', data: 59 },
-      { id: 4, name: 'Flock B-002', data: 56 },
-    ],
-  },
-  {
-    week: 34,
-    standards: [
-      { name: 'hen_day', value: 62 },
-      { name: 'hen_house', value: 60 },
-      { name: 'uniformity', value: 92 },
-      { name: 'egg_weight', value: 61 },
-      { name: 'egg_mass', value: 38 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 60 },
-      { id: 2, name: 'Flock A-002', data: 59 },
-      { id: 3, name: 'Flock B-001', data: 61 },
-      { id: 4, name: 'Flock B-002', data: 58 },
-    ],
-  },
-  {
-    week: 36,
-    standards: [
-      { name: 'hen_day', value: 64 },
-      { name: 'hen_house', value: 62 },
-      { name: 'uniformity', value: 93 },
-      { name: 'egg_weight', value: 62 },
-      { name: 'egg_mass', value: 40 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 62 },
-      { id: 2, name: 'Flock A-002', data: 61 },
-      { id: 3, name: 'Flock B-001', data: 63 },
-      { id: 4, name: 'Flock B-002', data: 60 },
-    ],
-  },
-  {
-    week: 38,
-    standards: [
-      { name: 'hen_day', value: 66 },
-      { name: 'hen_house', value: 64 },
-      { name: 'uniformity', value: 93 },
-      { name: 'egg_weight', value: 63 },
-      { name: 'egg_mass', value: 42 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 64 },
-      { id: 2, name: 'Flock A-002', data: 63 },
-      { id: 3, name: 'Flock B-001', data: 65 },
-      { id: 4, name: 'Flock B-002', data: 62 },
-    ],
-  },
-  {
-    week: 40,
-    standards: [
-      { name: 'hen_day', value: 68 },
-      { name: 'hen_house', value: 66 },
-      { name: 'uniformity', value: 94 },
-      { name: 'egg_weight', value: 64 },
-      { name: 'egg_mass', value: 44 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 66 },
-      { id: 2, name: 'Flock A-002', data: 65 },
-      { id: 3, name: 'Flock B-001', data: 67 },
-      { id: 4, name: 'Flock B-002', data: 64 },
-    ],
-  },
-  {
-    week: 42,
-    standards: [
-      { name: 'hen_day', value: 70 },
-      { name: 'hen_house', value: 68 },
-      { name: 'uniformity', value: 94 },
-      { name: 'egg_weight', value: 65 },
-      { name: 'egg_mass', value: 46 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 68 },
-      { id: 2, name: 'Flock A-002', data: 67 },
-      { id: 3, name: 'Flock B-001', data: 69 },
-      { id: 4, name: 'Flock B-002', data: 66 },
-    ],
-  },
-  {
-    week: 44,
-    standards: [
-      { name: 'hen_day', value: 72 },
-      { name: 'hen_house', value: 70 },
-      { name: 'uniformity', value: 95 },
-      { name: 'egg_weight', value: 66 },
-      { name: 'egg_mass', value: 48 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 70 },
-      { id: 2, name: 'Flock A-002', data: 69 },
-      { id: 3, name: 'Flock B-001', data: 71 },
-      { id: 4, name: 'Flock B-002', data: 68 },
-    ],
-  },
-  {
-    week: 46,
-    standards: [
-      { name: 'hen_day', value: 74 },
-      { name: 'hen_house', value: 72 },
-      { name: 'uniformity', value: 95 },
-      { name: 'egg_weight', value: 67 },
-      { name: 'egg_mass', value: 50 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 72 },
-      { id: 2, name: 'Flock A-002', data: 71 },
-      { id: 3, name: 'Flock B-001', data: 73 },
-      { id: 4, name: 'Flock B-002', data: 70 },
-    ],
-  },
-  {
-    week: 48,
-    standards: [
-      { name: 'hen_day', value: 76 },
-      { name: 'hen_house', value: 74 },
-      { name: 'uniformity', value: 95 },
-      { name: 'egg_weight', value: 68 },
-      { name: 'egg_mass', value: 52 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 74 },
-      { id: 2, name: 'Flock A-002', data: 73 },
-      { id: 3, name: 'Flock B-001', data: 75 },
-      { id: 4, name: 'Flock B-002', data: 72 },
-    ],
-  },
-  {
-    week: 50,
-    standards: [
-      { name: 'hen_day', value: 78 },
-      { name: 'hen_house', value: 76 },
-      { name: 'uniformity', value: 96 },
-      { name: 'egg_weight', value: 69 },
-      { name: 'egg_mass', value: 54 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 76 },
-      { id: 2, name: 'Flock A-002', data: 75 },
-      { id: 3, name: 'Flock B-001', data: 77 },
-      { id: 4, name: 'Flock B-002', data: 74 },
-    ],
-  },
-  {
-    week: 52,
-    standards: [
-      { name: 'hen_day', value: 80 },
-      { name: 'hen_house', value: 78 },
-      { name: 'uniformity', value: 96 },
-      { name: 'egg_weight', value: 70 },
-      { name: 'egg_mass', value: 56 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 78 },
-      { id: 2, name: 'Flock A-002', data: 77 },
-      { id: 3, name: 'Flock B-001', data: 79 },
-      { id: 4, name: 'Flock B-002', data: 76 },
-    ],
-  },
-  {
-    week: 54,
-    standards: [
-      { name: 'hen_day', value: 82 },
-      { name: 'hen_house', value: 80 },
-      { name: 'uniformity', value: 96 },
-      { name: 'egg_weight', value: 71 },
-      { name: 'egg_mass', value: 58 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 80 },
-      { id: 2, name: 'Flock A-002', data: 79 },
-      { id: 3, name: 'Flock B-001', data: 81 },
-      { id: 4, name: 'Flock B-002', data: 78 },
-    ],
-  },
-  {
-    week: 56,
-    standards: [
-      { name: 'hen_day', value: 84 },
-      { name: 'hen_house', value: 82 },
-      { name: 'uniformity', value: 97 },
-      { name: 'egg_weight', value: 72 },
-      { name: 'egg_mass', value: 60 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 82 },
-      { id: 2, name: 'Flock A-002', data: 81 },
-      { id: 3, name: 'Flock B-001', data: 83 },
-      { id: 4, name: 'Flock B-002', data: 80 },
-    ],
-  },
-  {
-    week: 58,
-    standards: [
-      { name: 'hen_day', value: 86 },
-      { name: 'hen_house', value: 84 },
-      { name: 'uniformity', value: 97 },
-      { name: 'egg_weight', value: 73 },
-      { name: 'egg_mass', value: 62 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 84 },
-      { id: 2, name: 'Flock A-002', data: 83 },
-      { id: 3, name: 'Flock B-001', data: 85 },
-      { id: 4, name: 'Flock B-002', data: 82 },
-    ],
-  },
-  {
-    week: 60,
-    standards: [
-      { name: 'hen_day', value: 88 },
-      { name: 'hen_house', value: 86 },
-      { name: 'uniformity', value: 97 },
-      { name: 'egg_weight', value: 74 },
-      { name: 'egg_mass', value: 64 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 86 },
-      { id: 2, name: 'Flock A-002', data: 85 },
-      { id: 3, name: 'Flock B-001', data: 87 },
-      { id: 4, name: 'Flock B-002', data: 84 },
-    ],
-  },
-  {
-    week: 62,
-    standards: [
-      { name: 'hen_day', value: 90 },
-      { name: 'hen_house', value: 88 },
-      { name: 'uniformity', value: 98 },
-      { name: 'egg_weight', value: 75 },
-      { name: 'egg_mass', value: 66 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 88 },
-      { id: 2, name: 'Flock A-002', data: 87 },
-      { id: 3, name: 'Flock B-001', data: 89 },
-      { id: 4, name: 'Flock B-002', data: 86 },
-    ],
-  },
-  {
-    week: 64,
-    standards: [
-      { name: 'hen_day', value: 92 },
-      { name: 'hen_house', value: 90 },
-      { name: 'uniformity', value: 98 },
-      { name: 'egg_weight', value: 76 },
-      { name: 'egg_mass', value: 68 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 90 },
-      { id: 2, name: 'Flock A-002', data: 89 },
-      { id: 3, name: 'Flock B-001', data: 91 },
-      { id: 4, name: 'Flock B-002', data: 88 },
-    ],
-  },
-  {
-    week: 66,
-    standards: [
-      { name: 'hen_day', value: 94 },
-      { name: 'hen_house', value: 92 },
-      { name: 'uniformity', value: 98 },
-      { name: 'egg_weight', value: 77 },
-      { name: 'egg_mass', value: 70 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 92 },
-      { id: 2, name: 'Flock A-002', data: 91 },
-      { id: 3, name: 'Flock B-001', data: 93 },
-      { id: 4, name: 'Flock B-002', data: 90 },
-    ],
-  },
-  {
-    week: 68,
-    standards: [
-      { name: 'hen_day', value: 95 },
-      { name: 'hen_house', value: 93 },
-      { name: 'uniformity', value: 98 },
-      { name: 'egg_weight', value: 78 },
-      { name: 'egg_mass', value: 72 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 93 },
-      { id: 2, name: 'Flock A-002', data: 92 },
-      { id: 3, name: 'Flock B-001', data: 94 },
-      { id: 4, name: 'Flock B-002', data: 91 },
-    ],
-  },
-  {
-    week: 70,
-    standards: [
-      { name: 'hen_day', value: 96 },
-      { name: 'hen_house', value: 94 },
-      { name: 'uniformity', value: 99 },
-      { name: 'egg_weight', value: 79 },
-      { name: 'egg_mass', value: 74 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 94 },
-      { id: 2, name: 'Flock A-002', data: 93 },
-      { id: 3, name: 'Flock B-001', data: 95 },
-      { id: 4, name: 'Flock B-002', data: 92 },
-    ],
-  },
-  {
-    week: 72,
-    standards: [
-      { name: 'hen_day', value: 97 },
-      { name: 'hen_house', value: 95 },
-      { name: 'uniformity', value: 99 },
-      { name: 'egg_weight', value: 80 },
-      { name: 'egg_mass', value: 76 },
-    ],
-    flocks: [
-      { id: 1, name: 'Flock A-001', data: 95 },
-      { id: 2, name: 'Flock A-002', data: 94 },
-      { id: 3, name: 'Flock B-001', data: 96 },
-      { id: 4, name: 'Flock B-002', data: 93 },
-    ],
-  },
-];
-
-// Transform API data to Recharts format
-const transformStandardData = (
-  apiData: StandardChartItem[],
-  selectedStandards: string[] = [
-    'hen_day',
-    'hen_house',
-    'uniformity',
-    'egg_weight',
-    'egg_mass',
-  ]
-) => {
-  return apiData.map((item) => {
-    const transformed: Record<string, number> = {
-      week: item.week,
-    };
-
-    // Add selected standards as properties
-    selectedStandards.forEach((standardName) => {
-      const standardData = item.standards.find((s) => s.name === standardName);
-      if (standardData) {
-        transformed[standardName] = standardData.value;
-      }
-    });
-
-    // Add each flock's data as a property
-    item.flocks.forEach((flock) => {
-      transformed[flock.name] = flock.data;
-    });
-
-    return transformed;
-  });
-};
-
-interface StandardLineChartProps {
-  data?: StandardChartItem[];
-  selectedStandards?: string[];
-}
-
-const StandardLineChart = ({
-  data: apiData,
-  selectedStandards = [
-    'hen_day',
-    'hen_house',
-    'uniformity',
-    'egg_weight',
-    'egg_mass',
-  ],
-}: StandardLineChartProps) => {
-  // State to track which lines are hidden
-  const [hiddenLines, setHiddenLines] = useState<string[]>([]);
-
-  // Use API data if provided, otherwise use sample data
-  const chartData = apiData
-    ? transformStandardData(apiData, selectedStandards)
-    : transformStandardData(sampleApiData, selectedStandards);
-
-  // Handle legend click to show/hide lines
-  const handleLegendClick = (dataKey: string) => {
-    setHiddenLines((prev) =>
-      prev.includes(dataKey)
-        ? prev.filter((key) => key !== dataKey)
-        : [...prev, dataKey]
-    );
-  };
-
-  // Standard line colors mapping
-  const standardColors: Record<string, string> = {
-    hen_day: '#94a3b8',
-    hen_house: '#64748b',
-    uniformity: '#475569',
-    egg_weight: '#334155',
-    egg_mass: '#1e293b',
-  };
-
-  // Standard names mapping for display
-  const standardLabels: Record<string, string> = {
-    hen_day: 'Hen Day',
-    hen_house: 'Hen House',
-    uniformity: 'Uniformity',
-    egg_weight: 'Egg Weight',
-    egg_mass: 'Egg Mass',
-  };
-
-  return (
-    <div className='w-full h-full'>
-      <h3 className='text-lg font-semibold mb-4'>
-        Perbandingan Henday per Umur
-      </h3>
-      <ResponsiveContainer width='100%' height={400}>
-        <LineChart
-          data={chartData}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='week'
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            label={{
-              value: 'Umur (minggu)',
-              position: 'insideBottom',
-              offset: -5,
-              style: { fontSize: 12 },
-            }}
-          />
-          <YAxis
-            tick={{ fontSize: 12 }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={[0, 100]}
-            label={{
-              value: 'Henday (%)',
-              angle: -90,
-              position: 'insideLeft',
-              style: { fontSize: 12 },
-            }}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: 'white',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              padding: '8px 12px',
-            }}
-            formatter={(value: number | undefined) =>
-              value !== undefined ? [`${value}%`, ''] : ['', '']
-            }
-            labelFormatter={(label) => `Minggu ${label}`}
-          />
-          <Legend
-            wrapperStyle={{
-              paddingTop: '20px',
-            }}
-            iconType='circle'
-            onClick={(e) => {
-              if (e.dataKey) handleLegendClick(e.dataKey as string);
-            }}
-            style={{ cursor: 'pointer' }}
-          />
-          {/* Dynamic Standard Lines */}
-          {selectedStandards.map((standardName) => (
-            <Line
-              key={standardName}
-              type='monotone'
-              dataKey={standardName}
-              name={standardLabels[standardName] || standardName}
-              stroke={standardColors[standardName] || '#94a3b8'}
-              strokeWidth={2}
-              strokeDasharray='5 5'
-              dot={{ r: 3, fill: standardColors[standardName] || '#94a3b8' }}
-              activeDot={{ r: 5 }}
-              hide={hiddenLines.includes(standardName)}
-            />
-          ))}
-          {/* Flock Lines */}
-          <Line
-            type='monotone'
-            dataKey='Flock A-002'
-            stroke='#3b82f6'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#3b82f6' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock A-002')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock A-001'
-            stroke='#10b981'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#10b981' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock A-001')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock B-001'
-            stroke='#f59e0b'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#f59e0b' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock B-001')}
-          />
-          <Line
-            type='monotone'
-            dataKey='Flock B-002'
-            stroke='#ef4444'
-            strokeWidth={2}
-            dot={{ r: 4, fill: '#ef4444' }}
-            activeDot={{ r: 6 }}
-            hide={hiddenLines.includes('Flock B-002')}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default StandardLineChart;
-
-// Export types for external use
-export type { FlockData, StandardData, StandardChartItem };

src/components/pages/dashboard/filter/DashboardProductionFilter.schema.ts

@@ -1,16 +1,117 @@
+import { OptionType } from '@/components/input/SelectInput';
 import * as yup from 'yup';
 
-const dashboardProductionFilterSchema = yup.object({
-  startDate: yup.string().optional(),
-  endDate: yup.string().optional(),
-  flock: yup.array().optional(),
-  standard_production_id: yup.array().optional(),
-  standard_productions: yup.array().optional(),
-  period: yup.string().optional(),
-});
+export type DashboardFilterType = {
+  startDate: string;
+  endDate: string;
+  analysisMode: string;
+  comparisonType: string | undefined;
+  location: OptionType | OptionType[];
+  lokasiIds: number[] | undefined;
+  flock: OptionType | OptionType[] | undefined;
+  flockIds: number[] | undefined;
+  kandang: OptionType | OptionType[] | undefined;
+  kandangIds: number[] | undefined;
+};
 
-export type DashboardProductionFilterValues = yup.InferType<
-  typeof dashboardProductionFilterSchema
->;
+// Schema untuk mode OVERVIEW - semua field required
+export const DashboardFilterOverviewSchema: yup.ObjectSchema<DashboardFilterType> =
+  yup.object({
+    startDate: yup.string().required('Start date is required'),
+    endDate: yup.string().required('End date is required'),
+    analysisMode: yup.string().required('Analysis mode is required'),
+    comparisonType: yup.string().when('analysisMode', {
+      is: 'COMPARISON',
+      then: (schema) => schema.required('Compared by is required'),
+      otherwise: (schema) => schema.optional(),
+    }),
+    lokasiIds: yup.array().optional(),
+    flockIds: yup.array().optional(),
+    kandangIds: yup.array().optional(),
+    location: yup
+      .mixed<OptionType | OptionType[]>()
+      .required('Farm is required')
+      .test('is-not-empty', 'Farm is required', (value) => {
+        if (Array.isArray(value)) {
+          return value.length > 0;
+        }
+        return !!value;
+      }),
+    flock: yup
+      .mixed<OptionType | OptionType[]>()
+      .required('Flock is required')
+      .test('is-not-empty', 'Flock is required', (value) => {
+        if (Array.isArray(value)) {
+          return value.length > 0;
+        }
+        return !!value;
+      }),
+    kandang: yup
+      .mixed<OptionType | OptionType[]>()
+      .required('Kandang is required')
+      .test('is-not-empty', 'Kandang is required', (value) => {
+        if (Array.isArray(value)) {
+          return value.length > 0;
+        }
+        return !!value;
+      }),
+  });
 
-export default dashboardProductionFilterSchema;
+// Schema untuk mode COMPARISON - conditional validation
+export const DashboardFilterComparisonSchema: yup.ObjectSchema<DashboardFilterType> =
+  yup.object({
+    startDate: yup.string().required('Start date is required'),
+    endDate: yup.string().required('End date is required'),
+    analysisMode: yup.string().required('Analysis mode is required'),
+    comparisonType: yup.string().when('analysisMode', {
+      is: 'COMPARISON',
+      then: (schema) => schema.required('Compared by is required'),
+      otherwise: (schema) => schema.optional(),
+    }),
+    lokasiIds: yup.array().optional(),
+    flockIds: yup.array().optional(),
+    kandangIds: yup.array().optional(),
+    location: yup
+      .mixed<OptionType | OptionType[]>()
+      .required('Farm is required')
+      .test('is-not-empty', 'Farm is required', (value) => {
+        if (Array.isArray(value)) {
+          return value.length > 0;
+        }
+        return !!value;
+      }),
+    flock: yup.mixed<OptionType | OptionType[]>().when('comparisonType', {
+      is: (value: string) => value === 'FLOCK' || value === 'KANDANG',
+      then: (schema) =>
+        schema.test('is-required', 'Flock is required', (value) => {
+          if (Array.isArray(value)) {
+            return value.length > 0;
+          }
+          return !!value;
+        }),
+      otherwise: (schema) => schema.optional(),
+    }),
+    kandang: yup.mixed<OptionType | OptionType[]>().when('comparisonType', {
+      is: 'KANDANG',
+      then: (schema) =>
+        schema.test('is-required', 'Kandang is required', (value) => {
+          if (Array.isArray(value)) {
+            return value.length > 0;
+          }
+          return !!value;
+        }),
+      otherwise: (schema) => schema.optional(),
+    }),
+  });
+
+// Helper function untuk mendapatkan schema yang sesuai berdasarkan analysis mode
+export const getDashboardFilterSchema = (analysisMode?: string) => {
+  return analysisMode === 'OVERVIEW'
+    ? DashboardFilterOverviewSchema
+    : DashboardFilterComparisonSchema;
+};
+
+// Default schema
+export const DashboardFilterSchema = DashboardFilterComparisonSchema;
+
+export type DashboardFilterValues = yup.InferType<typeof DashboardFilterSchema>;

src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx

@@ -0,0 +1,100 @@
+import { Icon } from '@iconify/react';
+import { DashboardMeta } from '@/types/api/dashboard/dashboard';
+
+const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
+  return (
+    <div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
+      {/* Header with title skeleton */}
+      <div className='text-lg font-semibold'>
+        Performance{' '}
+        <Icon
+          icon='heroicons:information-circle'
+          width={20}
+          height={20}
+          className='inline text-neutral-500'
+        />
+      </div>
+
+      {/* Chart area with axes skeleton */}
+      <div className='relative mt-6'>
+        {/* Main chart container */}
+        <div className='flex gap-4'>
+          {/* Y-axis skeleton (left side) */}
+          <div className='flex flex-col justify-between py-4 space-y-4'>
+            {[1, 2, 3, 4, 5, 6].map((item) => (
+              <div
+                key={item}
+                className='h-4 w-12 bg-gray-100 rounded animate-pulse'
+              ></div>
+            ))}
+          </div>
+
+          {/* Chart content area */}
+          <div className='flex-1 relative'>
+            {/* Empty state centered in chart area */}
+            <div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
+              {!meta?.filters && (
+                <>
+                  {/* Filter icon */}
+                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                    <Icon
+                      icon='heroicons:funnel'
+                      className='text-white'
+                      width={24}
+                      height={24}
+                    />
+                  </div>
+
+                  {/* Empty state text */}
+                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                    No Filters Selected
+                  </h3>
+                  <p className='text-gray-500 text-sm text-center max-w-xs'>
+                    Please choose filters to narrow down your results and make
+                    your search easier.
+                  </p>
+                </>
+              )}
+              {meta?.filters && (
+                <>
+                  {/* Filter icon */}
+                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                    <Icon
+                      icon='heroicons:chart-bar'
+                      className='text-white'
+                      width={24}
+                      height={24}
+                    />
+                  </div>
+
+                  {/* Empty state text */}
+                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                    Data Not Yet Available
+                  </h3>
+                  <p className='text-gray-500 text-sm text-center max-w-xs'>
+                    Please change your filters to get the data.
+                  </p>
+                </>
+              )}
+            </div>
+
+            {/* Placeholder for chart height */}
+            <div className='h-64'></div>
+
+            {/* X-axis skeleton (bottom) */}
+            <div className='flex justify-between pt-4 border-t border-gray-100'>
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+                <div
+                  key={item}
+                  className='h-4 w-8 bg-gray-100 rounded animate-pulse'
+                ></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLineChartSkeleton;

src/components/pages/expense/ExpenseDetail.tsx

@@ -28,7 +28,7 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
 
     if (
       initialValues?.latest_approval &&
-      initialValues?.latest_approval.step_number >= 4 &&
+      initialValues?.latest_approval.step_number >= 5 &&
       initialValues.latest_approval.action !== 'REJECTED'
     ) {
       validTabs.push({

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -48,6 +48,13 @@ const ExpenseRealizationContent = ({
 
   const realizationDocumentsChangeHandler = (val: File[]) => {
     formik.setFieldTouched('documents', true);
+
+    const invalidFiles = val.filter((file) => file.size > 5 * 1024 * 1024);
+    if (invalidFiles.length > 0) {
+      toast.error('Ukuran dokumen maksimal 5 MB!');
+      return;
+    }
+
     formik.setFieldValue('documents', val);
   };
 

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -59,34 +59,40 @@ const ExpenseRequestContent = ({
 
   const isLatestApprovalRejectedOrDone =
     isLatestApprovalRejected ||
-    initialValues?.latest_approval.step_number === 5;
+    initialValues?.latest_approval.step_number === 6;
 
-  const isCurrentApprovalOnManager =
+  const isCurrentApprovalOnHeadArea =
     !isLatestApprovalRejected &&
     initialValues?.latest_approval.step_number === 1;
 
-  const isCurrentApprovalOnFinance =
+  const isCurrentApprovalOnUnitVicePresident =
     !isLatestApprovalRejected &&
     initialValues?.latest_approval.step_number === 2;
 
+  const isCurrentApprovalOnFinance =
+    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number === 3;
+
   const isCurrentApprovalOnRealization =
     !isLatestApprovalRejected &&
-    initialValues?.latest_approval.step_number === 4;
+    initialValues?.latest_approval.step_number === 5;
 
   const showEditButton =
-    initialValues?.latest_approval.step_number !== 5 &&
+    initialValues?.latest_approval.step_number !== 6 &&
     (initialValues?.latest_approval.step_number === 1 ||
       initialValues?.latest_approval.step_number === 2 ||
-      initialValues?.latest_approval.step_number === 3);
+      initialValues?.latest_approval.step_number === 3 ||
+      initialValues?.latest_approval.step_number === 4);
 
   const showRejectButton =
     !isLatestApprovalRejected &&
     (initialValues?.latest_approval.step_number === 1 ||
-      initialValues?.latest_approval.step_number === 2);
+      initialValues?.latest_approval.step_number === 2 ||
+      initialValues?.latest_approval.step_number === 3);
 
   const isExpenseCanBeRealized =
     !isLatestApprovalRejected &&
-    initialValues?.latest_approval.step_number === 3;
+    initialValues?.latest_approval.step_number === 4;
 
   // Modal hooks
   const deleteModal = useModal();
@@ -140,17 +146,17 @@ const ExpenseRequestContent = ({
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    try {
-      await ExpenseApi.delete(initialValues?.id as number);
+    const deleteResponse = await ExpenseApi.delete(initialValues?.id as number);
 
+    if (isResponseSuccess(deleteResponse)) {
       toast.success('Berhasil menghapus data biaya operasional!');
       router.push('/expense');
-    } catch (error) {
+    } else {
       toast.error('Gagal menghapus data biaya operasional!');
-    } finally {
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
     }
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
   };
 
   const confirmationModalCompleteClickHandler = async () => {
@@ -174,8 +180,15 @@ const ExpenseRequestContent = ({
 
     let approveResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isCurrentApprovalOnManager) {
-      approveResponse = await ExpenseApi.approveManager(
+    if (isCurrentApprovalOnHeadArea) {
+      approveResponse = await ExpenseApi.approveHeadArea(
+        initialValues.id,
+        notes
+      );
+    }
+
+    if (isCurrentApprovalOnUnitVicePresident) {
+      approveResponse = await ExpenseApi.approveUnitVicePresident(
         initialValues.id,
         notes
       );
@@ -207,8 +220,15 @@ const ExpenseRequestContent = ({
 
     let rejectResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isCurrentApprovalOnManager) {
-      rejectResponse = await ExpenseApi.rejectManager(initialValues.id, notes);
+    if (isCurrentApprovalOnHeadArea) {
+      rejectResponse = await ExpenseApi.rejectHeadArea(initialValues.id, notes);
+    }
+
+    if (isCurrentApprovalOnUnitVicePresident) {
+      rejectResponse = await ExpenseApi.rejectUnitVicePresident(
+        initialValues.id,
+        notes
+      );
     }
 
     if (isCurrentApprovalOnFinance) {
@@ -231,6 +251,13 @@ const ExpenseRequestContent = ({
 
   const requestDocumentsChangeHandler = (val: File[]) => {
     formik.setFieldTouched('documents', true);
+
+    const invalidFiles = val.filter((file) => file.size > 5 * 1024 * 1024);
+    if (invalidFiles.length > 0) {
+      toast.error('Ukuran dokumen maksimal 5 MB!');
+      return;
+    }
+
     formik.setFieldValue('documents', val);
   };
 
@@ -255,8 +282,8 @@ const ExpenseRequestContent = ({
           {/* TODO: apply RBAC */}
 
           <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
-            {isCurrentApprovalOnManager && (
-              <RequirePermission permissions='lti.expense.approve.manager'>
+            {isCurrentApprovalOnHeadArea && (
+              <RequirePermission permissions='lti.expense.approve.head_area'>
                 <Button
                   variant='outline'
                   color='info'
@@ -264,7 +291,21 @@ const ExpenseRequestContent = ({
                   className='w-full sm:w-fit'
                 >
                   <Icon icon='lucide-lab:farm' width={24} height={24} />
-                  Approve Manager
+                  Approve Head Area
+                </Button>
+              </RequirePermission>
+            )}
+
+            {isCurrentApprovalOnUnitVicePresident && (
+              <RequirePermission permissions='lti.expense.approve.unit_vice_president'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='tdesign:money' width={24} height={24} />
+                  Approve Unit Vice President
                 </Button>
               </RequirePermission>
             )}
@@ -304,7 +345,8 @@ const ExpenseRequestContent = ({
             {showRejectButton && (
               <RequirePermission
                 permissions={[
-                  'lti.expense.approve.manager',
+                  'lti.expense.approve.head_area',
+                  'lti.expense.approve.unit_vice_president',
                   'lti.expense.approve.finance',
                 ]}
               >
@@ -454,8 +496,8 @@ const ExpenseRequestContent = ({
                   <th>:</th>
                   <td>
                     {formatCurrency(
-                      initialValues?.latest_approval.step_number === 4 ||
-                        initialValues?.latest_approval.step_number === 5
+                      initialValues?.latest_approval.step_number === 5 ||
+                        initialValues?.latest_approval.step_number === 6
                         ? (initialValues?.total_realisasi ?? 0)
                         : (initialValues?.total_pengajuan ?? 0)
                     )}

src/components/pages/expense/ExpenseStatusBadge.tsx

@@ -21,7 +21,7 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
 
   switch (latestApprovalStepNumber) {
     case 1:
-      expenseStatusPillBadgeColor = 'yellow';
+      expenseStatusPillBadgeColor = 'gray';
       break;
 
     case 2:
@@ -33,12 +33,16 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
       break;
 
     case 4:
-      expenseStatusPillBadgeColor = 'red';
+      expenseStatusPillBadgeColor = 'yellow';
       break;
 
     case 5:
       expenseStatusPillBadgeColor = 'green';
       break;
+
+    case 6:
+      expenseStatusPillBadgeColor = 'green';
+      break;
   }
 
   if (isLatestApprovalRejected) {

src/components/pages/expense/ExpensesTable.tsx

@@ -55,15 +55,16 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   const showEditButton =
-    props.row.original.latest_approval.step_number !== 5 &&
+    props.row.original.latest_approval.step_number !== 6 &&
     (props.row.original.latest_approval.step_number === 1 ||
       props.row.original.latest_approval.step_number === 2 ||
-      props.row.original.latest_approval.step_number === 3);
+      props.row.original.latest_approval.step_number === 3 ||
+      props.row.original.latest_approval.step_number === 4);
 
   // TODO: apply RBAC
   const showRealizationButton =
     props.row.original.latest_approval.action !== 'REJECTED' &&
-    props.row.original.latest_approval.step_number === 3;
+    props.row.original.latest_approval.step_number === 4;
 
   return (
     <RowOptionsMenuWrapper type={type}>
@@ -193,7 +194,7 @@ const ExpensesTable = () => {
     parseInt(item)
   );
 
-  const isAllSelectedRowLatestApprovalOnManager = useMemo(() => {
+  const isAllSelectedRowLatestApprovalOnHeadArea = useMemo(() => {
     return selectedRowIds.every((rowId) => {
       if (!isResponseSuccess(expenses)) return false;
 
@@ -202,11 +203,28 @@ const ExpensesTable = () => {
       const isLatestApprovalRejected =
         expenseItem?.latest_approval.action === 'REJECTED';
 
-      const isCurrentApprovalOnManager =
+      const isCurrentApprovalOnHeadArea =
         !isLatestApprovalRejected &&
         expenseItem?.latest_approval.step_number === 1;
 
-      return isCurrentApprovalOnManager;
+      return isCurrentApprovalOnHeadArea;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const isAllSelectedRowLatestApprovalOnUnitVicePresident = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnUnitVicePresident =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 2;
+
+      return isCurrentApprovalOnUnitVicePresident;
     });
   }, [expenses, selectedRowIds]);
 
@@ -221,7 +239,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnFinance =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 2;
+        expenseItem?.latest_approval.step_number === 3;
 
       return isCurrentApprovalOnFinance;
     });
@@ -238,7 +256,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnRealization =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 4;
+        expenseItem?.latest_approval.step_number === 5;
 
       return isCurrentApprovalOnRealization;
     });
@@ -397,7 +415,7 @@ const ExpensesTable = () => {
   ) => {
     return (
       row.original.latest_approval.action !== 'REJECTED' &&
-      row.original.latest_approval.step_number !== 5
+      row.original.latest_approval.step_number !== 6
     );
   };
 
@@ -420,11 +438,19 @@ const ExpensesTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ExpenseApi.delete(selectedExpense?.id as number);
-    refreshExpenses();
+    const deleteResponse = await ExpenseApi.delete(
+      selectedExpense?.id as number
+    );
+
+    if (isResponseSuccess(deleteResponse)) {
+      refreshExpenses();
+      deleteModal.closeModal();
+      toast.success('Berhasil menghapus biaya operasional!');
+    } else {
+      deleteModal.closeModal();
+      toast.error('Gagal menghapus biaya operasional!');
+    }
 
-    deleteModal.closeModal();
-    toast.success('Berhasil menghapus biaya operasional!');
     setIsDeleteLoading(false);
   };
 
@@ -433,8 +459,13 @@ const ExpensesTable = () => {
 
     let bulkApproveResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isAllSelectedRowLatestApprovalOnManager) {
-      bulkApproveResponse = await ExpenseApi.bulkApproveManager(
+    if (isAllSelectedRowLatestApprovalOnHeadArea) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveHeadArea(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnUnitVicePresident) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveUnitVicePresident(
         selectedRowIds,
         notes
       );
@@ -470,8 +501,13 @@ const ExpensesTable = () => {
 
     let bulkRejectResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isAllSelectedRowLatestApprovalOnManager) {
-      bulkRejectResponse = await ExpenseApi.bulkRejectManager(
+    if (isAllSelectedRowLatestApprovalOnHeadArea) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectHeadArea(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnUnitVicePresident) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectUnitVicePresident(
         selectedRowIds,
         notes
       );
@@ -586,16 +622,31 @@ const ExpensesTable = () => {
 
                 {selectedRowIds.length > 0 && (
                   <>
-                    <RequirePermission permissions='lti.expense.approve.manager'>
+                    <RequirePermission permissions='lti.expense.approve.head_area'>
                       <Button
                         variant='outline'
                         color='info'
                         onClick={bulkApproveClickHandler}
-                        disabled={!isAllSelectedRowLatestApprovalOnManager}
+                        disabled={!isAllSelectedRowLatestApprovalOnHeadArea}
                         className='w-full sm:w-fit'
                       >
                         <Icon icon='lucide-lab:farm' width={24} height={24} />
-                        Approve Manager
+                        Approve Head Area
+                      </Button>
+                    </RequirePermission>
+
+                    <RequirePermission permissions='lti.expense.approve.unit_vice_president'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnUnitVicePresident
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Unit Vice President
                       </Button>
                     </RequirePermission>
 
@@ -614,7 +665,8 @@ const ExpensesTable = () => {
 
                     <RequirePermission
                       permissions={[
-                        'lti.expense.approve.manager',
+                        'lti.expense.approve.head_area',
+                        'lti.expense.approve.unit_vice_president',
                         'lti.expense.approve.finance',
                       ]}
                     >
@@ -623,7 +675,8 @@ const ExpensesTable = () => {
                         color='error'
                         onClick={bulkRejectClickHandler}
                         disabled={
-                          !isAllSelectedRowLatestApprovalOnManager &&
+                          !isAllSelectedRowLatestApprovalOnHeadArea &&
+                          !isAllSelectedRowLatestApprovalOnUnitVicePresident &&
                           !isAllSelectedRowLatestApprovalOnFinance
                         }
                         className='w-full sm:w-fit'

src/components/pages/expense/RealizationStatusBadge.tsx

@@ -9,7 +9,7 @@ interface RealizationStatusBadgeProps {
 const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
   const isLatestApprovalRejected = approval?.action === 'REJECTED';
 
-  const isExpenseRealized = approval?.step_number && approval.step_number >= 4;
+  const isExpenseRealized = approval?.step_number && approval.step_number >= 5;
 
   const realizationStatus = isExpenseRealized
     ? 'Sudah Realisasi'

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -223,6 +223,13 @@ const ExpenseRealizationForm = ({
 
   const realizationDocumentsChangeHandler = (val: File[]) => {
     formik.setFieldTouched('documents', true);
+
+    const invalidFiles = val.filter((file) => file.size > 5 * 1024 * 1024);
+    if (invalidFiles.length > 0) {
+      toast.error('Ukuran dokumen maksimal 5 MB!');
+      return;
+    }
+
     formik.setFieldValue('documents', val);
   };
 

src/components/pages/expense/form/ExpenseRequestForm.schema.ts

@@ -7,18 +7,19 @@ type ExpenseFormSchemaType = {
   category?: {
     value: 'BOP' | 'NON-BOP';
     label: 'BOP' | 'NON-BOP';
-  };
+  } | null;
   location?: {
     value: number;
     label: string;
-  };
+  } | null;
   location_id: number;
   transaction_date?: string;
   kandangs?: { id?: number; name?: string }[];
   supplier?: {
     value: number;
     label: string;
-  };
+  } | null;
+  supplier_id: number;
   existing_documents?: { id: number; name: string; url: string }[];
   deleted_documents?: number[];
   documents?: File[];
@@ -28,7 +29,8 @@ type ExpenseFormSchemaType = {
       nonstock?: {
         value: number;
         label: string;
-      };
+      } | null;
+      nonstock_id?: number;
       quantity?: number;
       price?: number;
       notes?: string;
@@ -41,16 +43,24 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     category: Yup.object({
       value: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
       label: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
-    }).required('Kategori wajib diisi!'),
+    })
+      .nullable()
+      .optional(),
 
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).required('Lokasi wajib diisi!'),
+    })
+      .nullable()
+      .optional(),
 
-    location_id: Yup.number().min(1).required('Lokasi wajib diisi!'),
+    location_id: Yup.number()
+      .required('Lokasi wajib diisi!')
+      .min(1, 'Lokasi wajib diisi!')
+      .typeError('Lokasi wajib diisi!'),
 
     transaction_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
+
     kandangs: Yup.array()
       .of(
         Yup.object({
@@ -63,15 +73,24 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).required('Vendor wajib diisi!'),
+    })
+      .nullable()
+      .optional(),
 
-    existing_documents: Yup.array().of(
-      Yup.object({
-        id: Yup.number().required(),
-        name: Yup.string().required(),
-        url: Yup.string().required(),
-      })
-    ),
+    supplier_id: Yup.number()
+      .required('Vendor wajib diisi!')
+      .min(1, 'Vendor wajib diisi!')
+      .typeError('Vendor wajib diisi!'),
+
+    existing_documents: Yup.array()
+      .of(
+        Yup.object({
+          id: Yup.number().required(),
+          name: Yup.string().required(),
+          url: Yup.string().required(),
+        })
+      )
+      .optional(),
 
     deleted_documents: Yup.array().of(Yup.number().required()).optional(),
 
@@ -87,9 +106,17 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
                 nonstock: Yup.object({
                   value: Yup.number().min(1).required(),
                   label: Yup.string().required(),
-                }).required('Nonstock wajib diisi!'),
-                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
-                price: Yup.number().required('Harga satuan wajib diisi!'),
+                }).nullable(),
+                nonstock_id: Yup.number()
+                  .required('Nonstock wajib diisi!')
+                  .min(1, 'Nonstock wajib diisi!')
+                  .typeError('Nonstock wajib diisi!'),
+                quantity: Yup.number()
+                  .required('Total kuantitas wajib diisi!')
+                  .typeError('Total kuantitas wajib diisi!'),
+                price: Yup.number()
+                  .required('Harga satuan wajib diisi!')
+                  .typeError('Harga satuan wajib diisi!'),
                 notes: Yup.string(),
               })
             )
@@ -104,7 +131,16 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
 export const UpdateExpenseRequestFormSchema = ExpenseRequestFormSchema;
 
 export const UploadRequestDocumentsFormSchema = Yup.object({
-  documents: Yup.array().of(Yup.mixed<File>().required()).required(),
+  documents: Yup.array()
+    .of(
+      Yup.mixed<File>()
+        .required()
+        .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
+          if (!value || !(value instanceof File)) return true;
+          return value.size <= 5 * 1024 * 1024;
+        })
+    )
+    .required(),
 });
 
 export type ExpenseRequestFormValues = Yup.InferType<
@@ -124,13 +160,13 @@ export const getExpenseFormInitialValues = (
           value: initialValues.category,
           label: initialValues.category,
         }
-      : undefined,
+      : null,
     location: initialValues?.location
       ? {
           value: initialValues.location.id,
           label: initialValues.location.name,
         }
-      : undefined,
+      : null,
     location_id: Number(initialValues?.location.id || 0),
     transaction_date: initialValues?.transaction_date
       ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
@@ -144,7 +180,8 @@ export const getExpenseFormInitialValues = (
           value: initialValues.supplier.id,
           label: initialValues.supplier.name,
         }
-      : undefined,
+      : null,
+    supplier_id: initialValues?.supplier?.id ?? 0,
     existing_documents: initialValues?.documents?.map((doc) => {
       const path = doc.path.startsWith('/') ? doc.path.slice(1) : doc.path;
       return {
@@ -164,12 +201,25 @@ export const getExpenseFormInitialValues = (
                   value: expenseItem.nonstock.id,
                   label: expenseItem.nonstock.name,
                 },
+                nonstock_id: expenseItem.nonstock.id,
                 quantity: expenseItem.qty,
                 price: expenseItem.price,
                 notes: expenseItem.note,
               }))
             : [],
         }))
-      : [],
+      : [
+          {
+            cost_items: [
+              {
+                nonstock: null,
+                nonstock_id: 0,
+                quantity: undefined,
+                price: undefined,
+                notes: '',
+              },
+            ],
+          },
+        ],
   };
 };

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -37,6 +37,8 @@ import { cn, sleep } from '@/lib/helper';
 import { LocationApi, SupplierApi } from '@/services/api/master-data';
 import { ACCEPTED_FILE_TYPE } from '@/config/constant';
 import { Supplier } from '@/types/api/master-data/supplier';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface ExpenseFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -55,6 +57,7 @@ const ExpenseRequestForm = ({
   const rejectModal = useModal();
 
   const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const createExpenseHandler = useCallback(
     async (payload: CreateExpensePayload) => {
@@ -201,7 +204,8 @@ const ExpenseRequestForm = ({
       {
         cost_items: [
           {
-            nonstock: undefined,
+            nonstock: null,
+            nonstock_id: 0,
             quantity: undefined,
             price: undefined,
             notes: '',
@@ -223,7 +227,8 @@ const ExpenseRequestForm = ({
         {
           cost_items: [
             {
-              nonstock: undefined,
+              nonstock: null,
+              nonstock_id: 0,
               quantity: undefined,
               price: undefined,
               notes: '',
@@ -248,7 +253,8 @@ const ExpenseRequestForm = ({
         kandang_id: kandangItem.id,
         cost_items: existingExpenseNonstock?.cost_items || [
           {
-            nonstock: undefined,
+            nonstock: null,
+            nonstock_id: 0,
             quantity: undefined,
             price: undefined,
             notes: '',
@@ -263,10 +269,20 @@ const ExpenseRequestForm = ({
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('supplier', true);
     formik.setFieldValue('supplier', val);
+
+    const supplierId = Array.isArray(val) ? val[0]?.value : val?.value;
+    formik.setFieldValue('supplier_id', supplierId ?? 0);
   };
 
   const requestDocumentsChangeHandler = (val: File[]) => {
     formik.setFieldTouched('documents', true);
+
+    const invalidFiles = val.filter((file) => file.size > 5 * 1024 * 1024);
+    if (invalidFiles.length > 0) {
+      toast.error('Ukuran dokumen maksimal 5 MB!');
+      return;
+    }
+
     formik.setFieldValue('documents', val);
   };
 
@@ -322,6 +338,22 @@ const ExpenseRequestForm = ({
     router.push('/expense');
   };
 
+  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);
+  };
+
   useEffect(() => {
     formikSetValues(getExpenseFormInitialValues(initialValues));
   }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
@@ -347,10 +379,27 @@ const ExpenseRequestForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {expenseFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{expenseFormErrorMessage}</span>
+            </div>
+          )}
+
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
           <div className='grid grid-cols-12 gap-4'>
             <SelectInput
               label='Kategori'
@@ -535,17 +584,6 @@ const ExpenseRequestForm = ({
               </div>
             )}
 
-            {expenseFormErrorMessage && (
-              <div role='alert' className='alert alert-error w-full'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{expenseFormErrorMessage}</span>
-              </div>
-            )}
-
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -560,7 +598,7 @@ const ExpenseRequestForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx

@@ -25,7 +25,7 @@ interface ExpenseRequestKandangDetailExpenseProps {
   location?: {
     value: number;
     label: string;
-  };
+  } | null;
   className?: {
     wrapper?: string;
   };
@@ -59,13 +59,20 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       val
     );
+
+    const nonstockId = Array.isArray(val) ? val[0]?.value : val?.value;
+    formik.setFieldValue(
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock_id`,
+      nonstockId ?? 0
+    );
   };
 
   const addExpenseItemHandler = (kandangExpenseIdx: number) => {
     const newExpensesValue = [
       ...formik.values.expense_nonstocks[kandangExpenseIdx].cost_items,
       {
-        nonstock: undefined,
+        nonstock: null,
+        nonstock_id: 0,
         price: undefined,
         quantity: undefined,
         notes: '',

src/components/pages/expense/pdf/ExpensePDF.tsx

@@ -198,7 +198,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
     expense?.latest_approval?.action === 'REJECTED';
   const isExpenseRealized =
     expense?.latest_approval?.step_number &&
-    expense?.latest_approval.step_number >= 4;
+    expense?.latest_approval.step_number >= 5;
 
   const realizationStatus = isExpenseRealized
     ? 'Sudah Realisasi'
@@ -242,8 +242,8 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
     {
       label: 'Nominal Biaya',
       value: formatCurrency(
-        expense?.latest_approval.step_number === 4 ||
-          expense?.latest_approval.step_number === 5
+        expense?.latest_approval.step_number === 5 ||
+          expense?.latest_approval.step_number === 6
           ? (expense?.total_realisasi ?? 0)
           : (expense?.total_pengajuan ?? 0)
       ),

src/components/pages/finance/FinanceDetail.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import {
   FINANCE_INITIAL_BALANCE_STATUS,
   FINANCE_TRANSACTION_STATUS,
+  FINANCE_INJECTION_STATUS,
 } from '@/config/constant';
 import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { FinanceApi } from '@/services/api/finance';
@@ -33,7 +34,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Pihak',
-      value: finance.party.name,
+      value: finance.party.id ? finance.party.name : '-',
     },
     {
       label: 'Tanggal',
@@ -51,7 +52,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
   const informasiTransfer = [
     {
       label: 'No. Referensi',
-      value: finance.reference_number,
+      value: finance.reference_number ?? '-',
     },
     {
       label: 'Nomor Rekening',
@@ -69,7 +70,16 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
       label: 'Sisa',
       value: formatCurrency(finance.income_amount),
     },
-  ];
+  ].filter((item) => {
+    // Hide party account number row if transaction type is INJECTION
+    if (
+      FINANCE_INJECTION_STATUS.includes(finance.transaction_type) &&
+      item.label === `Rekening ${formatTitleCase(finance.party.type)}`
+    ) {
+      return false;
+    }
+    return true;
+  });
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -162,7 +172,19 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
             </Button>
           </RequirePermission>
         )}
-        <RequirePermission permissions='lti.finance.transaction.delete'>
+        {FINANCE_INJECTION_STATUS.includes(finance.transaction_type) && (
+          <RequirePermission permissions='lti.finance.injections.update'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              href={`/finance/detail/edit/injection?financeId=${finance.id}`}
+            >
+              <Icon icon='mdi:pencil-outline' />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
+        <RequirePermission permissions='lti.finance.transactions.delete'>
           <Button
             color='error'
             className='min-w-24'

src/components/pages/finance/FinanceTable.tsx

@@ -49,7 +49,14 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <RequirePermission permissions='lti.finance.transaction.detail'>
+      <RequirePermission
+        permissions={[
+          'lti.finance.transactions.detail',
+          'lti.finance.initial_balances.detail',
+          'lti.finance.injections.detail',
+          'lti.finance.payments.detail',
+        ]}
+      >
         <Button
           href={`/finance/detail?financeId=${props.row.original.id}`}
           variant='ghost'
@@ -109,7 +116,7 @@ const RowOptionsMenu = ({
         </RequirePermission>
       )}
 
-      <RequirePermission permissions='lti.finance.transaction.delete'>
+      <RequirePermission permissions='lti.finance.transactions.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'

src/components/pages/finance/add/FormFinanceAdd.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
-import Card from '@/components/Card';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
 import NumberInput from '@/components/input/NumberInput';
@@ -21,6 +21,7 @@ import {
 } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatTitleCase } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { FinanceApi } from '@/services/api/finance';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import {
@@ -104,6 +105,9 @@ const FormFinanceAdd = ({
     },
   });
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // ===== Options =====
   const {
     options: partyOptions,
@@ -180,7 +184,7 @@ const FormFinanceAdd = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Data Keuangan`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Jenis Transaksi'
               placeholder='Pilih jenis transaksi'
@@ -188,6 +192,8 @@ const FormFinanceAdd = ({
               value={formik.values.party_type_option}
               onChange={(value) => {
                 formik.setFieldValue('party_type_option', value);
+                formik.setFieldValue('party_id_option', null);
+                formik.setFieldValue('party_account_number', '');
               }}
               isError={Boolean(
                 formik.touched.party_type_option &&
@@ -382,6 +388,7 @@ const FormFinanceAdd = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
 import {
@@ -17,6 +15,7 @@ import {
   FINANCE_INITIAL_BALANCE_TYPE_OPTIONS,
   FINANCE_PARTY_TYPE_OPTIONS,
 } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatTitleCase } from '@/lib/helper';
 import { FinanceApi } from '@/services/api/finance';
@@ -173,6 +172,9 @@ const FormFinanceAddInitialBalance = ({
     [router]
   );
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl mx-auto'>
@@ -181,7 +183,7 @@ const FormFinanceAddInitialBalance = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Saldo Awal`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Jenis Pihak'
               placeholder='Pilih jenis pihak'
@@ -189,6 +191,8 @@ const FormFinanceAddInitialBalance = ({
               value={formik.values.party_type_option}
               onChange={(value) => {
                 formik.setFieldValue('party_type_option', value);
+                formik.setFieldValue('party_id_option', null);
+                formik.setFieldValue('party_account_number', '');
               }}
               isError={Boolean(
                 formik.touched.party_type_option &&
@@ -350,6 +354,7 @@ const FormFinanceAddInitialBalance = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'

src/components/pages/finance/add/injection/FormFinanceInjection.tsx

@@ -1,18 +1,17 @@
 'use client';
 
 import Button from '@/components/Button';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import {
   InjectionFormSchema,
   InjectionFormValues,
 } from '@/components/pages/finance/add/injection/FormFinanceInjection.schema';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate } from '@/lib/helper';
 import { FinanceApi } from '@/services/api/finance';
@@ -128,6 +127,9 @@ const FormFinanceInjection = ({
     [router]
   );
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl mx-auto'>
@@ -136,7 +138,7 @@ const FormFinanceInjection = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Injeksi Dana`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Bank'
               placeholder='Pilih bank'
@@ -223,6 +225,7 @@ const FormFinanceInjection = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -15,6 +15,7 @@ import { Icon } from '@iconify/react';
 import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const InventoryAdjustmentTable = () => {
   const {

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts

@@ -1,26 +1,42 @@
 import * as Yup from 'yup';
+import { OptionType } from '@/components/input/SelectInput';
 
 export const InventoryAdjustmentFormSchema = Yup.object({
-  product_category: Yup.object({
-    value: Yup.number().required('ID Kategori Produk wajib diisi!'),
-    label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
-  }).nullable(),
+  product_category: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Kategori Produk wajib diisi!',
+      (value) => value !== null && value !== undefined
+    ),
 
   product_category_id: Yup.number().nullable(),
 
-  product: Yup.object({
-    value: Yup.number().required('ID Produk wajib diisi!'),
-    label: Yup.string().required('Nama Produk wajib diisi!'),
-  }).nullable(),
+  product: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Produk wajib diisi!',
+      (value) => value !== null && value !== undefined
+    ),
 
-  product_id: Yup.number().nullable(),
+  product_id: Yup.number()
+    .nullable()
+    .required('Produk wajib diisi!')
+    .min(1, 'Produk wajib diisi!'),
 
-  warehouse: Yup.object({
-    value: Yup.number().required('ID Gudang wajib diisi!'),
-    label: Yup.string().required('Nama Gudang wajib diisi!'),
-  }).nullable(),
+  warehouse: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Warehouse wajib diisi!',
+      (value) => value !== null && value !== undefined
+    ),
 
-  warehouse_id: Yup.number().nullable(),
+  warehouse_id: Yup.number()
+    .nullable()
+    .required('Warehouse wajib diisi!')
+    .min(1, 'Warehouse wajib diisi!'),
 
   transaction_type: Yup.string()
     .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')

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

@@ -26,6 +26,8 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
 import { RadioGroup } from '@/components/input/RadioInput';
 import TextArea from '@/components/input/TextArea';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface InventoryAdjustmentFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -125,6 +127,7 @@ const InventoryAdjustmentForm = ({
 
   const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
     search: '',
+    limit: '100',
   }).toString()}`;
   const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
     warehouseUrl,
@@ -244,6 +247,9 @@ const InventoryAdjustmentForm = ({
     return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
   };
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // Render
   return (
     <>
@@ -265,7 +271,7 @@ const InventoryAdjustmentForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -389,6 +395,7 @@ const InventoryAdjustmentForm = ({
               readOnly={type === 'detail'}
             />
           </div>
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
               <div className='flex flex-row justify-end gap-2'>
@@ -404,11 +411,7 @@ const InventoryAdjustmentForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={
-                    !formik.isValid ||
-                    formik.isSubmitting ||
-                    formik.values.product == undefined
-                  }
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

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

@@ -1,5 +1,5 @@
 import * as Yup from 'yup';
-import { Movement } from '@/types/api/inventory/movement';
+import { Movement, MovementDocument } from '@/types/api/inventory/movement';
 
 type MovementFormSchemaType = {
   transfer_reason: string;
@@ -29,7 +29,7 @@ type MovementFormSchemaType = {
   deliveries: {
     delivery_cost?: number | string;
     delivery_cost_per_item?: number | string;
-    document?: File | string | null;
+    document?: File | MovementDocument | null;
     document_path?: string | null;
     driver_name: string;
     vehicle_plate: string;
@@ -61,7 +61,7 @@ export type ProductSchema = {
 export type DeliverySchema = {
   delivery_cost?: number | string;
   delivery_cost_per_item?: number | string;
-  document?: File | string | null;
+  document?: File | MovementDocument | null;
   document_path?: string | null;
   driver_name: string;
   vehicle_plate: string;
@@ -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,15 +133,14 @@ 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 | string>()
+  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 (typeof value === 'string') return true;
-      if (value instanceof File) return value.size <= 2 * 1024 * 1024;
-      return false;
+      if (value instanceof File) return value.size <= 5 * 1024 * 1024;
+      return true;
     }),
   driver_name: Yup.string().required('Nama sopir wajib diisi!'),
   vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
@@ -143,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!')
@@ -162,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(),
@@ -171,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',
@@ -227,41 +237,62 @@ export const getMovementFormInitialValues = (
         }
       : null,
     destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
-    products:
-      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) => ({
-        delivery_cost: d.shipping_cost_total ?? undefined,
-        delivery_cost_per_item: d.shipping_cost_item ?? undefined,
-        document_number: d.document_number ?? '',
-        document: d.document_path ?? null,
-        document_path: d.document_path ?? null,
-        driver_name: d.driver_name ?? '',
-        vehicle_plate: d.vehicle_plate ?? '',
-        supplier: d.supplier
-          ? { value: d.supplier.id, label: d.supplier.name }
-          : null,
-        supplier_id: d.supplier?.id ?? 0,
-        products:
-          d.items?.map((item) => {
-            const productData = detailIdToProductId.get(
-              item.stock_transfer_detail_id
-            );
-            return {
-              product: productData
-                ? { value: productData.id, label: productData.name }
-                : null,
-              product_id: productData?.id ?? 0,
-              product_qty: item.quantity,
-            };
-          }) ?? [],
-      })) ?? [],
+    products: initialValues?.details?.map((detail) => ({
+      product: {
+        value: detail.product.id,
+        label: detail.product.name,
+      },
+      product_id: detail.product.id,
+      product_qty: detail.quantity,
+    })) ?? [
+      {
+        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: d.document ?? null,
+      document_path: d.document_path ?? null,
+      driver_name: d.driver_name ?? '',
+      vehicle_plate: d.vehicle_plate ?? '',
+      supplier: d.supplier
+        ? { value: d.supplier.id, label: d.supplier.name }
+        : null,
+      supplier_id: d.supplier?.id ?? 0,
+      products:
+        d.items?.map((item) => {
+          const productData = detailIdToProductId.get(
+            item.stock_transfer_detail_id
+          );
+          return {
+            product: productData
+              ? { value: productData.id, label: productData.name }
+              : null,
+            product_id: productData?.id ?? 0,
+            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

@@ -35,6 +35,9 @@ import FileInput from '@/components/input/FileInput';
 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';
@@ -52,19 +55,12 @@ 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(
-    async (payload: CreateMovementPayload, documents: File[] = []) => {
-      const formData = new FormData();
-      formData.append('data', JSON.stringify(payload));
-      documents.forEach((file, index) => {
-        formData.append(`documents[${index}]`, file);
-      });
-
-      const res = await MovementApi.create(
-        formData as unknown as CreateMovementPayload
-      );
+    async (payload: CreateMovementPayload) => {
+      const res = await MovementApi.createMovement(payload);
       if (isResponseError(res)) {
         setMovementFormErrorMessage(res.message);
         return;
@@ -193,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) {
-          documents.push(d.document);
-          documentIndex = documents.length - 1;
+          const fileName = d.document.name;
+
+          if (documentNameToIndex.has(fileName)) {
+            documentIndex = documentNameToIndex.get(fileName)!;
+          } else {
+            documents.push(d.document);
+            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 {
@@ -206,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,
@@ -218,20 +246,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       });
 
       const payload: CreateMovementPayload = {
-        transfer_reason: values.transfer_reason,
-        transfer_date: values.transfer_date,
-        source_warehouse_id: values.source_warehouse_id,
-        destination_warehouse_id: values.destination_warehouse_id,
-        products: values.products.map((p) => ({
-          product_id: p.product_id,
-          product_qty: parseInt(p.product_qty.toString()) || 0,
-        })),
-        deliveries: deliveriesPayload,
+        data: {
+          transfer_reason: values.transfer_reason,
+          transfer_date: values.transfer_date,
+          source_warehouse_id: values.source_warehouse_id,
+          destination_warehouse_id: values.destination_warehouse_id,
+          products: values.products.map((p) => ({
+            product_id: p.product_id,
+            product_qty: parseInt(p.product_qty.toString()) || 0,
+          })),
+          deliveries: deliveriesPayload,
+        },
+        documents: documents.length > 0 ? documents : undefined,
       };
 
       switch (type) {
         case 'add':
-          await createMovementHandler(payload, documents);
+          await createMovementHandler(payload);
           break;
       }
     },
@@ -765,8 +796,36 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       type !== 'edit' &&
       type !== 'detail'
     ) {
-      formik.setFieldValue('products', []);
-      formik.setFieldValue('deliveries', []);
+      if (formik.values.products.length === 0) {
+        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]);
 
@@ -795,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'>
@@ -814,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'
@@ -1101,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>
@@ -1110,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>
@@ -1123,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)}
@@ -1315,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>
@@ -1324,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>
@@ -1333,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>
@@ -1342,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>
@@ -1352,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>
@@ -1361,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>
@@ -1370,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>
@@ -1383,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)}
@@ -1537,37 +1631,64 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         {type === 'detail' ? (
                           <>
                             <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                color='primary'
-                                className='w-full min-w-52 flex items-center justify-center gap-2'
-                                disabled={!delivery.document_path}
-                                href={delivery.document_path ?? undefined}
-                                target='_blank'
-                                rel='noopener noreferrer'
-                              >
-                                {delivery.document_path ? (
-                                  <>
-                                    <Icon
-                                      icon='material-symbols:file-open-outline'
-                                      width={20}
-                                      height={20}
-                                    />
-                                    Lihat Dokumen
-                                  </>
-                                ) : (
-                                  '-'
-                                )}
-                              </Button>
+                              {delivery.document_path ? (
+                                <Button
+                                  color='primary'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2'
+                                  href={`${S3_PUBLIC_BASE_URL}/${delivery.document_path.startsWith('/') ? delivery.document_path.slice(1) : delivery.document_path}`}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                >
+                                  <Icon
+                                    icon='material-symbols:file-open-outline'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  Lihat Dokumen
+                                </Button>
+                              ) : delivery.document &&
+                                delivery.document instanceof File === false ? (
+                                <Button
+                                  color='primary'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2'
+                                  href={`${S3_PUBLIC_BASE_URL}/${delivery.document.path.startsWith('/') ? delivery.document.path.slice(1) : delivery.document.path}`}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                >
+                                  <Icon
+                                    icon='material-symbols:file-open-outline'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  <span className='truncate max-w-[200px]'>
+                                    {delivery.document.name}
+                                  </span>
+                                </Button>
+                              ) : (
+                                <Button
+                                  color='neutral'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2 cursor-not-allowed'
+                                  disabled
+                                >
+                                  <Icon
+                                    icon='material-symbols:description'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  Tidak ada dokumen
+                                </Button>
+                              )}
                             </div>
                           </>
                         ) : (
                           <FileInput
+                            accept='.pdf,.jpg,.jpeg,.png'
                             name={`deliveries.${idx}.document`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];
                               if (file) {
-                                if (file.size > 2 * 1024 * 1024) {
-                                  toast.error('Ukuran dokumen maksimal 2 MB!');
+                                if (file.size > 5 * 1024 * 1024) {
+                                  toast.error('Ukuran dokumen maksimal 5 MB!');
                                   e.target.value = '';
                                   return;
                                 }
@@ -1724,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 &&
@@ -1737,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/marketing/MarketingTable.tsx

@@ -2,7 +2,10 @@
 
 import Button from '@/components/Button';
 import CheckboxInput from '@/components/input/CheckboxInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -28,6 +31,8 @@ import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useAuth } from '@/services/hooks/useAuth';
+import { CustomerApi, ProductApi } from '@/services/api/master-data';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -64,47 +69,51 @@ const RowsOptionsMenu = ({
           </Button>
         </RequirePermission>
         {props.row.original.latest_approval.step_number != 1 && (
-          <RequirePermission
-            permissions={
-              props.row.original.latest_approval.step_number == 3
-                ? 'lti.marketing.delivery_order.update'
-                : 'lti.marketing.delivery_order.create'
-            }
-          >
-            <Button
-              href={
+          <>
+            <RequirePermission
+              permissions={
                 props.row.original.latest_approval.step_number == 3
-                  ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
-                  : props.row.original.latest_approval.step_number == 2
-                    ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
-                    : undefined
+                  ? 'lti.marketing.delivery_order.update'
+                  : 'lti.marketing.delivery_order.create'
               }
-              onClick={() => {
-                if (props.row.original.latest_approval.step_number == 2) {
-                  deliveryClickHandler?.();
-                }
-              }}
-              variant='ghost'
-              color='success'
-              className='justify-start text-sm'
             >
-              <Icon icon='mdi:truck' width={16} height={16} />
-              Deliver
-            </Button>
-          </RequirePermission>
+              <Button
+                href={
+                  props.row.original.latest_approval.step_number == 3
+                    ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                    : props.row.original.latest_approval.step_number == 2
+                      ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                      : undefined
+                }
+                onClick={() => {
+                  if (props.row.original.latest_approval.step_number == 2) {
+                    deliveryClickHandler?.();
+                  }
+                }}
+                variant='ghost'
+                color='success'
+                className='justify-start text-sm'
+              >
+                <Icon icon='mdi:truck' width={16} height={16} />
+                Deliver
+              </Button>
+            </RequirePermission>
+          </>
         )}
         {props.row.original.latest_approval.step_number != 3 && (
-          <RequirePermission permissions='lti.marketing.sales_order.update'>
-            <Button
-              href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
-              variant='ghost'
-              color='warning'
-              className='justify-start text-sm'
-            >
-              <Icon icon='mdi:pencil-outline' width={16} height={16} />
-              Edit
-            </Button>
-          </RequirePermission>
+          <>
+            <RequirePermission permissions='lti.marketing.sales_order.update'>
+              <Button
+                href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+                variant='ghost'
+                color='warning'
+                className='justify-start text-sm'
+              >
+                <Icon icon='mdi:pencil-outline' width={16} height={16} />
+                Edit
+              </Button>
+            </RequirePermission>
+          </>
         )}
         <RequirePermission permissions='lti.marketing.sales_order.delete'>
           <Button
@@ -124,8 +133,6 @@ const RowsOptionsMenu = ({
 
 const MarketingTable = () => {
   const [search, setSearch] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
 
   const [approveAction, setApproveAction] = useState<'APPROVED' | 'REJECTED'>(
     'APPROVED'
@@ -135,22 +142,68 @@ const MarketingTable = () => {
   const { permissionCheck } = useAuth();
 
   const router = useRouter();
-
-  const {
-    data: marketing,
-    isLoading: isLoadingMarketing,
-    mutate: refreshMarketing,
-  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
-
   const deleteModal = useModal();
   const confirmationModal = useModal();
   const productsModal = useModal();
   const deliveryModal = useModal();
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      product_ids: '',
+      status: '',
+      customer_id: '',
+      page: 1,
+      limit: 10,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      product_ids: 'product_ids',
+      status: 'status',
+      customer_id: 'customer_id',
+    },
+  });
 
+  // ===== FETCH DATA =====
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(
+    `${MarketingApi.basePath}${getTableFilterToQueryString()}`,
+    MarketingApi.getAllFetcher
+  );
+
+  // ===== OPTIONS =====
+  const {
+    options: productsOptions,
+    isLoadingOptions: isLoadingProductsOptions,
+  } = useSelect(ProductApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+  });
+  const {
+    options: customersOptions,
+    isLoadingOptions: isLoadingCustomersOptions,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+  });
+  const statusOptions = MARKETING_APPROVAL_LINE.map((item) => ({
+    value: item.step_number,
+    label: item.step_name,
+  }));
+
+  // ===== HANDLER =====
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearch(e.target.value);
-      setPage(1);
+      updateFilter('page', 1);
+      updateFilter('search', e.target.value);
     },
     []
   );
@@ -158,7 +211,8 @@ const MarketingTable = () => {
     (val: OptionType | OptionType[] | null) => {
       const newVal = val as OptionType;
       setPageSize(newVal.value as number);
-      setPage(1);
+      updateFilter('page', 1);
+      updateFilter('limit', newVal.value as number);
     },
     []
   );
@@ -263,20 +317,6 @@ const MarketingTable = () => {
     );
   };
 
-  const {
-    state: tableFilterState,
-    updateFilter,
-    toQueryString: getTableFilterToQueryString,
-  } = useTableFilter({
-    initial: {
-      search: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
-  });
-
   const getRowCanSelect = (row: Row<Marketing>): boolean => {
     const approval = row.original.latest_approval;
     return approval?.step_number === 1 && approval?.action !== 'REJECTED';
@@ -327,7 +367,7 @@ const MarketingTable = () => {
             </RequirePermission>
           </div>
           <TableRowSizeSelector
-            value={pageSize}
+            value={tableFilterState.pageSize}
             onChange={pageSizeChangeHandler}
             options={ROWS_OPTIONS}
             className='flex sm:flex-row flex-col gap-3 items-end justify-end'
@@ -337,7 +377,29 @@ const MarketingTable = () => {
               label='Product'
               isClearable
               placeholder='Pilih product'
-              options={[]}
+              options={productsOptions}
+              isLoading={isLoadingProductsOptions}
+              value={
+                tableFilterState.product_ids
+                  ?.split(',')
+                  .map((id) =>
+                    productsOptions.find(
+                      (option) => option.value === Number(id)
+                    )
+                  )
+                  .filter(
+                    (option): option is { value: number; label: string } =>
+                      option !== undefined
+                  ) ?? null
+              }
+              onChange={(value: OptionType | OptionType[] | null) =>
+                updateFilter(
+                  'product_ids',
+                  (value as OptionType[])
+                    ?.map((item: OptionType) => item.value.toString())
+                    .join(',') || ''
+                )
+              }
               isMulti
             />
             {/* select status */}
@@ -345,14 +407,43 @@ const MarketingTable = () => {
               label='Status'
               isClearable
               placeholder='Pilih status'
-              options={[]}
+              options={statusOptions}
+              value={
+                tableFilterState.status
+                  ? statusOptions.find(
+                      (option) =>
+                        option.value === Number(tableFilterState.status)
+                    )
+                  : null
+              }
+              onChange={(value: OptionType | OptionType[] | null) =>
+                updateFilter(
+                  'status',
+                  (value as OptionType)?.value.toString() || ''
+                )
+              }
             />
             {/* select customer */}
             <SelectInput
               label='Customer'
               isClearable
               placeholder='Pilih customer'
-              options={[]}
+              options={customersOptions}
+              isLoading={isLoadingCustomersOptions}
+              value={
+                tableFilterState.customer_id
+                  ? customersOptions.find(
+                      (option) =>
+                        option.value === Number(tableFilterState.customer_id)
+                    )
+                  : null
+              }
+              onChange={(value: OptionType | OptionType[] | null) =>
+                updateFilter(
+                  'customer_id',
+                  (value as OptionType)?.value.toString() || ''
+                )
+              }
             />
           </TableRowSizeSelector>
         </div>
@@ -518,8 +609,8 @@ const MarketingTable = () => {
               },
             },
           ]}
-          pageSize={pageSize}
-          page={page}
+          pageSize={tableFilterState.pageSize}
+          page={tableFilterState.page}
           onPageChange={setPage}
           className={{
             tableWrapperClassName: 'overflow-x-auto min-h-full!',
@@ -591,7 +682,7 @@ const MarketingTable = () => {
       <Modal
         ref={productsModal.ref}
         className={{
-          modalBox: 'max-w-2/5 z-100',
+          modalBox: 'xs:max-w-2/5 z-100',
         }}
         closeOnBackdrop
       >
@@ -633,6 +724,7 @@ const MarketingTable = () => {
             },
           ]}
           className={{
+            containerClassName: 'p-6',
             tableWrapperClassName: 'overflow-x-auto min-h-full!',
             tableClassName: 'font-inter w-full table-auto min-h-full!',
             headerRowClassName: 'border-b border-b-gray-200',
@@ -643,6 +735,7 @@ const MarketingTable = () => {
               'px-6 py-3 last:flex last:flex-row last:justify-end',
             paginationClassName: 'hidden',
           }}
+          isLoading={isLoadingMarketing}
         />
       </Modal>
     </>

src/components/pages/marketing/detail/MarketingDetail.tsx

@@ -77,10 +77,6 @@ const MarketingDetail = ({
     confirmationModal.openModal();
   };
 
-  const deliveryClickHandler = () => {
-    deliveryModal.openModal();
-  };
-
   const deleteClickHandler = () => {
     deleteModal.openModal();
   };
@@ -128,7 +124,10 @@ const MarketingDetail = ({
   return (
     <>
       <div className='flex flex-col w-full gap-4'>
-        <FormHeader title='Detail Sales Order' backUrl='/marketing' />
+        <FormHeader
+          title={`Detail ${Number(initialValues?.latest_approval?.step_number) > 2 ? 'Delivery Order' : 'Sales Order'}`}
+          backUrl='/marketing'
+        />
         {!isLoadingApproval && approvals && (
           <ApprovalSteps approvals={approvals} />
         )}
@@ -165,28 +164,30 @@ const MarketingDetail = ({
             </>
           )}
           {initialValues?.latest_approval?.step_number != 1 && (
-            <RequirePermission
-              permissions={
-                initialValues?.latest_approval?.step_number == 3
-                  ? 'lti.marketing.delivery_order.update'
-                  : 'lti.marketing.delivery_order.create'
-              }
-            >
-              <Button
-                color='success'
-                href={
+            <>
+              <RequirePermission
+                permissions={
                   initialValues?.latest_approval?.step_number == 3
-                    ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
-                    : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                    ? 'lti.marketing.delivery_order.update'
+                    : 'lti.marketing.delivery_order.create'
                 }
               >
-                <Icon icon='mdi:truck' width={24} height={24} />
-                {initialValues?.latest_approval?.step_number == 3
-                  ? 'Edit '
-                  : 'Tambah '}
-                Delivery Order
-              </Button>
-            </RequirePermission>
+                <Button
+                  color='success'
+                  href={
+                    initialValues?.latest_approval?.step_number == 3
+                      ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                      : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  }
+                >
+                  <Icon icon='mdi:truck' width={24} height={24} />
+                  {initialValues?.latest_approval?.step_number == 3
+                    ? 'Edit '
+                    : 'Tambah '}
+                  Delivery Order
+                </Button>
+              </RequirePermission>
+            </>
           )}
         </div>
 
@@ -204,8 +205,23 @@ const MarketingDetail = ({
                     No. Sales Order
                   </td>
                   <td>:</td>
-                  <td width='50%'>{initialValues?.so_number}</td>
+                  <td width='50%' className='font-mono'>
+                    {initialValues?.so_number}
+                  </td>
                 </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td width='45%' className='font-semibold'>
+                      No. Delivery Order
+                    </td>
+                    <td>:</td>
+                    <td width='50%' className='font-mono'>
+                      {initialValues?.delivery_order
+                        ?.map((item) => item.do_number)
+                        .join(', ')}
+                    </td>
+                  </tr>
+                )}
                 <tr>
                   <td className='font-semibold'>Nama Pelanggan</td>
                   <td>:</td>
@@ -232,12 +248,27 @@ const MarketingDetail = ({
                   <td>{initialValues?.notes ?? '-'}</td>
                 </tr>
                 <tr>
-                  <td className='font-semibold'>Dokumen</td>
+                  <td className='font-semibold'>Dokumen Penjualan</td>
                   <td>:</td>
                   <td>
                     <SalesOrderExport data={initialValues} />
                   </td>
                 </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td className='font-semibold'>Dokumen Pengiriman</td>
+                    <td>:</td>
+                    <td className='flex flex-wrap gap-2'>
+                      {initialValues?.delivery_order?.map((item, index) => (
+                        <DeliveryOrderExport
+                          key={index}
+                          data={initialValues}
+                          deliveryOrder={item}
+                        />
+                      ))}
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>
@@ -427,16 +458,18 @@ const MarketingDetail = ({
         )}
         <div className='flex flex-row gap-3'>
           {initialValues?.latest_approval?.step_number != 3 && (
-            <RequirePermission permissions='lti.marketing.sales_order.update'>
-              <Button
-                color='warning'
-                type='button'
-                href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
-              >
-                <Icon icon='mdi:pencil' width={24} height={24} />
-                Edit
-              </Button>
-            </RequirePermission>
+            <>
+              <RequirePermission permissions='lti.marketing.sales_order.update'>
+                <Button
+                  color='warning'
+                  type='button'
+                  href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+                >
+                  <Icon icon='mdi:pencil' width={24} height={24} />
+                  Edit
+                </Button>
+              </RequirePermission>
+            </>
           )}
           <RequirePermission permissions='lti.marketing.sales_order.delete'>
             <Button color='error' onClick={deleteClickHandler}>

src/components/pages/marketing/form/MarketingForm.tsx

@@ -48,6 +48,8 @@ import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import RequirePermission from '@/components/helper/RequirePermission';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -558,11 +560,14 @@ const MarketingForm = ({
     );
   }, [memoSalesOrder]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <form
         className='flex flex-col gap-4'
-        onSubmit={formik.handleSubmit}
+        onSubmit={handleFormSubmit}
         onReset={formik.handleReset}
       >
         <FormHeader
@@ -635,12 +640,6 @@ const MarketingForm = ({
                 wrapper: 'bg-white w-full',
               }}
             >
-              {/* <div className='text-blue-500'>
-                {JSON.stringify(formik.values)}
-              </div>
-              <div className='text-red-500'>
-                {JSON.stringify(formik.errors)}
-              </div> */}
               <MemoizedDeliveryOrderProductTable
                 formType={formType}
                 data={deliveryOrderValues}
@@ -672,6 +671,8 @@ const MarketingForm = ({
           </div>
         </div>
 
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
         {/* Form Actions */}
         <div className='flex flex-row items-start justify-center gap-2 mt-4'>
           <Button type='reset' color='warning' disabled={formik.isSubmitting}>
@@ -679,7 +680,7 @@ const MarketingForm = ({
           </Button>
           <Button
             type='submit'
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
             isLoading={formik.isSubmitting}
           >
             Submit

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -15,6 +15,9 @@ import { BaseSalesOrder } from '@/types/api/marketing/marketing';
 import Badge from '@/components/Badge';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
 import * as Yup from 'yup';
+import { isResponseSuccess } from '@/lib/api-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const DeliveryOrderProductForm = ({
   formState,
@@ -39,6 +42,7 @@ const DeliveryOrderProductForm = ({
     null
   );
   const [currentInput, setCurrentInput] = useState<string>('');
+
   const salesOrder = salesOrders.find(
     (item) => item.id === initialValues?.marketing_product_id
   );
@@ -163,15 +167,14 @@ const DeliveryOrderProductForm = ({
     }
   }, [initialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <form
         className='size-full'
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleBlurField(currentInput);
-          formik.handleSubmit(e);
-        }}
+        onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
         {formikErrorMessage && (
@@ -208,7 +211,7 @@ const DeliveryOrderProductForm = ({
                   ...formik.values,
                   marketing_product_id: undefined,
                   marketing_product: null,
-                  qty: formik.values.qty || '',
+                  qty: '',
                   unit_price: '',
                   total_price: '',
                   avg_weight: '',
@@ -222,7 +225,7 @@ const DeliveryOrderProductForm = ({
                 ...formik.values,
                 marketing_product_id: selected.value as number,
                 marketing_product: SalesProductToFieldValues(so),
-                qty: formik.values.qty || so.qty,
+                qty: so.qty,
                 unit_price: so.unit_price,
                 total_price: so.total_price,
                 avg_weight: so.avg_weight,
@@ -298,8 +301,18 @@ const DeliveryOrderProductForm = ({
             isError={Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
+            bottomLabel={
+              formik.values.marketing_product_id
+                ? 'Stok dijual: ' +
+                  salesOrders?.find(
+                    (item) => item.id === formik.values.marketing_product_id
+                  )?.qty
+                : ''
+            }
           />
-
+        </div>
+        <div className='divider my-6'></div>
+        <div className='grid sm:grid-cols-2 gap-4'>
           <NumberInput
             required
             label='Avg. Bobot (Kg)'
@@ -361,6 +374,8 @@ const DeliveryOrderProductForm = ({
           />
         </div>
 
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning'>
             Reset
@@ -368,7 +383,7 @@ const DeliveryOrderProductForm = ({
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
           >
             Submit
           </Button>

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts

@@ -25,15 +25,19 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
     id: Yup.number(),
     vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
     kandang: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
+      value: Yup.number()
+        .min(1, 'Kandang wajib diisi!')
+        .required('Kandang wajib diisi!'),
+      label: Yup.string().required('Kandang wajib diisi!'),
     }).nullable(),
     kandang_id: Yup.number()
       .min(1, 'Kandang wajib diisi!')
       .required('Kandang wajib diisi!'),
     product_warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
+      value: Yup.number()
+        .min(1, 'Produk wajib diisi!')
+        .required('Produk wajib diisi!'),
+      label: Yup.string().required('Produk wajib diisi!'),
     }).nullable(),
     product_warehouse_id: Yup.number()
       .min(1, 'Produk wajib diisi!')

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -11,15 +11,21 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { KandangApi, WarehouseApi } from '@/services/api/master-data';
+import { WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import NumberInput from '@/components/input/NumberInput';
 import Button from '@/components/Button';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { formatVechicleNumber } from '@/lib/helper';
+import {
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const SalesOrderProductForm = ({
   initialValues,
@@ -34,6 +40,7 @@ const SalesOrderProductForm = ({
   const [formErrorMessage, setFormErrorMessage] = useState('');
   const [currentInput, setCurrentInput] = useState<string>('');
 
+  // ============ Formik ============
   const formik = useFormik<SalesOrderProductFormValues>({
     enableReinitialize: true,
     initialValues: {
@@ -58,6 +65,7 @@ const SalesOrderProductForm = ({
     isInitialValid: false,
   });
 
+  // ===== Options =====
   const {
     options: kandangSourceOptions,
     isLoadingOptions: isLoadingKandangSourceOptions,
@@ -86,12 +94,13 @@ const SalesOrderProductForm = ({
     );
   }, [warehouseSourceOptions, exisitingValues]);
 
+  // ===== Handler =====
   const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('kandang', val as OptionType);
     formik.setFieldValue('kandang_id', (val as OptionType)?.value);
     formik.setFieldValue('product_warehouse_id', null);
     formik.setFieldValue('product_warehouse', null);
-    formik.setFieldValue('qty', null);
+    formik.setFieldValue('qty', '');
   };
 
   const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -106,7 +115,7 @@ const SalesOrderProductForm = ({
       formik.setFieldValue('qty', productWarehouse?.quantity);
       handleBlurField('qty');
     } else {
-      formik.setFieldValue('qty', null);
+      formik.setFieldValue('qty', '');
     }
   };
 
@@ -162,15 +171,14 @@ const SalesOrderProductForm = ({
     }
   };
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <form
         className='size-full'
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleBlurField(currentInput);
-          formik.handleSubmit(e);
-        }}
+        onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
         {formErrorMessage && (
@@ -180,9 +188,6 @@ const SalesOrderProductForm = ({
             </Alert>
           </div>
         )}
-        {/* <small className='block text-rose-500'>
-          {JSON.stringify(formik.errors)}
-        </small> */}
         <div className='grid sm:grid-cols-2 gap-4 z-200'>
           <PatternInput
             name='vehicle_number'
@@ -251,7 +256,24 @@ const SalesOrderProductForm = ({
             isError={formik.touched.qty && Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
+            bottomLabel={
+              isResponseSuccess(warehouseSourceRawData) &&
+              formik.values.product_warehouse_id
+                ? `Stok tersedia: ${formatNumber(
+                    warehouseSourceRawData?.data?.find(
+                      (item) => item.id === formik.values.product_warehouse_id
+                    )?.quantity ?? 0
+                  )} ${
+                    warehouseSourceRawData?.data?.find(
+                      (item) => item.id === formik.values.product_warehouse_id
+                    )?.product?.uom?.name ?? ''
+                  }`
+                : ''
+            }
           />
+        </div>
+        <div className='divider my-6'></div>
+        <div className='grid sm:grid-cols-2 gap-4 z-200'>
           <NumberInput
             required
             label='Avg. Bobot (Kg)'
@@ -317,6 +339,9 @@ const SalesOrderProductForm = ({
             placeholder='Masukan Total Penjualan'
           />
         </div>
+
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning' onClick={handleResetForm}>
             Reset
@@ -324,7 +349,7 @@ const SalesOrderProductForm = ({
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={formik.isSubmitting}
           >
             Submit
           </Button>

src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx

@@ -32,38 +32,6 @@ const DeliveryOrderProductTable = ({
 
   const columns = useMemo(() => {
     const cols = [
-      // {
-      //   id: 'select',
-      //   header: ({
-      //     table,
-      //   }: {
-      //     table: TanStack.Table<DeliveryOrderProductFormValues>;
-      //   }) => (
-      //     <div className='w-full flex flex-row justify-center'>
-      //       <CheckboxInput
-      //         name='allRow'
-      //         checked={table.getIsAllRowsSelected()}
-      //         indeterminate={table.getIsSomeRowsSelected()}
-      //         onChange={table.getToggleAllRowsSelectedHandler()}
-      //       />
-      //     </div>
-      //   ),
-      //   cell: ({
-      //     row,
-      //   }: {
-      //     row: TanStack.Row<DeliveryOrderProductFormValues>;
-      //   }) => (
-      //     <div>
-      //       <CheckboxInput
-      //         name='row'
-      //         checked={row.getIsSelected()}
-      //         disabled={!row.getCanSelect()}
-      //         indeterminate={row.getIsSomeSelected()}
-      //         onChange={row.getToggleSelectedHandler()}
-      //       />
-      //     </div>
-      //   ),
-      // },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
         header: 'No. Pengiriman',
@@ -188,18 +156,6 @@ const DeliveryOrderProductTable = ({
                 </Button>
               )}
               {!props.row.original.qty && '-'}
-              {/* {formType == 'add_deliver' && (
-                <Button
-                  color='error'
-                  className='p-1'
-                  onClick={() =>
-                    onDeleteRef.current(props.row.original.id as number)
-                  }
-                  type='button'
-                >
-                  <Icon icon='mdi:trash' width={16} height={16} />
-                </Button>
-              )} */}
             </>
           </div>
         ),
@@ -248,22 +204,6 @@ const DeliveryOrderProductTable = ({
           <Icon icon='mdi:plus' width={16} height={16} />
           Tambah Pengiriman
         </Button>
-        {/* {selectedRowIds.length > 0 && (
-          <Button
-            type='button'
-            variant='outline'
-            color='error'
-            className='justify-start w-fit py-1 text-sm'
-            onClick={onBulkDelete}
-          >
-            <Icon icon='mdi:trash' width={16} height={16} />
-            Hapus
-            {selectedRowIds.length > 0
-              ? ` (${selectedRowIds.length})`
-              : ''}{' '}
-            Pengiriman
-          </Button>
-        )} */}
       </div>
     </>
   );

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -25,6 +25,8 @@ import {
 } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface AreaFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -118,6 +120,9 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -139,7 +144,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -199,6 +204,8 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -213,7 +220,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -25,6 +25,8 @@ import {
 } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface BankFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -124,6 +126,9 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -145,7 +150,7 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -247,6 +252,8 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -261,7 +268,7 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -28,6 +28,8 @@ import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
 import { TYPE_OPTIONS } from '@/config/constant';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -191,6 +193,9 @@ const CustomerForm = ({
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // Render
   return (
     <>
@@ -213,7 +218,7 @@ const CustomerForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -358,6 +363,8 @@ const CustomerForm = ({
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {formType !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -372,7 +379,7 @@ const CustomerForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/fcr/form/FcrForm.tsx

@@ -26,6 +26,8 @@ import {
 } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface FcrFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -158,6 +160,9 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -179,7 +184,7 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -294,6 +299,8 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
             )}
           </div>
 
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
@@ -349,7 +356,7 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -17,6 +17,8 @@ import TextInput from '@/components/input/TextInput';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -86,6 +88,9 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
     formikSetValues(formikInitialValue);
   }, [formikSetValues, formikInitialValue]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // Render
   return (
     <>
@@ -107,7 +112,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -168,6 +173,8 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {formType !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -182,7 +189,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/kandang/form/KandangForm.tsx

@@ -29,6 +29,8 @@ import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { UserApi } from '@/services/api/user';
 import NumberInput from '@/components/input/NumberInput';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -198,6 +200,9 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -219,7 +224,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -324,6 +329,8 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -338,7 +345,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/location/form/LocationForm.tsx

@@ -27,6 +27,8 @@ import {
 } from '@/types/api/master-data/location';
 import { AreaApi, LocationApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface LocationFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -160,6 +162,9 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -181,7 +186,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -268,6 +273,8 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -282,7 +289,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -29,6 +29,8 @@ import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { flags } from '@/types/api/api-general';
 import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface NonstockFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -213,6 +215,9 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -234,7 +239,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -337,6 +342,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -351,7 +358,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

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

@@ -11,6 +11,7 @@ import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   ProductCategoryFormSchema,
@@ -25,6 +26,7 @@ import {
 } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface ProductCategoryFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -129,6 +131,9 @@ const ProductCategoryForm = ({
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-2xl'>
@@ -150,10 +155,23 @@ 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>
+          )}
+
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
           <div className='flex flex-col gap-4'>
             <TextInput
               required
@@ -236,7 +254,7 @@ const ProductCategoryForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit
@@ -244,17 +262,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(),
-      label: Yup.string().required(),
-    })
-      .nullable()
-      .required('Satuan wajib diisi!'),
+      value: Yup.number()
+        .min(1, 'Satuan wajib dipilih!')
+        .required('Satuan wajib dipilih!'),
+      label: Yup.string().required('Satuan wajib dipilih!'),
+    }).nullable(),
 
     uom_id: Yup.number()
-      .required('Satuan wajib diisi!')
-      .typeError('Satuan wajib diisi!'),
+      .min(1, 'Satuan wajib dipilih!')
+      .required('Satuan wajib dipilih!')
+      .typeError('Satuan wajib dipilih!'),
 
     product_category: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    })
-      .nullable()
-      .required('Kategori produk wajib diisi!'),
+      value: Yup.number()
+        .min(1, 'Kategori produk wajib dipilih!')
+        .required('Kategori produk wajib dipilih!'),
+      label: Yup.string().required('Kategori produk wajib dipilih!'),
+    }).nullable(),
 
     product_category_id: Yup.number()
-      .required('Kategori produk wajib diisi!')
-      .typeError('Kategori produk wajib diisi!'),
+      .min(1, 'Kategori produk wajib dipilih!')
+      .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,
@@ -37,6 +39,7 @@ import {
 } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface ProductFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -201,6 +204,9 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-2xl'>
@@ -220,11 +226,24 @@ 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>
+          )}
+
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
+          <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
               label='Nama'
@@ -237,179 +256,193 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               errorMessage={formik.errors.name}
               readOnly={type === 'detail'}
             />
-            <TextInput
-              required
-              label='Merek'
-              name='brand'
-              placeholder='Masukkan merek...'
-              value={formik.values.brand}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.brand && Boolean(formik.errors.brand)}
-              errorMessage={formik.errors.brand}
-              readOnly={type === 'detail'}
-            />
-            <TextInput
-              required
-              label='SKU'
-              name='sku'
-              placeholder='Masukkan SKU...'
-              value={formik.values.sku}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.sku && Boolean(formik.errors.sku)}
-              errorMessage={formik.errors.sku}
-              readOnly={type === 'detail'}
-            />
-            <SelectInput
-              required
-              label='Satuan'
-              placeholder='Pilih satuan...'
-              value={formik.values.uom ?? undefined}
-              onChange={uomChangeHandler}
-              options={uomOptions}
-              onInputChange={setUomSelectInputValue}
-              isLoading={isLoadingUoms}
-              isError={formik.touched.uom_id && Boolean(formik.errors.uom_id)}
-              errorMessage={formik.errors.uom_id as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <SelectInput
-              required
-              label='Kategori Produk'
-              placeholder='Pilih kategori produk...'
-              value={formik.values.product_category ?? undefined}
-              onChange={categoryChangeHandler}
-              options={categoryOptions}
-              onInputChange={setCategorySelectInputValue}
-              isLoading={isLoadingCategories}
-              isError={
-                formik.touched.product_category_id &&
-                Boolean(formik.errors.product_category_id)
-              }
-              errorMessage={formik.errors.product_category_id as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <NumberInput
-              required
-              label='Harga Produk'
-              name='product_price'
-              placeholder='Masukkan harga produk...'
-              value={formik.values.product_price}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix='Rp '
-              isError={
-                formik.touched.product_price &&
-                Boolean(formik.errors.product_price)
-              }
-              errorMessage={formik.errors.product_price as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Harga Jual'
-              name='selling_price'
-              placeholder='Masukkan harga jual...'
-              value={formik.values.selling_price}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix='Rp '
-              isError={
-                formik.touched.selling_price &&
-                Boolean(formik.errors.selling_price)
-              }
-              errorMessage={formik.errors.selling_price as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Pajak (%)'
-              name='tax'
-              placeholder='Masukkan pajak...'
-              value={formik.values.tax}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputSuffix='%'
-              isError={formik.touched.tax && Boolean(formik.errors.tax)}
-              errorMessage={formik.errors.tax as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Periode Kadaluarsa (hari)'
-              name='expiry_period'
-              placeholder='Masukkan periode kadaluarsa...'
-              value={formik.values.expiry_period}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={0}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputSuffix='hari'
-              isError={
-                formik.touched.expiry_period &&
-                Boolean(formik.errors.expiry_period)
-              }
-              errorMessage={formik.errors.expiry_period as string}
-              readOnly={type === 'detail'}
-            />
-            <SelectInput
-              required
-              label='Supplier'
-              placeholder='Pilih supplier...'
-              isMulti
-              value={supplierOptions.filter((opt) =>
-                (formik.values.supplier_ids || []).includes(opt.value)
-              )}
-              onChange={supplierChangeHandler}
-              options={supplierOptions}
-              onInputChange={setSupplierSelectInputValue}
-              isLoading={isLoadingSuppliers}
-              isError={
-                formik.touched.supplier_ids &&
-                Boolean(formik.errors.supplier_ids)
-              }
-              errorMessage={formik.errors.supplier_ids as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <SelectInput
-              required
-              label='Flags'
-              placeholder='Pilih flags...'
-              isMulti
-              value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
-                (formik.values.flags || []).includes(opt.value)
-              )}
-              onChange={(val) => {
-                const arr = Array.isArray(val) ? val : val ? [val] : [];
-                formik.setFieldValue(
-                  'flags',
-                  arr.map((v) => (v as OptionType).value)
-                );
-              }}
-              options={PRODUCT_FLAG_OPTIONS}
-              isError={formik.touched.flags && Boolean(formik.errors.flags)}
-              errorMessage={formik.errors.flags as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
+            <div className='grid sm:grid-cols-2 gap-4'>
+              <TextInput
+                required
+                label='Merek'
+                name='brand'
+                placeholder='Masukkan merek...'
+                value={formik.values.brand}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.brand && Boolean(formik.errors.brand)}
+                errorMessage={formik.errors.brand}
+                readOnly={type === 'detail'}
+              />
+              <TextInput
+                required
+                label='SKU'
+                name='sku'
+                placeholder='Masukkan SKU...'
+                value={formik.values.sku}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.sku && Boolean(formik.errors.sku)}
+                errorMessage={formik.errors.sku}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
+              <SelectInput
+                required
+                label='Satuan'
+                placeholder='Pilih satuan...'
+                value={formik.values.uom ?? undefined}
+                onChange={uomChangeHandler}
+                options={uomOptions}
+                onInputChange={setUomSelectInputValue}
+                isLoading={isLoadingUoms}
+                isError={
+                  (formik.touched.uom || formik.touched.uom_id) &&
+                  Boolean(formik.errors.uom_id)
+                }
+                errorMessage={formik.errors.uom_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+              <SelectInput
+                required
+                label='Kategori Produk'
+                placeholder='Pilih kategori produk...'
+                value={formik.values.product_category ?? undefined}
+                onChange={categoryChangeHandler}
+                options={categoryOptions}
+                onInputChange={setCategorySelectInputValue}
+                isLoading={isLoadingCategories}
+                isError={
+                  (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'
+                name='product_price'
+                placeholder='Masukkan harga produk...'
+                value={formik.values.product_price}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputPrefix='Rp '
+                isError={
+                  formik.touched.product_price &&
+                  Boolean(formik.errors.product_price)
+                }
+                errorMessage={formik.errors.product_price as string}
+                readOnly={type === 'detail'}
+              />
+              <NumberInput
+                required
+                label='Harga Jual'
+                name='selling_price'
+                placeholder='Masukkan harga jual...'
+                value={formik.values.selling_price}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputPrefix='Rp '
+                isError={
+                  formik.touched.selling_price &&
+                  Boolean(formik.errors.selling_price)
+                }
+                errorMessage={formik.errors.selling_price as string}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
+              <NumberInput
+                required
+                label='Pajak (%)'
+                name='tax'
+                placeholder='Masukkan pajak...'
+                value={formik.values.tax}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputSuffix='%'
+                isError={formik.touched.tax && Boolean(formik.errors.tax)}
+                errorMessage={formik.errors.tax as string}
+                readOnly={type === 'detail'}
+              />
+              <NumberInput
+                required
+                label='Periode Kadaluarsa (hari)'
+                name='expiry_period'
+                placeholder='Masukkan periode kadaluarsa...'
+                value={formik.values.expiry_period}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={0}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputSuffix='hari'
+                isError={
+                  formik.touched.expiry_period &&
+                  Boolean(formik.errors.expiry_period)
+                }
+                errorMessage={formik.errors.expiry_period as string}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid sm:grid-cols-2 gap-4'>
+              <SelectInput
+                required
+                label='Supplier'
+                placeholder='Pilih supplier...'
+                isMulti
+                value={supplierOptions.filter((opt) =>
+                  (formik.values.supplier_ids || []).includes(opt.value)
+                )}
+                onChange={supplierChangeHandler}
+                options={supplierOptions}
+                onInputChange={setSupplierSelectInputValue}
+                isLoading={isLoadingSuppliers}
+                isError={
+                  formik.touched.supplier_ids &&
+                  Boolean(formik.errors.supplier_ids)
+                }
+                errorMessage={formik.errors.supplier_ids as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+              <SelectInput
+                required
+                label='Flags'
+                placeholder='Pilih flags...'
+                isMulti
+                value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                  (formik.values.flags || []).includes(opt.value)
+                )}
+                onChange={(val) => {
+                  const arr = Array.isArray(val) ? val : val ? [val] : [];
+                  formik.setFieldValue(
+                    'flags',
+                    arr.map((v) => (v as OptionType).value)
+                  );
+                }}
+                options={PRODUCT_FLAG_OPTIONS}
+                isError={formik.touched.flags && Boolean(formik.errors.flags)}
+                errorMessage={formik.errors.flags as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
           </div>
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
@@ -463,7 +496,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 +504,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/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -9,6 +9,7 @@ import {
   ProductionStandardRepeaterFormSchemaValues,
   ProductionStandardFormValues,
   createProductionStandardRepeaterFormSchema,
+  ProductionStandardFormSchema,
 } from '@/components/pages/master-data/production-standard/form/ProductionStandardForm.schema';
 import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
@@ -31,6 +32,8 @@ import { useModal } from '@/components/Modal';
 import RequirePermission from '@/components/helper/RequirePermission';
 import Tooltip from '@/components/Tooltip';
 import Alert from '@/components/Alert';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 type TableRowsType = {
   customRow: boolean;
@@ -207,6 +210,7 @@ const ProductionStandardForm = ({
     initialValues: formikInitialValues as ProductionStandardFormValues,
     // Only enable reinitialize for edit/detail mode, not add mode
     enableReinitialize: formType !== 'add',
+    validationSchema: ProductionStandardFormSchema,
     onSubmit: (values) => {
       switch (formType) {
         case 'add':
@@ -723,7 +727,8 @@ const ProductionStandardForm = ({
     router.push('/master-data/production-standard');
   };
 
-  // ===== Function =====
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -1210,9 +1215,26 @@ const ProductionStandardForm = ({
             return null;
           }}
         />
+
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
+        {productionStandardFormErrorMessage && (
+          <Alert color='error' className='w-full'>
+            <div className='flex items-center gap-2 stretch'>
+              <Icon icon='mdi:alert' />
+              <span>{productionStandardFormErrorMessage}</span>
+            </div>
+            <Icon
+              icon='mdi:close'
+              onClick={() => setProductionStandardFormErrorMessage('')}
+              className='ms-auto'
+            />
+          </Alert>
+        )}
+
         <form
           className='flex justify-between mt-6 gap-2 flex-wrap'
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
         >
           {formType === 'detail' && (
             <div className='gap-2 flex items-center'>
@@ -1293,19 +1315,6 @@ const ProductionStandardForm = ({
             </div>
           )}
         </form>
-        {productionStandardFormErrorMessage && (
-          <Alert color='error' className='w-full'>
-            <div className='flex items-center gap-2 stretch'>
-              <Icon icon='mdi:alert' />
-              <span>{productionStandardFormErrorMessage}</span>
-            </div>
-            <Icon
-              icon='mdi:close'
-              onClick={() => setProductionStandardFormErrorMessage('')}
-              className='ms-auto'
-            />
-          </Alert>
-        )}
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -25,6 +25,8 @@ import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface SupplierCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -199,6 +201,9 @@ const SupplierForm = ({
     formik.setFieldValue('category', val);
   };
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // Render
   return (
     <>
@@ -221,7 +226,7 @@ const SupplierForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -444,6 +449,8 @@ const SupplierForm = ({
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {formType !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -458,7 +465,7 @@ const SupplierForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/uom/form/UomForm.tsx

@@ -25,6 +25,8 @@ import {
 } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface UomFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -118,6 +120,9 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -139,7 +144,7 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -199,6 +204,8 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -213,7 +220,7 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

src/components/pages/master-data/warehouse/form/WarehouseForm.tsx

@@ -33,6 +33,8 @@ import {
 } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { WAREHOUSE_TYPE_OPTIONS } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface WarehouseFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -323,6 +325,9 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -344,7 +349,7 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -421,8 +426,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                 value={formik.values.kandang ?? undefined}
                 onChange={kandangChangeHandler}
                 options={kandangOptions}
-                onInputChange={setLocationSelectInputValue}
-                isLoading={isLoadingLocations}
+                onInputChange={setKandangSelectInputValue}
+                isLoading={isLoadingKandangs}
                 isError={
                   formik.touched.kandangId && Boolean(formik.errors.kandangId)
                 }
@@ -474,6 +479,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -488,7 +495,7 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit

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

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

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

@@ -8,6 +8,7 @@ import PillBadge from '@/components/PillBadge';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
 import { ChickinApi } from '@/services/api/production/chickin';
+import { BaseApproval } from '@/types/api/api-general';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
@@ -16,9 +17,11 @@ import toast from 'react-hot-toast';
 const ChickinLogsView = ({
   initialValues,
   afterSubmit,
+  rawDataApprovals,
 }: {
   initialValues: ProjectFlockKandang;
   afterSubmit?: () => void;
+  rawDataApprovals: BaseApproval[];
 }) => {
   const confirmModal = useModal();
   const [isApproveLoading, setIsApproveLoading] = useState(false);
@@ -60,8 +63,15 @@ const ChickinLogsView = ({
           </div>
         ) : (
           (initialValues?.chickins || []).map((chickin, index) => {
-            const isApproved = chickin.usage_qty !== 0;
-            const isPending = chickin.pending_usage_qty !== 0;
+            const latestApproval = rawDataApprovals[0];
+            const isApproved =
+              index == (initialValues?.chickins || []).length - 1
+                ? latestApproval?.step_number === 2
+                : true;
+            const isPending =
+              index == (initialValues?.chickins || []).length - 1
+                ? latestApproval?.step_number === 1
+                : false;
             const quantity = isApproved
               ? chickin.usage_qty
               : isPending
@@ -81,7 +91,7 @@ const ChickinLogsView = ({
                   {/* Header with Status Badge */}
                   <div className='flex flex-row justify-between items-center'>
                     <div className='text-lg font-semibold'>
-                      Chick In #{index + 1}
+                      Chick In #{index + 1} - {latestApproval?.step_number}
                     </div>
                     <PillBadge
                       content={
@@ -146,18 +156,19 @@ const ChickinLogsView = ({
           })
         )}
 
-        {initialValues?.approval?.step_number <= 2 && (
-          <RequirePermission permissions='lti.production.chickins.approve'>
-            <Button
-              color='success'
-              onClick={handleClickApprove}
-              className='w-full'
-            >
-              <Icon width={24} height={24} icon='material-symbols:check' />
-              Approve Semua Chick In
-            </Button>
-          </RequirePermission>
-        )}
+        {initialValues.chickin_approval &&
+          initialValues?.chickin_approval?.step_number < 2 && (
+            <RequirePermission permissions='lti.production.chickins.approve'>
+              <Button
+                color='success'
+                onClick={handleClickApprove}
+                className='w-full'
+              >
+                <Icon width={24} height={24} icon='material-symbols:check' />
+                Approve Semua Chick In
+              </Button>
+            </RequirePermission>
+          )}
 
         {chickinErrorMessage && (
           <div className='w-full' onClick={() => setChickinErrorMessage('')}>

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

@@ -19,7 +19,7 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
-import { CellContext, SortingState } from '@tanstack/react-table';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import { useRouter } from 'next/navigation';
 import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
@@ -27,84 +27,6 @@ import useSWR from 'swr';
 
 import RequirePermission from '@/components/helper/RequirePermission';
 
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-  deleteClickHandler,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<ProjectFlock, unknown>;
-  deleteClickHandler: () => void;
-}) => {
-  return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
-      <div className='flex flex-col gap-1'>
-        <RequirePermission permissions='lti.production.project_flocks.detail'>
-          <Button
-            href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-            variant='ghost'
-            color='primary'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:eye-outline' width={16} height={16} />
-            Detail
-          </Button>
-        </RequirePermission>
-        {props.row.original.approval.step_name === 'Aktif' && (
-          <RequirePermission permissions='lti.production.chickins.create'>
-            <Button
-              href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
-              variant='ghost'
-              color='success'
-              className='justify-start text-sm'
-            >
-              <Icon icon='mdi:home-import-outline' width={16} height={16} />
-              Chickin
-            </Button>
-          </RequirePermission>
-        )}
-        {props.row.original.approval.step_name === 'Pengajuan' && (
-          <RequirePermission permissions='lti.production.project_flocks.update'>
-            <Button
-              href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-              variant='ghost'
-              color='warning'
-              className='justify-start text-sm'
-            >
-              <Icon icon='mdi:pencil-outline' width={16} height={16} />
-              Edit
-            </Button>
-          </RequirePermission>
-        )}
-        <RequirePermission permissions='lti.production.project_flocks.delete'>
-          <Button
-            onClick={deleteClickHandler}
-            variant='ghost'
-            color='error'
-            className='text-error hover:text-inherit justify-start text-sm'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={16}
-              height={16}
-            />
-            Delete
-          </Button>
-        </RequirePermission>
-      </div>
-    </div>
-  );
-};
-
 const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const {
     state: tableFilterState,
@@ -149,8 +71,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   );
   const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock>();
   const deleteModal = useModal();
   const confirmModal = useModal();
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
@@ -221,18 +141,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     : [];
 
   // ====== HANDLER ======
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const newVal = val as OptionType;
-    setPageSize(newVal.value as number);
-  };
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProjectFlockApi.delete(selectedSingleRow?.id as number);
+    const response = await ProjectFlockApi.delete(
+      selectedSingleRow?.id as number
+    );
+    if (isResponseSuccess(response)) {
+      toast.success(response?.message as string);
+    }
+    if (isResponseError(response)) {
+      toast.error(response?.message as string);
+    }
     refreshProjectFlocks();
 
     deleteModal.closeModal();
-    toast.success('Successfully delete Project Flock!');
     setIsDeleteLoading(false);
     setRowSelection({});
   };
@@ -285,12 +208,146 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const canApprove = useMemo(() => {
     if (!selectedSingleRow || isApproveLoading) return false;
 
-    const isPengajuan = selectedSingleRow.approval.step_number == 1;
-    const isNotRejected = selectedSingleRow.approval.action != 'REJECTED';
+    const isPengajuan = selectedSingleRow.approval?.step_number == 1;
+    const isNotRejected = selectedSingleRow.approval?.action != 'REJECTED';
 
     return isPengajuan && isNotRejected;
   }, [selectedSingleRow, isApproveLoading]);
 
+  // ====== COLUMNS ======
+  const columns = useMemo<ColumnDef<ProjectFlock>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => {
+          const allRows = table.getRowModel().rows;
+          const selectableRows = allRows;
+
+          const allSelected =
+            selectableRows.every((row) => row.getIsSelected()) &&
+            selectableRows.length != 0;
+
+          const someSelected =
+            selectableRows.some((row) => row.getIsSelected()) && !allSelected;
+
+          const toggleSelectableRows = () => {
+            const shouldSelect = !allSelected;
+            selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+          };
+
+          return (
+            <div className='w-full flex flex-row justify-center'>
+              <CheckboxInput
+                name='allRow'
+                checked={allSelected}
+                indeterminate={someSelected}
+                onChange={toggleSelectableRows}
+              />
+            </div>
+          );
+        },
+        cell: ({ row }) => {
+          return (
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          );
+        },
+      },
+
+      {
+        accessorKey: 'flock_name',
+        header: 'Flock',
+      },
+      {
+        accessorKey: 'area.name',
+        header: 'Area',
+      },
+      {
+        accessorKey: 'location.name',
+        header: 'Lokasi',
+      },
+      {
+        accessorKey: 'fcr.name',
+        header: 'FCR',
+      },
+      {
+        accessorKey: 'category',
+        header: 'Kategori',
+      },
+      {
+        accessorKey: 'approval.step_name',
+        header: 'Status',
+        cell: (props) => {
+          const approval = props.row.original.approval;
+
+          return (
+            <Badge
+              variant='soft'
+              className={{
+                badge: 'rounded-lg px-2 w-full flex flex-row justify-start',
+              }}
+              color={
+                approval?.step_number == 1
+                  ? 'neutral'
+                  : approval?.step_number == 2
+                    ? 'success'
+                    : 'error'
+              }
+            >
+              <Icon
+                icon='mdi:circle'
+                width={12}
+                height={12}
+                color={
+                  approval?.step_number == 1
+                    ? 'neutral'
+                    : approval?.step_number == 2
+                      ? 'success'
+                      : 'error'
+                }
+              />
+              {approval?.step_name}
+            </Badge>
+          );
+        },
+      },
+      {
+        header: 'Kandang',
+        cell: (props) => {
+          const kandang = props.row.original.kandangs;
+          if (kandang) {
+            const kandangNames = kandang.map((k: Kandang) => k.name);
+            return (
+              <div>
+                {kandangNames.length > 0
+                  ? kandangNames.join(', ')
+                  : 'Tidak ada'}
+              </div>
+            );
+          } else {
+            return '-';
+          }
+        },
+      },
+      {
+        accessorKey: 'period',
+        header: 'Periode',
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Dibuat pada',
+        cell: (props) =>
+          formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
+      },
+    ],
+    []
+  );
+
   return (
     <>
       <div className='min-h-screen w-full p-4'>
@@ -301,7 +358,10 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                 <Button
                   color='primary'
                   className='w-full sm:w-fit'
-                  href='/production/project-flock/add'
+                  onClick={() => {
+                    setRowSelection({});
+                    router.push('/production/project-flock/add');
+                  }}
                 >
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
@@ -310,7 +370,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               <div className='ms-auto w-full sm:w-auto'>
                 <DebouncedTextInput
                   name='search'
-                  placeholder='Cari Area'
+                  placeholder='Cari Project Flock'
                   value={tableFilterState.search}
                   onChange={searchChangeHandler}
                   className={{
@@ -372,160 +432,18 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                 type='number'
                 label='Periode'
                 placeholder='Masukan periode'
-                value={periodInputValue ?? ''}
+                value={periodInputValue?.toString() ?? ''}
                 onChange={(e) => {
                   setPeriodInputValue(parseInt(e.target.value));
                   updateFilter('periodFilter', e.target.value);
                 }}
               />
-              <SelectInput
-                label='Baris'
-                options={ROWS_OPTIONS}
-                value={{
-                  label: String(tableFilterState.pageSize),
-                  value: tableFilterState.pageSize,
-                }}
-                onChange={pageSizeChangeHandler}
-                className={{ wrapper: 'max-w-28' }}
-              />
             </div>
           </div>
 
           <Table<ProjectFlock>
             data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
-            columns={[
-              {
-                id: 'select',
-                header: ({ table }) => {
-                  const allRows = table.getRowModel().rows;
-                  const selectableRows = allRows;
-
-                  const allSelected =
-                    selectableRows.every((row) => row.getIsSelected()) &&
-                    selectableRows.length != 0;
-
-                  const someSelected =
-                    selectableRows.some((row) => row.getIsSelected()) &&
-                    !allSelected;
-
-                  const toggleSelectableRows = () => {
-                    const shouldSelect = !allSelected;
-                    selectableRows.forEach((row) =>
-                      row.toggleSelected(shouldSelect)
-                    );
-                  };
-
-                  return (
-                    <div className='w-full flex flex-row justify-center'>
-                      <CheckboxInput
-                        name='allRow'
-                        checked={allSelected}
-                        indeterminate={someSelected}
-                        onChange={toggleSelectableRows}
-                      />
-                    </div>
-                  );
-                },
-                cell: ({ row }) => {
-                  return (
-                    <CheckboxInput
-                      name='row'
-                      checked={row.getIsSelected()}
-                      disabled={!row.getCanSelect()}
-                      indeterminate={row.getIsSomeSelected()}
-                      onChange={row.getToggleSelectedHandler()}
-                    />
-                  );
-                },
-              },
-
-              {
-                accessorKey: 'flock_name',
-                header: 'Flock',
-              },
-              {
-                accessorKey: 'area.name',
-                header: 'Area',
-              },
-              {
-                accessorKey: 'location.name',
-                header: 'Lokasi',
-              },
-              {
-                accessorKey: 'fcr.name',
-                header: 'FCR',
-              },
-              {
-                accessorKey: 'category',
-                header: 'Kategori',
-              },
-              {
-                accessorKey: 'approval.step_name',
-                header: 'Status',
-                cell: (props) => {
-                  const approval = props.row.original.approval;
-
-                  return (
-                    <Badge
-                      variant='soft'
-                      className={{
-                        badge:
-                          'rounded-lg px-2 w-full flex flex-row justify-start',
-                      }}
-                      color={
-                        approval.step_number == 1
-                          ? 'neutral'
-                          : approval.step_number == 2
-                            ? 'success'
-                            : 'error'
-                      }
-                    >
-                      <Icon
-                        icon='mdi:circle'
-                        width={12}
-                        height={12}
-                        color={
-                          approval.step_number == 1
-                            ? 'neutral'
-                            : approval.step_number == 2
-                              ? 'success'
-                              : 'error'
-                        }
-                      />
-                      {approval.step_name}
-                    </Badge>
-                  );
-                },
-              },
-              {
-                header: 'Kandang',
-                cell: (props) => {
-                  const kandang = props.row.original.kandangs;
-                  if (kandang) {
-                    const kandangNames = kandang.map((k: Kandang) => k.name);
-                    return (
-                      <div>
-                        {kandangNames.length > 0
-                          ? kandangNames.join(', ')
-                          : 'Tidak ada'}
-                      </div>
-                    );
-                  } else {
-                    return '-';
-                  }
-                },
-              },
-              {
-                accessorKey: 'period',
-                header: 'Periode',
-              },
-              {
-                accessorKey: 'created_at',
-                header: 'Dibuat pada',
-                cell: (props) =>
-                  formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
-              },
-            ]}
+            columns={columns}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -535,7 +453,12 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                 ? projectFlocks?.meta?.total_results
                 : 0
             }
-            onPageChange={setPage}
+            onPageChange={(page) => {
+              setPage(page);
+            }}
+            onPageSizeChange={(pageSize) => {
+              setPageSize(pageSize);
+            }}
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
@@ -543,9 +466,9 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
             setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
-                'mb-20':
+                'mb-40':
                   isResponseSuccess(projectFlocks) &&
-                  projectFlocks?.data?.length === 0,
+                  projectFlocks?.data?.length > 0,
               }),
               tableWrapperClassName: 'overflow-x-auto min-h-full!',
               tableClassName: 'font-inter w-full table-auto min-h-full!',

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -209,20 +209,6 @@ const ProjectFlockDetail = ({
                 </Badge>
               </div>
 
-              {/* <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
-                <Icon width={14} height={14} icon={'mdi:clock'} /> History
-              </div>
-              <div className='col-span-2'>
-                <Button variant='outline' className='py-1 text-sm'>
-                  See History{' '}
-                  <Icon
-                    icon='mdi:arrow-top-right-thin'
-                    width={11}
-                    height={11}
-                  />
-                </Button>
-              </div> */}
-
               {/* BARIS 1 */}
               <div
                 className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
@@ -252,6 +238,18 @@ const ProjectFlockDetail = ({
               </div>
               <div className='col-span-2'>{projectFlock?.fcr?.name}</div>
 
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
+                Standard
+              </div>
+              <div className='col-span-2'>
+                {projectFlock?.production_standard?.name ?? '-'}
+              </div>
+
               {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
               <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
                 <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}

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

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

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

@@ -6,6 +6,7 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import {
   AreaApi,
   FcrApi,
@@ -38,11 +39,6 @@ import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import ApprovalSteps, {
-  useApprovalSteps,
-} from '@/components/pages/ApprovalSteps';
-import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import NumberInput from '@/components/input/NumberInput';
 import Card from '@/components/Card';
 import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
@@ -50,6 +46,7 @@ import { Nonstock } from '@/types/api/master-data/nonstock';
 import { useUiStore } from '@/stores/ui/ui.store';
 import RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -71,6 +68,7 @@ const ProjectFlockForm = ({
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
   const [selectedLocation, setSelectedLocation] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('');
   const [disabledLocation, setDisabledLocation] = useState(
     initialValues?.location?.id ? false : true
   );
@@ -90,18 +88,8 @@ const ProjectFlockForm = ({
   const setIsValid = useUiStore((s) => s.setIsValid);
 
   const deleteModal = useModal();
-  const confirmModal = useModal();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
-    initialValues?.approval?.step_name == 'Pengajuan' ? false : true
-  );
-  const [isRejectedDisabled, setIsRejectedDisabled] =
-    useState(!isApprovedDisabled);
-  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
-    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
-  );
 
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
     () =>
@@ -140,11 +128,15 @@ const ProjectFlockForm = ({
   const {
     options: optionsProductionStandards,
     isLoadingOptions: isLoadingProductionStandards,
-  } = useSelect(ProductionStandardApi.basePath, 'id', 'name');
+  } = useSelect(ProductionStandardApi.basePath, 'id', 'name', '', {
+    search: '',
+    project_category: selectedCategory,
+  });
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
+    limit: 'limit',
   }).toString()}`;
   const {
     data: kandang,
@@ -163,17 +155,6 @@ const ProjectFlockForm = ({
     isLoadingOptions: isLoadingNonstocks,
   } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
-  const {
-    approvals,
-    isLoading: approvalsLoading,
-    refresh: refreshApprovals,
-  } = useApprovalSteps({
-    latestApproval: initialValues?.approval,
-    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
-    moduleName: 'PROJECT_FLOCKS',
-    moduleId: initialValues?.id.toString() ?? '',
-  });
-
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
       if (selectedLocation) {
@@ -263,9 +244,19 @@ const ProjectFlockForm = ({
   };
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldValue('category', (val as OptionType)?.value);
+    // Reset production standard when category is changed
+    formik.setFieldValue('production_standard_id', '');
+    formik.setFieldValue('production_standard', '');
+
     formik.setFieldValue('category_option', val);
-    if (val == null) {
+    formik.setFieldValue('category', val ? (val as OptionType)?.value : '');
+
+    setSelectedCategory((val as OptionType)?.value as string);
+
+    if (Boolean(val)) {
+      formik.setFieldTouched('category', false);
+      formik.setFieldError('category', '');
+    } else {
       formik.setFieldTouched('category', true);
     }
   };
@@ -404,8 +395,6 @@ const ProjectFlockForm = ({
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
     validateOnBlur: true,
-    // validateOnChange: true,
-    // validateOnMount: true,
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
@@ -522,19 +511,6 @@ const ProjectFlockForm = ({
     return unsub;
   }, []);
 
-  useEffect(() => {
-    if (initialValues?.approval?.step_name) {
-      const pengajuanRejected =
-        initialValues.approval.step_number == 1 &&
-        initialValues.approval.action == 'REJECTED';
-      const approvedDisabled =
-        initialValues.approval.step_number !== 1 || pengajuanRejected;
-      setIsApprovedDisabled(approvedDisabled);
-      setIsRejectedDisabled(!approvedDisabled || pengajuanRejected);
-      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
-    }
-  }, [initialValues]);
-
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -588,29 +564,6 @@ const ProjectFlockForm = ({
     }
   };
 
-  const confirmApprovalHandler = async (
-    notes: string,
-    approvalAction: 'REJECTED' | 'APPROVED'
-  ) => {
-    if (initialValues?.id === undefined) return;
-    setIsApproveLoading(true);
-
-    const approvalRes =
-      approvalAction == 'APPROVED'
-        ? await ProjectFlockApi.approve(initialValues?.id, notes)
-        : await ProjectFlockApi.reject(initialValues?.id, notes);
-    if (isResponseSuccess(approvalRes)) {
-      refreshProjectFlocks?.();
-      toast.success(approvalRes.message as string);
-    }
-    if (isResponseError(approvalRes)) {
-      toast.error(approvalRes?.message as string);
-    }
-    refreshApprovals();
-    confirmModal.closeModal();
-    setIsApproveLoading(false);
-  };
-
   const handleBudgetChange = (
     index: number,
     fieldName: 'qty' | 'price' | 'total_price',
@@ -688,6 +641,9 @@ const ProjectFlockForm = ({
     return !isNonstockAlreadyInBudgets;
   });
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full'>
@@ -744,50 +700,10 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        {approvals && !approvalsLoading && formType == 'detail' && (
-          <ApprovalSteps approvals={approvals} />
-        )}
-        {formType == 'detail' && (
-          <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
-            <RequirePermission permissions='lti.production.project_flocks.approve'>
-              <Button
-                variant='outline'
-                color='success'
-                onClick={() => {
-                  if (initialValues?.id) {
-                    setApprovalAction('APPROVED');
-                    confirmModal.openModal();
-                  }
-                }}
-                disabled={!initialValues?.id || isApprovedDisabled}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='material-symbols:check' width={24} height={24} />
-                Approve
-              </Button>
-            </RequirePermission>
-            <RequirePermission permissions='lti.production.project_flocks.approve'>
-              <Button
-                variant='outline'
-                color='error'
-                onClick={() => {
-                  if (initialValues?.id) {
-                    setApprovalAction('REJECTED');
-                    confirmModal.openModal();
-                  }
-                }}
-                disabled={!initialValues?.id || isRejectedDisabled}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='mdi:times' width={24} height={24} />
-                Reject
-              </Button>
-            </RequirePermission>
-          </div>
-        )}
+
         <form
           className='w-auto h-auto'
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
         >
           {/* Form Informasi Umum */}
@@ -872,23 +788,6 @@ const ProjectFlockForm = ({
                 isClearable
                 isDisabled={formType != 'add'}
               />
-              <SelectInput
-                required
-                label='Standar Produksi'
-                value={formik.values.production_standard as OptionType}
-                onChange={(val) => {
-                  optionChangeHandler(val, 'production_standard');
-                }}
-                options={optionsProductionStandards}
-                isLoading={isLoadingProductionStandards}
-                isError={
-                  formik.touched.production_standard &&
-                  Boolean(formik.errors.production_standard)
-                }
-                errorMessage={formik.errors.production_standard as string}
-                isClearable
-                isDisabled={formType != 'add'}
-              />
               <SelectInput
                 required
                 label='Kategori'
@@ -902,6 +801,23 @@ const ProjectFlockForm = ({
                 isClearable
                 isDisabled={formType != 'add'}
               />
+              <SelectInput
+                required
+                label='Standar Produksi'
+                value={formik.values.production_standard as OptionType}
+                onChange={(val) => {
+                  optionChangeHandler(val, 'production_standard');
+                }}
+                options={optionsProductionStandards}
+                isLoading={isLoadingProductionStandards}
+                isError={
+                  formik.touched.production_standard_id &&
+                  Boolean(formik.errors.production_standard_id)
+                }
+                errorMessage={formik.errors.production_standard_id as string}
+                isClearable
+                isDisabled={formType != 'add'}
+              />
               <NumberInput
                 name='period'
                 label='Periode'
@@ -1153,15 +1069,9 @@ const ProjectFlockForm = ({
             </div>
           </div>
 
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
           <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
-            {/* <div className='w-120'>
-              <div className='text-primary text-sm'>
-                {JSON.stringify(formik.values)}
-              </div>
-              <div className='text-error text-sm'>
-                {JSON.stringify(formik.errors)}
-              </div>
-            </div> */}
             {formType !== 'detail' && (
               <RequirePermission
                 permissions={
@@ -1174,7 +1084,7 @@ const ProjectFlockForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4 w-full'
                 >
                   <Icon icon='mdi:plus' width={24} height={24} />
@@ -1200,27 +1110,6 @@ const ProjectFlockForm = ({
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      <ConfirmationModalWithNotes
-        ref={confirmModal.ref}
-        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${
-          approvalAction == 'APPROVED' ? 'approve' : 'reject'
-        } Project Flock berikut? (${initialValues?.flock_name} - ${
-          initialValues?.area?.name
-        })?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: approvalAction == 'APPROVED' ? 'success' : 'error',
-          isLoading: isApproveLoading,
-          onClick: (notes) => {
-            confirmApprovalHandler(notes, approvalAction);
-          },
-        }}
-      />
     </>
   );
 };

src/components/pages/production/recording/RecordingTable.tsx

@@ -872,7 +872,7 @@ const RecordingTable = () => {
             'mb-20':
               isResponseSuccess(recordings) && recordings?.data?.length === 0,
           }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full overflow-visible!',
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
           tableClassName: 'font-inter w-full table-auto min-h-full!',
           headerRowClassName: 'border-b border-b-gray-200',
           headerColumnClassName:

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
@@ -1700,16 +1737,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Egg Mass</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.egg_mesh &&
-                                initialValues.egg_mesh > 0
-                                  ? formatNumber(initialValues.egg_mesh)
+                                {initialValues.egg_mass &&
+                                initialValues.egg_mass > 0
+                                  ? formatNumber(initialValues.egg_mass)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.egg_mesh_std &&
-                              initialValues.egg_mesh_std > 0
-                                ? formatNumber(initialValues.egg_mesh_std)
+                              {initialValues.egg_mass_std &&
+                              initialValues.egg_mass_std > 0
+                                ? formatNumber(initialValues.egg_mass_std)
                                 : '-'}
                             </td>
                           </tr>
@@ -1736,16 +1773,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Hen Day</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.hand_day &&
-                                initialValues.hand_day > 0
-                                  ? formatNumber(initialValues.hand_day)
+                                {initialValues.hen_day &&
+                                initialValues.hen_day > 0
+                                  ? formatNumber(initialValues.hen_day)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.hand_day_std !== undefined &&
-                              initialValues.hand_day_std > 0
-                                ? `${initialValues.hand_day_std}%`
+                              {initialValues.hen_day_std !== undefined &&
+                              initialValues.hen_day_std > 0
+                                ? `${initialValues.hen_day_std}%`
                                 : '-'}
                             </td>
                           </tr>
@@ -1753,16 +1790,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Hen House</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.hand_house &&
-                                initialValues.hand_house > 0
-                                  ? formatNumber(initialValues.hand_house)
+                                {initialValues.hen_house &&
+                                initialValues.hen_house > 0
+                                  ? formatNumber(initialValues.hen_house)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.hand_house_std !== undefined &&
-                              initialValues.hand_house_std > 0
-                                ? `${initialValues.hand_house_std}%`
+                              {initialValues.hen_house_std !== undefined &&
+                              initialValues.hen_house_std > 0
+                                ? `${initialValues.hen_house_std}%`
                                 : '-'}
                             </td>
                           </tr>
@@ -2507,9 +2544,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={
-                      hasExceededStock || !formik.isValid || formik.isSubmitting
-                    }
+                    disabled={hasExceededStock || formik.isSubmitting}
                   >
                     Submit
                   </Button>
@@ -2534,9 +2569,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={
-                      hasExceededStock || !formik.isValid || formik.isSubmitting
-                    }
+                    disabled={hasExceededStock || 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

@@ -0,0 +1,159 @@
+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 { Uniformity, type ChartData } from '@/types/api/production/uniformity';
+
+interface UniformityChartProps {
+  uniformityData?: Uniformity | null;
+  isFiltered?: boolean;
+}
+
+const UniformityChart = ({
+  uniformityData,
+  isFiltered = false,
+}: UniformityChartProps) => {
+  const [currentWeekIndex, setCurrentWeekIndex] = useState(0);
+
+  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 (!chartData?.bar_chart || !chartData?.gauge_chart) {
+      return [];
+    }
+
+    const { bar_chart, gauge_chart } = chartData;
+    const currentWeekData = gauge_chart.available_weeks[currentWeekIndex];
+
+    if (!currentWeekData || !currentWeekData.has_data) {
+      return [];
+    }
+
+    const currentWeekStr = String(currentWeekData.week);
+    const weekData = bar_chart.all_weeks[currentWeekStr];
+
+    if (!weekData || !weekData.has_data) {
+      return [];
+    }
+
+    return weekData.weight_distribution.map((range) => ({
+      name: range.range,
+      uv: range.bird_count,
+      isIdeal: range.is_ideal_range,
+      idealRange: range.ideal_range,
+      outsideRange: range.outside_range,
+    }));
+  }, [chartData, currentWeekIndex]);
+
+  const gaugeChartData = useMemo(() => {
+    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: currentWeekData.uniformity_percentage,
+      label: 'Uniformity',
+      week: `Week ${currentWeekData.week}`,
+      currentValue: currentWeekData.ideal_count,
+      totalValue: currentWeekData.total_count,
+      hasPrevWeek,
+      hasNextWeek,
+    };
+  }, [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'>
+      <Card
+        title='Performance Overview ⓘ'
+        variant='bordered'
+        className={{
+          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
+          body: 'h-96',
+        }}
+      >
+        <div className='w-full h-full flex items-center justify-center'>
+          {shouldShowEmptyState ||
+          !uniformityData ||
+          barChartData.length === 0 ? (
+            <UniformityBarChartSkeleton />
+          ) : (
+            <UniformityBarChart data={barChartData} />
+          )}
+        </div>
+      </Card>
+      {shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
+        <Card
+          variant='bordered'
+          title='Weekly Performance ⓘ'
+          className={{
+            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
+            body: 'h-110',
+          }}
+        >
+          <UniformityGaugeChartSkeleton />
+        </Card>
+      ) : (
+        <Card
+          variant='bordered'
+          title='Weekly Performance ⓘ'
+          className={{
+            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
+            body: 'p-4',
+          }}
+        >
+          <UniformityGaugeChart
+            value={gaugeChartData.value}
+            label={gaugeChartData.label}
+            week={gaugeChartData.week}
+            currentValue={gaugeChartData.currentValue}
+            totalValue={gaugeChartData.totalValue}
+            onWeekChange={handleWeekChange}
+            hasPrevWeek={gaugeChartData.hasPrevWeek}
+            hasNextWeek={gaugeChartData.hasNextWeek}
+          />
+        </Card>
+      )}
+    </section>
+  );
+};
+
+export default UniformityChart;