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:
@@ -73,8 +87,8 @@ stages:
 
       if [ "$CI_COMMIT_BRANCH" = "development" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-PROD"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -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:
@@ -122,8 +138,6 @@ build:dev:
   environment:
     name: development
   variables:
-    # NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-    # NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
     NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
     NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
     NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
@@ -141,25 +155,31 @@ deploy:dev:
   environment:
     name: development
     url: https://dev-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
+# ==========================================================
+# ====== STAGING (Branch staging) ======
+# ==========================================================
+build:staging:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  environment:
+    name: staging
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
+deploy:staging:
+  <<: *deploy_template
+  needs: ['build:staging']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  variables:
+    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
+  environment:
+    name: staging
+    url: https://stg-lti-erp.mbugroup.id

.husky/pre-commit

@@ -1,3 +1,3 @@
 npm run format
 npm run lint
-npm run build
+npx tsc --noEmit

package.json

@@ -15,21 +15,35 @@
     "@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": "15.5.9",
+    "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",
-    "xlsx": "^0.18.5",
+    "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,23 +7,43 @@ 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))
   );
 
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -39,7 +59,12 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading =
+    isLoadingClosing ||
+    isLoadingSales ||
+    isLoadingHppEkspedisi ||
+    isLoadingProject ||
+    isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -50,6 +75,17 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? 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/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/dashboard/page.tsx

@@ -1,9 +1,7 @@
+import DashboardProduction from '@/components/pages/dashboard/DashboardProduction';
+
 const Dashboard = () => {
-  return (
-    <section className='w-full p-4'>
-      <h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
-    </section>
-  );
+  return <DashboardProduction />;
 };
 
 export default Dashboard;

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/finance/add/adjust/page.tsx

@@ -0,0 +1,5 @@
+const FinanceAdjust = () => {
+  return <div>Finance Adjust</div>;
+};
+
+export default FinanceAdjust;

src/app/finance/add/initial-balance/page.tsx

@@ -0,0 +1,7 @@
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const FinanceAddInitialBalancePage = () => {
+  return <FormFinanceAddInitialBalance type='add' />;
+};
+
+export default FinanceAddInitialBalancePage;

src/app/finance/add/injection/page.tsx

@@ -0,0 +1,7 @@
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const FinanceAddInjectionPage = () => {
+  return <FormFinanceInjection type='add' />;
+};
+
+export default FinanceAddInjectionPage;

src/app/finance/add/page.tsx

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

src/app/finance/detail/edit/initial-balance/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const EditFinanceInitialBalancePage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAddInitialBalance
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInitialBalancePage;

src/app/finance/detail/edit/injection/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const EditFinanceInjectionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceInjection
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInjectionPage;

src/app/finance/detail/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const EditFinanceTransactionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAdd
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceTransactionPage;

src/app/finance/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/finance/detail/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import FinanceDetail from '@/components/pages/finance/FinanceDetail';
+import useSWR from 'swr';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const FinanceDetailPage = () => {
+  const router = useRouter();
+  const financeId = useSearchParams().get('financeId');
+
+  const { data: finance } = useSWR(financeId, () =>
+    FinanceApi.getSingle(Number(financeId))
+  );
+
+  if (!financeId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  console.log(finance);
+
+  // if (!finance || isResponseError(finance)) {
+  //   router.replace('/404');
+  //   return;
+  // }
+
+  return (
+    <>
+      {isResponseSuccess(finance) && <FinanceDetail finance={finance.data} />}
+    </>
+  );
+};
+
+export default FinanceDetailPage;

src/app/finance/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import FinanceTable from '@/components/pages/finance/FinanceTable';
+
+const Finance = () => {
+  return (
+    <section className='size-full p-6'>
+      <div className='flex flex-row gap-4'></div>
+      <FinanceTable />
+    </section>
+  );
+};
+
+export default Finance;

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/master-data/production-standard/add/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+
+const AddProductionStandardPage = () => {
+  return (
+    <>
+      <ProductionStandardForm formType='add' />
+    </>
+  );
+};
+
+export default AddProductionStandardPage;

src/app/master-data/production-standard/detail/edit/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProductionStandardApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const EditProductionStandardPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const productionStandardId = searchParams.get('productionStandardId');
+
+  // Fetch Data
+  const { data: productionStandard, isLoading: isLoadingProductionStandard } =
+    useSWR(productionStandardId, (id: number) =>
+      ProductionStandardApi.getSingle(id)
+    );
+
+  if (!productionStandardId) {
+    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 (
+    !isLoadingProductionStandard &&
+    (!productionStandard || isResponseError(productionStandard))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      {isLoadingProductionStandard && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductionStandard &&
+        isResponseSuccess(productionStandard) && (
+          <ProductionStandardForm
+            formType='edit'
+            initialValue={productionStandard.data}
+          />
+        )}
+    </>
+  );
+};
+
+export default EditProductionStandardPage;

src/app/master-data/production-standard/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/master-data/production-standard/detail/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProductionStandardApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const DetailProductionStandardPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const productionStandardId = searchParams.get('productionStandardId');
+
+  // Fetch Data
+  const { data: productionStandard, isLoading: isLoadingProductionStandard } =
+    useSWR(productionStandardId, (id: number) =>
+      ProductionStandardApi.getSingle(id)
+    );
+
+  if (!productionStandardId) {
+    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 (
+    !isLoadingProductionStandard &&
+    (!productionStandard || isResponseError(productionStandard))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      {isLoadingProductionStandard && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductionStandard &&
+        isResponseSuccess(productionStandard) && (
+          <ProductionStandardForm
+            formType='detail'
+            initialValue={productionStandard.data}
+          />
+        )}
+    </>
+  );
+};
+
+export default DetailProductionStandardPage;

src/app/master-data/production-standard/page.tsx

@@ -0,0 +1,11 @@
+import ProductionStandardTable from '@/components/pages/master-data/production-standard/ProductionStandardTable';
+
+const ProductionStandardPage = () => {
+  return (
+    <div className='w-full'>
+      <ProductionStandardTable />
+    </div>
+  );
+};
+
+export default ProductionStandardPage;

src/app/production/project-flock/chickin/add/page.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
-import { useSearchParams } from 'next/navigation';
-
-const AddChickin = () => {
-  const searchParams = useSearchParams();
-  const projectFlockId = searchParams.get('projectFlockId');
-
-  return (
-    <>
-      <section className='w-full'>
-        <ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
-      </section>
-    </>
-  );
-};
-
-export default AddChickin;

src/app/production/project-flock/chickin/page.tsx

@@ -1,10 +0,0 @@
-import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
-
-const Chickin = () => {
-  return (
-    <section className='w-full'>
-      <ChickinTable />
-    </section>
-  );
-};
-export default Chickin;

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/expense/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/report/expense/detail/page.tsx

@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;

src/app/report/expense/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+
+const ReportExpense = () => {
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable />
+    </div>
+  );
+};
+
+export default ReportExpense;

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/app/report/logistic-stock/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/report/logistic-stock/page.tsx

@@ -0,0 +1,7 @@
+import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
+
+const LogisticStock = () => {
+  return <LogisticStockTabs />;
+};
+
+export default LogisticStock;

src/app/report/marketing/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/report/production-result/page.tsx

@@ -0,0 +1,11 @@
+import ProductionResultContent from '@/components/pages/report/production-result/ProductionResultContent';
+
+const ProductionResultReportPage = () => {
+  return (
+    <section className='w-full max-w-7xl pb-16'>
+      <ProductionResultContent />
+    </section>
+  );
+};
+
+export default ProductionResultReportPage;

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 min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -76,7 +89,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full 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/Dropdown.tsx

@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/FloatingActionsButton.tsx

@@ -5,6 +5,8 @@ import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
+import { useAuth } from '@/services/hooks/useAuth';
+
 type FloatingActionsButtonProps = {
   actions: {
     action: 'DETAIL' | 'EDIT' | 'DELETE';
@@ -13,6 +15,7 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -20,6 +23,7 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -31,9 +35,12 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
+  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
-    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';
+    selectedRowIds.length > 0
+      ? 'bottom-[5%] opacity-100'
+      : 'bottom-[-5%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -53,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'
       )}
@@ -69,7 +76,18 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .filter((action) => !action.hidden)
+                .filter((action) => {
+                  if (action.hidden) return false;
+                  if (action.permissions) {
+                    if (typeof action.permissions === 'string') {
+                      return permissionCheck(action.permissions);
+                    }
+                    return action.permissions.some((permission) =>
+                      permissionCheck(permission)
+                    );
+                  }
+                  return true;
+                })
                 .map((action, index) => {
                   return (
                     <Button
@@ -109,29 +127,41 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals.map((approval, index) => (
-            <Button
-              key={index}
-              onClick={approval.onClick}
-              className={cn(
-                'btn btn-lg w-full',
-                'bg-white/20 border-white/30',
-                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
-                approval.disabled
-                  ? 'cursor-not-allowed'
-                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
-              )}
-              disabled={approval.disabled}
-            >
-              <Icon
-                icon={approval.icon}
-                width={20}
-                height={20}
-                className={`text-${getApprovalColor(approval.action)}`}
-              />
-              {approval.label || approval.action}
-            </Button>
-          ))}
+          {approvals
+            .filter((approval) => {
+              if (approval.permissions) {
+                if (typeof approval.permissions === 'string') {
+                  return permissionCheck(approval.permissions);
+                }
+                return approval.permissions.some((permission) =>
+                  permissionCheck(permission)
+                );
+              }
+              return true;
+            })
+            .map((approval, index) => (
+              <Button
+                key={index}
+                onClick={approval.onClick}
+                className={cn(
+                  'btn btn-lg w-full',
+                  'bg-white/20 border-white/30',
+                  'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                  approval.disabled
+                    ? 'cursor-not-allowed'
+                    : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
+                )}
+                disabled={approval.disabled}
+              >
+                <Icon
+                  icon={approval.icon}
+                  width={20}
+                  height={20}
+                  className={`text-${getApprovalColor(approval.action)}`}
+                />
+                {approval.label || approval.action}
+              </Button>
+            ))}
         </div>
       </div>
     </div>

src/components/MainDrawer.tsx

@@ -9,10 +9,13 @@ import Drawer from '@/components/Drawer';
 import Navbar from '@/components/Navbar';
 import Button from '@/components/Button';
 import SidebarMenu from '@/components/molecules/SidebarMenu';
+import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
 import { isPathActive } from '@/lib/helper';
+import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const MainDrawerContent = () => {
   const pathname = usePathname();
@@ -62,6 +65,13 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
+  const { permissionCheck } = useAuth();
+
+  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
+
+  const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
+    permissionCheck(permission)
+  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -101,6 +111,10 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
+  if (!isPermitted) {
+    return <PermissionNotFound />;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@iconify/react';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
+import Dropdown from '@/components/Dropdown';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';

src/components/Table.tsx

@@ -60,6 +60,12 @@ export interface TableProps<TData extends object> {
   renderFooter?: boolean;
   withCheckbox?: boolean;
   rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -112,6 +118,7 @@ const Table = <TData extends object>({
   renderFooter = false,
   withCheckbox = false,
   rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -305,24 +312,35 @@ const Table = <TData extends object>({
           </thead>
 
           <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={tableClassNames.bodyRowClassName}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={cn(
-                      { 'first:w-9 first:pr-0': withCheckbox },
-                      tableClassNames.bodyColumnClassName
-                    )}
-                  >
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+            {table.getRowModel().rows.map((row) => {
+              const customRowContent = renderCustomRow?.(row);
 
-                    {isLoading && <div className='skeleton w-full h-4' />}
-                  </td>
-                ))}
-              </tr>
-            ))}
+              if (customRowContent) {
+                return renderCustomRow?.(row);
+              }
+
+              return (
+                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={cn(
+                        { 'first:w-9 first:pr-0': withCheckbox },
+                        tableClassNames.bodyColumnClassName
+                      )}
+                    >
+                      {!isLoading &&
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+
+                      {isLoading && <div className='skeleton w-full h-4' />}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
           </tbody>
           <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (

src/components/helper/PermissionNotFound.tsx

@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+  return (
+    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <p className='text-gray-600 text-center'>
+        You do not have permission to access this page.
+      </p>
+    </div>
+  );
+};
+
+export default PermissionNotFound;

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/RequirePermission.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+  children: React.ReactNode;
+  permissions: string | string[];
+}
+
+const RequirePermission = ({
+  children,
+  permissions,
+}: RequirePermissionProps) => {
+  const { permissionCheck } = useAuth();
+
+  const isPermitted =
+    typeof permissions === 'string'
+      ? permissionCheck(permissions)
+      : permissions.some((permission) => permissionCheck(permission));
+
+  if (!isPermitted) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequirePermission;

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/DebouncedTextInput.tsx

@@ -24,6 +24,11 @@ const DebouncedTextInput = (props: DebouncedTextInputProps) => {
     setInternalChangeEvent(e);
   };
 
+  // Sync internal value with external value prop changes (e.g., from reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
   useEffect(() => {
     if (debouncedChangeEvent) {
       onChange?.(debouncedChangeEvent);

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/molecules/SidebarMenu.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import Menu from '@/components/menu/Menu';
 import { Icon } from '@iconify/react';
 import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
 
 export interface SidebarMenuItem {
   type?: 'item' | 'title';
@@ -9,6 +10,7 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
+  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -22,8 +24,17 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
   const isItemActive = isPathActive(activeLink, item.link);
 
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
   const menuItemWithoutSubmenu = (
     <li>
       <Link
@@ -78,13 +89,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => (
-        <SidebarMenuItem
-          key={menuIdx}
-          item={menuItem}
-          activeLink={activeLink}
-        />
-      ))}
+      {menu.map((menuItem, menuIdx) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
     </Menu>
   );
 };

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

@@ -12,21 +12,32 @@ import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingP
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
 import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
 import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
-import SalesReportTable from './sale/SalesReportTable';
-
+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> = ({
   id,
   initialValue,
   salesData,
+  hppExpeditionData,
+  projectData,
+  kandangData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -40,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',
@@ -55,7 +71,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: 'HPP Ekspedisi',
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',
@@ -65,7 +81,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: 'Keuangan',
+        content: <ClosingFinanceTabContent projectFlockId={id} />,
       },
     ];
 
@@ -77,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'
           >
@@ -88,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/ClosingFinanceTabContent.tsx

@@ -0,0 +1,17 @@
+import ClosingFinanceTable from '@/components/pages/closing/ClosingFinanceTable';
+
+const ClosingFinanceTabContent = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <ClosingFinanceTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default ClosingFinanceTabContent;

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -0,0 +1,595 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import {
+  DataSummarySubTotal,
+  HppPurchaseData,
+  ProfitLossDataAmount,
+} from '@/types/api/closing';
+import useSWR from 'swr';
+
+type HppTableRow =
+  | (HppPurchaseData & {
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      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 =
+  | (DataSummarySubTotal & {
+      type: string;
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      rp_per_bird?: never;
+      rp_per_kg?: never;
+      amount?: never;
+    };
+
+const ClosingFinanceTable = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  const { data: finance, isLoading } = useSWR(
+    `/closing/finance/${projectFlockId}`,
+    () => ClosingApi.getFinance(projectFlockId)
+  );
+
+  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)
+    ? [
+        // Pembelian group
+        ...finance.data.profit_loss.data.pembelian.map((item) => ({
+          label: 'Pembelian',
+          group_name: 'Pembelian',
+          group_index: 1,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.gross_profit.label,
+          group_name: 'Penjualan',
+          group_index: 0,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.gross_profit.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
+          rp_per_kg:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
+        },
+        // Penjualan group
+        ...finance.data.profit_loss.data.penjualan.map((item) => ({
+          label: 'Penjualan',
+          group_name: 'Penjualan',
+          group_index: 0,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.sub_total.label,
+          group_name: 'Pembelian',
+          group_index: 1,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.sub_total.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.sub_total.rp_per_bird,
+          rp_per_kg: finance.data.profit_loss.data.summary.sub_total.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.sub_total.amount,
+        },
+      ]
+    : [];
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-6'>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.gross_profit
+                        .label || '-'
+                    )
+                  : 'Laba Rugi Brutto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.gross_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.net_profit.label ||
+                        '-'
+                    )
+                  : 'Laba Rugi Netto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.net_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.hpp_purchases.title
+              : 'HPP Purchases'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<HppTableRow>
+              data={hppTableData}
+              columns={[
+                {
+                  header: 'No.',
+                  enableSorting: false,
+                  accessorFn: (item, index) => {
+                    if (item.isGroupHeader) return '-';
+                    const dataRowsBefore = hppTableData
+                      .slice(0, index)
+                      .filter((row) => !row.isGroupHeader).length;
+                    return dataRowsBefore + 1;
+                  },
+                  footer: (props) => {
+                    return 'HPP';
+                  },
+                },
+                {
+                  header: 'Type',
+                  enableSorting: false,
+                  accessorFn: (item) => formatTitleCase(item.type || '-'),
+                },
+                {
+                  header: 'Budgeting',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'budgeting_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'budgeting_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'budgeting_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                                ?.amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+                {
+                  header: 'Realization',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'realization_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.realization?.rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'realization_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.realization?.rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'realization_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp
+                                ?.realization?.amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      ></td>
+                      <td
+                        colSpan={7}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.profit_loss.title
+              : 'Profit/Loss'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<ProfitLossTableRow>
+              data={profitLossTableData}
+              columns={[
+                {
+                  header: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => item.type,
+                  cell: (item) => (
+                    <div className=''>
+                      {formatTitleCase(item.row.original.type || '-')}
+                    </div>
+                  ),
+                  footer: (item) => (
+                    <div className='font-bold uppercase'>
+                      {isResponseSuccess(finance)
+                        ? formatTitleCase(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .label || '-'
+                          )
+                        : '-'}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Ekor',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_bird || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Kg',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_kg || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Jumlah (Rp)',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.amount || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .amount || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  if (rowData.amount) {
+                    return (
+                      <tr
+                        key={row.id}
+                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
+                      >
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold ps-6 uppercase'>
+                            {formatTitleCase(rowData.label ?? '-')}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_bird ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_kg ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.amount ?? 0)}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  }
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        colSpan={4}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              className={{
+                paginationClassName: 'hidden',
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+      </>
+    </div>
+  );
+};
+
+export default ClosingFinanceTable;

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>
@@ -25,14 +44,22 @@ const ClosingGeneralInformationTable = ({
                   <td>{initialValue?.period}</td>
                 </tr>
                 <tr>
-                  <td>Kategori</td>
+                  <td>Project Flock</td>
                   <td>:</td>
-                  <td>{initialValue?.project_category}</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

@@ -33,7 +33,7 @@ const ClosingProductionDataTabContent = ({
     );
   }
 
-  const { purchase, sales, performance, variance } = productionData.data;
+  const { purchase, sales, performance } = productionData.data;
 
   // Helper for consistent row styling
   const DataRow = ({
@@ -58,39 +58,6 @@ const ClosingProductionDataTabContent = ({
     </div>
   );
 
-  // Helper for rows with two values (e.g., Deplesi: Ekor & %)
-  const DoubleDataRow = ({
-    label,
-    value1,
-    unit1,
-    value2,
-    unit2,
-    value1ClassName = 'font-bold text-gray-800',
-    value2ClassName = 'font-bold text-blue-500',
-  }: {
-    label: string;
-    value1: string | number;
-    unit1: string;
-    value2: string | number;
-    unit2: string;
-    value1ClassName?: string;
-    value2ClassName?: string;
-  }) => (
-    <div className='flex justify-between items-center py-1'>
-      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
-      <div className='flex gap-2 w-1/2 justify-end items-center'>
-        <div className='flex gap-2 items-center min-w-[5rem] justify-end'>
-          <span className={value1ClassName}>{value1}</span>
-          <span className='text-gray-500 w-8 text-right'>{unit1}</span>
-        </div>
-        <div className='flex gap-2 items-center min-w-[4rem] justify-end ml-2'>
-          <span className={value2ClassName}>{value2}</span>
-          <span className='text-gray-500 w-4 text-right'>{unit2}</span>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
     <div className='w-full rounded-xl p-8 shadow-sm'>
       <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
@@ -121,17 +88,12 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='Pakan Masuk'
-                value={formatNumber(purchase.feed_in_kg)}
+                value={formatNumber(purchase.feed_in)}
                 unit='Kg'
               />
               <DataRow
                 label='Pakan Terpakai'
-                value={formatNumber(purchase.feed_used_kg)}
-                unit='Kg'
-              />
-              <DataRow
-                label='Pakan Terpakai per Ekor'
-                value={formatNumber(purchase.feed_used_per_head_kg)}
+                value={formatNumber(purchase.feed_used)}
                 unit='Kg'
               />
             </div>
@@ -142,27 +104,59 @@ const ClosingProductionDataTabContent = ({
             <h3 className='font-bold text-gray-700 mb-4 text-base'>
               Penjualan
             </h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Penjualan (Kg)'
-                value={formatNumber(sales.sales_kg)}
-                unit='Kg'
-              />
-              <DataRow
-                label='Penjualan (Ekor)'
-                value={formatNumber(sales.sales_head)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Bobot Rata-Rata'
-                value={formatNumber(sales.average_weight_kg)}
-                unit='Kg/Ekor'
-              />
-              <DataRow
-                label='Harga Jual Rata-Rata'
-                value={formatNumber(sales.average_price_per_kg)}
-                unit='Rupiah'
-              />
+            <div className='space-y-4'>
+              {/* Chicken Sales */}
+              <div className='space-y-1'>
+                <DataRow
+                  label='Penjualan (Ekor)'
+                  value={formatNumber(sales.chicken.sales_population)}
+                  unit='Ekor'
+                />
+                <DataRow
+                  label='Penjualan (Kg)'
+                  value={formatNumber(sales.chicken.sales_weight)}
+                  unit='Kg'
+                />
+                <DataRow
+                  label='Bobot Rata-Rata'
+                  value={formatNumber(sales.chicken.avg_weight)}
+                  unit='Kg/Ekor'
+                />
+                <DataRow
+                  label='Harga Jual Rata-Rata'
+                  value={formatNumber(sales.chicken.avg_selling_price)}
+                  unit='Rupiah'
+                />
+              </div>
+
+              {/* Egg Sales (if available) */}
+              {sales.egg && (
+                <>
+                  <div className='h-px bg-gray-100 my-2' />
+                  <div className='space-y-1'>
+                    <DataRow
+                      label='Telur (Butir)'
+                      value={formatNumber(sales.egg.egg_pieces)}
+                      unit='Butir'
+                    />
+                    <DataRow
+                      label='Telur (Kg)'
+                      value={formatNumber(sales.egg.egg_mass)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Berat Telur Rata-Rata'
+                      value={formatNumber(sales.egg.avg_egg_weight)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Harga Jual Telur Rata-Rata'
+                      value={formatNumber(sales.egg.avg_selling_price)}
+                      unit='Rupiah'
+                    />
+                  </div>
+                </>
+              )}
             </div>
           </section>
         </div>
@@ -178,33 +172,49 @@ const ClosingProductionDataTabContent = ({
               Performance
             </h3>
             <div className='space-y-1'>
-              <DoubleDataRow
+              <DataRow
                 label='Deplesi'
-                value1={formatNumber(performance.depletion_head)}
-                unit1='Ekor'
-                value2={formatNumber(performance.depletion_percentage)}
-                unit2='%'
+                value={formatNumber(performance.depletion)}
+                unit='Ekor'
               />
               <DataRow
                 label='Umur'
-                value={formatNumber(performance.age_days)}
+                value={formatNumber(performance.age_day)}
                 unit='Hari'
-                // Aligning 'Hari' with the first unit column of double row
-                unitClassName='text-gray-500 w-8 text-right mr-[4.5rem]'
               />
               <DataRow
                 label='Mortalitas Std'
-                value={formatNumber(performance.mortality_std)}
-                unitClassName='hidden' // No unit shown in screenshot
+                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
@@ -219,44 +229,70 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='DEFF FCR'
-                value={formatNumber(performance.deff_fcr)}
+                value={formatNumber(performance.fcr_diff)}
                 unitClassName='hidden'
               />
-              <DataRow
-                label='ADG'
-                value={formatNumber(performance.adg)}
-                unit='Gr/Hari'
-              />
-              <DataRow
-                label='IP'
-                value={formatNumber(performance.ip)}
-                unitClassName='hidden'
-              />
-            </div>
-          </section>
 
-          {/* Variance Section (Pushed to bottom) */}
-          <section className='mt-auto pt-4'>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>Selisih</h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Selisih Ayam'
-                value={formatNumber(variance.variance_head)}
-                unit='Ekor'
-                valueClassName='font-bold text-red-500'
-              />
-              <DataRow
-                label='% Selisih Ayam'
-                value={formatNumber(variance.variance_head_percentage)}
-                unit='%'
-                valueClassName='font-bold text-red-500'
-              />
-              <DataRow
-                label='Selisih Pakan'
-                value={formatNumber(variance.variance_feed_kg)}
-                unit='Kg'
-                valueClassName='font-bold text-red-500'
-              />
+              {/* 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 { cn, 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]
   );
@@ -139,7 +164,7 @@ const ClosingSapronakCalculationTable = ({
   const ovkColumns = useMemo(
     () =>
       isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.ovk.total)
+        ? createColumns(sapronakCalculation.data?.ovk?.total)
         : createColumns(),
     [sapronakCalculation]
   );
@@ -147,73 +172,95 @@ const ClosingSapronakCalculationTable = ({
   const pakanColumns = useMemo(
     () =>
       isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.pakan.total)
+        ? createColumns(sapronakCalculation.data?.pakan?.total)
         : createColumns(),
     [sapronakCalculation]
   );
 
   return (
     <div className='flex flex-col gap-4'>
-      {isResponseSuccess(sapronakCalculation) && (
-        <>
-          <Card
-            title='DOC Broiler'
-            collapsible
-            defaultCollapsed={false}
-            className={{
-              wrapper: 'w-full',
-              body: 'p-4 shadow',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.doc_broiler.rows ?? []}
-              columns={docBroilerColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
+      {/* Table DOC jika kategori Project Flock Growing */}
+      <Card
+        title={
+          closingGeneralInformation?.project_type == 'GROWING'
+            ? 'DOC'
+            : 'Pullet'
+        }
+        collapsible
+        defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.doc?.rows ?? [])
+              : []
+          }
+          columns={docColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.doc?.rows.length > 0
+          }
+        />
+      </Card>
 
-          <Card
-            title='OVK'
-            variant='bordered'
-            collapsible
-            defaultCollapsed={true}
-            className={{
-              wrapper: 'w-full',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.ovk.rows ?? []}
-              columns={ovkColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
+      <Card
+        title='OVK'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.ovk?.rows ?? [])
+              : []
+          }
+          columns={ovkColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.ovk?.rows.length > 0
+          }
+        />
+      </Card>
 
-          <Card
-            title='Pakan'
-            variant='bordered'
-            collapsible
-            defaultCollapsed={true}
-            className={{
-              wrapper: 'w-full',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.pakan.rows ?? []}
-              columns={pakanColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
-        </>
-      )}
+      <Card
+        title='Pakan'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.pakan?.rows ?? [])
+              : []
+          }
+          columns={pakanColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={
+            isResponseSuccess(sapronakCalculation) &&
+            sapronakCalculation.data?.pakan?.rows.length > 0
+          }
+        />
+      </Card>
     </div>
   );
 };

src/components/pages/closing/ClosingsTable.tsx

@@ -15,6 +15,8 @@ import SelectInput, {
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+
 import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -43,17 +45,18 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/closing/detail/?closingId=${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 permissions='lti.closing.detail'>
+          <Button
+            href={`/closing/detail/?closingId=${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>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -123,28 +126,6 @@ const ClosingsTable = () => {
       accessorKey: 'shed_label',
       header: 'Jumlah Kandang',
     },
-    {
-      accessorKey: 'sales_paid_amount',
-      header: 'Jumlah Sudah Bayar',
-      cell: (props) => (
-        <span className='text-success'>
-          {formatCurrency(props.row.original.sales_paid_amount)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'sales_remaining_amount',
-      header: 'Jumlah Sisa Bayar',
-      cell: (props) => (
-        <span className='text-error'>
-          {formatCurrency(props.row.original.sales_remaining_amount)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'sales_payment_status',
-      header: 'Status Pembayaran',
-    },
     {
       accessorKey: 'project_status',
       header: 'Status',

src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          cell: (props) => {
+            const value = props.getValue() as number;
+            return <div className='text-right'>{formatCurrency(value)}</div>;
+          },
+          footer: () => (
+            <div className='text-right font-semibold text-gray-900'>
+              {formatCurrency(totals.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default HppExpeditionReportTable;

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

@@ -0,0 +1,491 @@
+'use client';
+
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import Modal, { useModal } from '@/components/Modal';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { DashboardApi } from '@/services/api/dashboard';
+import { useFormik } from 'formik';
+import { ProjectFlockApi } from '@/services/api/production';
+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 [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
+    'OVERVIEW'
+  );
+  const [endpointUrl, setEndpointUrl] = useState('/dashboards');
+  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+
+  // ===== FETCH DATA =====
+  const {
+    data: dashboardProductionResponse,
+    isLoading: isLoadingDashboardProductionData,
+    mutate: refreshDashboardProductionData,
+  } = useSWR(endpointUrl, () =>
+    DashboardApi.getDashboardProductionFetcher(endpointUrl)
+  );
+
+  const dashboardProductionData = isResponseSuccess(dashboardProductionResponse)
+    ? dashboardProductionResponse.data
+    : undefined;
+
+  // ===== SELECT =====
+  const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
+    useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
+      limit: 'limit',
+      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+    });
+  const {
+    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({
+    initialValues: {
+      startDate: '',
+      endDate: '',
+      flock: [] as OptionType[],
+      location: [] as OptionType[],
+      kandang: [] as OptionType[],
+      analysisMode: analysisMode,
+      comparisonType: '',
+      lokasiIds: [],
+      flockIds: [],
+      kandangIds: [],
+    } as DashboardFilterType,
+    validationSchema: getDashboardFilterSchema(analysisMode),
+    onSubmit: (values) => {
+      console.log(values);
+
+      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();
+    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'>
+        <span className='loading loading-spinner loading-xl'></span>
+      </div>
+    );
+  }
+  return (
+    <>
+      <section className='w-full p-4 space-y-6'>
+        <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
+          <div></div>
+          <div className='flex flex-row justify-end gap-2'>
+            <Button
+              variant='outline'
+              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}
+                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'
+              color='neutral'
+              className='min-w-28 rounded-lg'
+            >
+              <Icon icon='heroicons:arrow-down-tray' width={20} height={20} />
+              Export
+              <Icon icon='heroicons:chevron-down' width={20} height={20} />
+            </Button>
+          </div>
+        </div>
+
+        {/* Dashboard Stats */}
+        <DashboardStats data={dashboardProductionData?.statistics_data ?? []} />
+
+        {/* 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={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-xl',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300'>
+            <div className='flex items-center gap-2 ms-4'>
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              <h3 className='font-semibold'>Filter Data</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={() => filterModal.closeModal()}
+              className='text-gray-500 hover:text-gray-700 me-4 '
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+
+          <form
+            className='space-y-4'
+            onSubmit={handleFormSubmit}
+            onReset={handleResetFilter}
+          >
+            {/* Rentang Waktu */}
+            <div className='px-4'>
+              <label className='flex items-center gap-2 mb-3'>Tanggal</label>
+              <div className='flex items-center gap-2'>
+                <DateInput
+                  name='startDate'
+                  placeholder='Tanggal Mulai'
+                  value={formik.values.startDate}
+                  errorMessage={formik.errors.startDate}
+                  onChange={formik.handleChange}
+                  className={{
+                    inputWrapper: 'rounded-lg',
+                  }}
+                  isError={
+                    Boolean(formik.errors.startDate) &&
+                    Boolean(formik.touched.startDate)
+                  }
+                />
+                <span className='hidden md:block text-center'>—</span>
+                <DateInput
+                  name='endDate'
+                  placeholder='Tanggal Akhir'
+                  value={formik.values.endDate}
+                  errorMessage={formik.errors.endDate}
+                  onChange={formik.handleChange}
+                  className={{
+                    inputWrapper: 'rounded-lg',
+                  }}
+                  isError={
+                    Boolean(formik.errors.endDate) &&
+                    Boolean(formik.touched.endDate)
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Analysis Mode */}
+            <div className='px-4'>
+              <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.location) &&
+                  Boolean(formik.touched.location)
+                }
+              />
+            </div>
+
+            {/* 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>
+            )}
+
+            {/* 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'>
+              <Button
+                type='reset'
+                variant='soft'
+                className='ms-4 min-w-36 rounded-lg'
+                onClick={handleResetFilter}
+              >
+                Reset Filter
+              </Button>
+              <Button type='submit' className='me-4 min-w-36 rounded-lg'>
+                Terapkan Filter
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default DashboardProduction;

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/filter/DashboardProductionFilter.schema.ts

@@ -0,0 +1,117 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as yup from 'yup';
+
+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;
+};
+
+// 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;
+      }),
+  });
+
+// 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

@@ -4,6 +4,7 @@ import toast from 'react-hot-toast';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import DropFileInput from '@/components/input/DropFileInput';
 
@@ -15,7 +16,7 @@ import {
 } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
 import { ExpenseApi } from '@/services/api/expense';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 interface ExpenseRealizationContentProps {
   initialValues?: Expense;
@@ -47,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);
   };
 
@@ -62,16 +70,17 @@ const ExpenseRealizationContent = ({
     <div>
       <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
         <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
-          {/* TODO: apply RBAC */}
-          <Button
-            type='button'
-            color='warning'
-            href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
-            className='px-4 grow sm:grow-0'
-          >
-            <Icon icon='mdi:pencil-outline' width={24} height={24} />
-            Edit Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.update.realization'>
+            <Button
+              type='button'
+              color='warning'
+              href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
+              className='px-4 grow sm:grow-0'
+            >
+              <Icon icon='mdi:pencil-outline' width={24} height={24} />
+              Edit Realisasi
+            </Button>
+          </RequirePermission>
         </div>
       </div>
 
@@ -101,59 +110,69 @@ const ExpenseRealizationContent = ({
                     initialValues?.realization_docs.length > 0 && (
                       <ul className='list-disc'>
                         {initialValues?.realization_docs.map(
-                          (realizationDocument, realizationDocumentIdx) => (
-                            <li key={realizationDocumentIdx}>
-                              <Link
-                                href={realizationDocument.path}
-                                target='_blank'
-                                rel='noopener noreferrer'
-                                className='text-blue-500 underline'
-                              >
-                                {realizationDocument.path}{' '}
-                                <Icon
-                                  icon='cuida:open-in-new-tab-outline'
-                                  width={12}
-                                  height={12}
-                                  className='inline'
-                                />
-                              </Link>
-                            </li>
-                          )
+                          (realizationDocument, realizationDocumentIdx) => {
+                            const path = realizationDocument.path.startsWith(
+                              '/'
+                            )
+                              ? realizationDocument.path.slice(1)
+                              : realizationDocument.path;
+                            const documentUrl = `${S3_PUBLIC_BASE_URL}/${path}`;
+                            return (
+                              <li key={realizationDocumentIdx}>
+                                <Link
+                                  href={documentUrl}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='text-blue-500 underline'
+                                >
+                                  {realizationDocument.path}{' '}
+                                  <Icon
+                                    icon='cuida:open-in-new-tab-outline'
+                                    width={12}
+                                    height={12}
+                                    className='inline'
+                                  />
+                                </Link>
+                              </li>
+                            );
+                          }
                         )}
                       </ul>
                     )}
                 </div>
 
-                <div className='flex flex-col gap-2'>
-                  <DropFileInput
-                    name='documents'
-                    values={formik.values.documents}
-                    onChange={realizationDocumentsChangeHandler}
-                    onDelete={realizationDocumentsDeleteHandler}
-                    accept={{
-                      ...ACCEPTED_FILE_TYPE.PDF,
-                      ...ACCEPTED_FILE_TYPE.IMAGE,
-                    }}
-                    maxFiles={10}
-                    className={{
-                      wrapper: 'mt-2',
-                      inputWrapper: 'flex items-center',
-                    }}
-                  />
+                <RequirePermission permissions='lti.expense.document.realization'>
+                  <div className='flex flex-col gap-2'>
+                    <DropFileInput
+                      name='documents'
+                      values={formik.values.documents}
+                      onChange={realizationDocumentsChangeHandler}
+                      onDelete={realizationDocumentsDeleteHandler}
+                      accept={{
+                        ...ACCEPTED_FILE_TYPE.PDF,
+                        ...ACCEPTED_FILE_TYPE.IMAGE,
+                      }}
+                      maxFiles={10}
+                      className={{
+                        wrapper: 'mt-2',
+                        inputWrapper: 'flex items-center',
+                      }}
+                    />
 
-                  {formik.values.documents &&
-                    formik.values.documents.length > 0 && (
-                      <Button
-                        onClick={formik.submitForm}
-                        disabled={formik.isSubmitting}
-                        isLoading={formik.isSubmitting}
-                        className='w-fit self-end'
-                      >
-                        <Icon icon='ic:round-plus' width={24} height={24} />
-                        Tambah
-                      </Button>
-                    )}
-                </div>
+                    {formik.values.documents &&
+                      formik.values.documents.length > 0 && (
+                        <Button
+                          onClick={formik.submitForm}
+                          disabled={formik.isSubmitting}
+                          isLoading={formik.isSubmitting}
+                          className='w-fit self-end'
+                        >
+                          <Icon icon='ic:round-plus' width={24} height={24} />
+                          Tambah
+                        </Button>
+                      )}
+                  </div>
+                </RequirePermission>
               </td>
             </tr>
           </tbody>
@@ -207,7 +226,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.pengajuans?.forEach(
-              (item) => (expenseGrandTotal += item.price)
+              (item) => (expenseGrandTotal += item.qty * item.price)
             );
 
             return (
@@ -269,7 +288,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.realisasi?.forEach(
-              (item) => (expenseGrandTotal += item.price)
+              (item) => (expenseGrandTotal += item.qty * item.price)
             );
 
             return (

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -19,6 +19,7 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import ExpensePDFPreviewButton from '@/components/pages/expense//pdf/ExpensePDFButton';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { formatCurrency, formatDate } from '@/lib/helper';
@@ -26,7 +27,7 @@ import {
   UploadRequestDocumentsFormSchema,
   UploadRequestDocumentsFormValues,
 } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
-import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
 import { ExpenseApi } from '@/services/api/expense';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { EXPENSE_REQUEST_APPROVAL_LINE } from '@/config/approval-line';
@@ -58,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();
@@ -139,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 () => {
@@ -173,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
       );
@@ -206,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) {
@@ -230,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);
   };
 
@@ -254,101 +282,135 @@ 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 && (
-              <Button
-                variant='outline'
-                color='info'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='lucide-lab:farm' width={24} height={24} />
-                Approve Manager
-              </Button>
+            {isCurrentApprovalOnHeadArea && (
+              <RequirePermission permissions='lti.expense.approve.head_area'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='lucide-lab:farm' width={24} height={24} />
+                  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>
             )}
 
             {isCurrentApprovalOnFinance && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='tdesign:money' width={24} height={24} />
-                Approve Finance
-              </Button>
+              <RequirePermission permissions='lti.expense.approve.finance'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='tdesign:money' width={24} height={24} />
+                  Approve Finance
+                </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnRealization && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={completeExpenseClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:done-all-rounded'
-                  width={24}
-                  height={24}
-                />
-                Selesai
-              </Button>
+              <RequirePermission permissions='lti.expense.complete.expense'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={completeExpenseClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:done-all-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Selesai
+                </Button>
+              </RequirePermission>
             )}
 
             {showRejectButton && (
-              <Button
-                variant='outline'
-                color='error'
-                onClick={rejectClickHandler}
-                className='w-full:w-fit'
+              <RequirePermission
+                permissions={[
+                  'lti.expense.approve.head_area',
+                  'lti.expense.approve.unit_vice_president',
+                  'lti.expense.approve.finance',
+                ]}
               >
-                <Icon icon='material-symbols:close' width={24} height={24} />
-                Reject
-              </Button>
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={rejectClickHandler}
+                  className='w-full:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             )}
 
             {isExpenseCanBeRealized && (
-              <Button
-                variant='outline'
-                color='info'
-                href={`/expense/realization/?expenseId=${initialValues?.id}`}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:money-bag-rounded'
-                  width={24}
-                  height={24}
-                />
-                Realisasi
-              </Button>
+              <RequirePermission permissions='lti.expense.create.realization'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  href={`/expense/realization/?expenseId=${initialValues?.id}`}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:money-bag-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Realisasi
+                </Button>
+              </RequirePermission>
             )}
 
             <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
               {showEditButton && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4 grow sm:grow-0'
-                >
-                  <Icon icon='mdi:pencil-outline' width={24} height={24} />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4 grow sm:grow-0'
+                  >
+                    <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
 
-              <Button
-                type='button'
-                color='error'
-                onClick={deleteExpenseClickHandler}
-                className='px-4 grow sm:grow-0'
-              >
-                <Icon
-                  icon='material-symbols:delete-outline-rounded'
-                  width={24}
-                  height={24}
-                  className='justify-start text-sm'
-                />
-                Delete
-              </Button>
+              <RequirePermission permissions='lti.expense.delete'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteExpenseClickHandler}
+                  className='px-4 grow sm:grow-0'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              </RequirePermission>
             </div>
           </div>
 
@@ -388,9 +450,13 @@ const ExpenseRequestContent = ({
                   <th>Kandang</th>
                   <th>:</th>
                   <td>
-                    {initialValues?.kandangs
-                      .map((item) => item.name)
-                      .join(', ')}
+                    {initialValues?.kandangs &&
+                    initialValues?.kandangs.some((k) => k.name)
+                      ? initialValues?.kandangs
+                          .filter((item) => item.name)
+                          .map((item) => item.name)
+                          .join(', ')
+                      : '-'}
                   </td>
                 </tr>
                 <tr>
@@ -428,7 +494,14 @@ const ExpenseRequestContent = ({
                 <tr>
                   <th>Nominal Biaya</th>
                   <th>:</th>
-                  <td>{formatCurrency(initialValues?.grand_total ?? 0)}</td>
+                  <td>
+                    {formatCurrency(
+                      initialValues?.latest_approval.step_number === 5 ||
+                        initialValues?.latest_approval.step_number === 6
+                        ? (initialValues?.total_realisasi ?? 0)
+                        : (initialValues?.total_pengajuan ?? 0)
+                    )}
+                  </td>
                 </tr>
                 <tr>
                   <th>Status Pencairan</th>
@@ -462,59 +535,73 @@ const ExpenseRequestContent = ({
                         initialValues?.documents.length > 0 && (
                           <ul className='list-disc'>
                             {initialValues?.documents.map(
-                              (requestDocument, requestDocumentIdx) => (
-                                <li key={requestDocumentIdx}>
-                                  <Link
-                                    href={requestDocument.path}
-                                    target='_blank'
-                                    rel='noopener noreferrer'
-                                    className='text-blue-500 underline'
-                                  >
-                                    {requestDocument.path}{' '}
-                                    <Icon
-                                      icon='cuida:open-in-new-tab-outline'
-                                      width={12}
-                                      height={12}
-                                      className='inline'
-                                    />
-                                  </Link>
-                                </li>
-                              )
+                              (requestDocument, requestDocumentIdx) => {
+                                const path = requestDocument.path.startsWith(
+                                  '/'
+                                )
+                                  ? requestDocument.path.slice(1)
+                                  : requestDocument.path;
+                                const documentUrl = `${S3_PUBLIC_BASE_URL}/${path}`;
+                                return (
+                                  <li key={requestDocumentIdx}>
+                                    <Link
+                                      href={documentUrl}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      className='text-blue-500 underline'
+                                    >
+                                      {requestDocument.path}{' '}
+                                      <Icon
+                                        icon='cuida:open-in-new-tab-outline'
+                                        width={12}
+                                        height={12}
+                                        className='inline'
+                                      />
+                                    </Link>
+                                  </li>
+                                );
+                              }
                             )}
                           </ul>
                         )}
                     </div>
 
-                    <div className='flex flex-col gap-2'>
-                      <DropFileInput
-                        name='documents'
-                        values={formik.values.documents}
-                        onChange={requestDocumentsChangeHandler}
-                        onDelete={requestDocumentsDeleteHandler}
-                        accept={{
-                          ...ACCEPTED_FILE_TYPE.PDF,
-                          ...ACCEPTED_FILE_TYPE.IMAGE,
-                        }}
-                        maxFiles={10}
-                        className={{
-                          wrapper: 'mt-2',
-                          inputWrapper: 'flex items-center',
-                        }}
-                      />
+                    <RequirePermission permissions='lti.expense.document'>
+                      <div className='flex flex-col gap-2'>
+                        <DropFileInput
+                          name='documents'
+                          values={formik.values.documents}
+                          onChange={requestDocumentsChangeHandler}
+                          onDelete={requestDocumentsDeleteHandler}
+                          accept={{
+                            ...ACCEPTED_FILE_TYPE.PDF,
+                            ...ACCEPTED_FILE_TYPE.IMAGE,
+                          }}
+                          maxFiles={10}
+                          className={{
+                            wrapper: 'mt-2',
+                            inputWrapper: 'flex items-center',
+                          }}
+                        />
 
-                      {formik.values.documents &&
-                        formik.values.documents.length > 0 && (
-                          <Button
-                            onClick={formik.submitForm}
-                            disabled={formik.isSubmitting}
-                            isLoading={formik.isSubmitting}
-                            className='w-fit self-end'
-                          >
-                            <Icon icon='ic:round-plus' width={24} height={24} />
-                            Tambah
-                          </Button>
-                        )}
-                    </div>
+                        {formik.values.documents &&
+                          formik.values.documents.length > 0 && (
+                            <Button
+                              onClick={formik.submitForm}
+                              disabled={formik.isSubmitting}
+                              isLoading={formik.isSubmitting}
+                              className='w-fit self-end'
+                            >
+                              <Icon
+                                icon='ic:round-plus'
+                                width={24}
+                                height={24}
+                              />
+                              Tambah
+                            </Button>
+                          )}
+                      </div>
+                    </RequirePermission>
                   </td>
                 </tr>
               </tbody>
@@ -532,7 +619,7 @@ const ExpenseRequestContent = ({
                 let expenseGrandTotal = 0;
 
                 kandangExpense.pengajuans?.forEach(
-                  (item) => (expenseGrandTotal += item.price)
+                  (item) => (expenseGrandTotal += item.qty * item.price)
                 );
 
                 return (
@@ -547,7 +634,9 @@ const ExpenseRequestContent = ({
                             colSpan={5}
                             className='font-bold text-center text-base-content text-lg'
                           >
-                            Biaya {kandangExpense.name}
+                            {kandangExpense.kandang_id && kandangExpense.name
+                              ? `Biaya ${kandangExpense.name}`
+                              : `Biaya ${initialValues?.location.name || 'Umum'}`}
                           </th>
                         </tr>
                         <tr>

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

@@ -28,6 +28,7 @@ import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import DateInput from '@/components/input/DateInput';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
@@ -54,71 +55,84 @@ 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}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/expense/detail/?expenseId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-
-        {showEditButton && (
+        <RequirePermission permissions='lti.expense.detail'>
           <Button
-            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+            href={`/expense/detail/?expenseId=${props.row.original.id}`}
             variant='ghost'
-            color='warning'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+
+        {showEditButton && (
+          <RequirePermission permissions='lti.expense.update'>
+            <Button
+              href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
 
         {showRealizationButton && (
-          <Button
-            href={`/expense/realization/?expenseId=${props.row.original.id}`}
-            variant='ghost'
-            color='info'
-            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
-          >
-            <Icon
-              icon='material-symbols:money-bag-rounded'
-              width={16}
-              height={16}
-            />
-            Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.create.realization'>
+            <Button
+              href={`/expense/realization/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='info'
+              className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+            >
+              <Icon
+                icon='material-symbols:money-bag-rounded'
+                width={16}
+                height={16}
+              />
+              Realisasi
+            </Button>
+          </RequirePermission>
         )}
 
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.expense.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -180,7 +194,7 @@ const ExpensesTable = () => {
     parseInt(item)
   );
 
-  const isAllSelectedRowLatestApprovalOnManager = useMemo(() => {
+  const isAllSelectedRowLatestApprovalOnHeadArea = useMemo(() => {
     return selectedRowIds.every((rowId) => {
       if (!isResponseSuccess(expenses)) return false;
 
@@ -189,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]);
 
@@ -208,7 +239,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnFinance =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 2;
+        expenseItem?.latest_approval.step_number === 3;
 
       return isCurrentApprovalOnFinance;
     });
@@ -225,7 +256,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnRealization =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 4;
+        expenseItem?.latest_approval.step_number === 5;
 
       return isCurrentApprovalOnRealization;
     });
@@ -384,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
     );
   };
 
@@ -407,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);
   };
 
@@ -420,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
       );
@@ -457,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
       );
@@ -559,57 +608,87 @@ const ExpensesTable = () => {
           <div className='flex flex-col gap-2 mb-4'>
             <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
               <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-                <Button
-                  href='/expense/add'
-                  variant='outline'
-                  color='primary'
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
-                </Button>
+                <RequirePermission permissions='lti.expense.create'>
+                  <Button
+                    href='/expense/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
 
                 {selectedRowIds.length > 0 && (
                   <>
-                    <Button
-                      variant='outline'
-                      color='info'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnManager}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='lucide-lab:farm' width={24} height={24} />
-                      Approve Manager
-                    </Button>
+                    <RequirePermission permissions='lti.expense.approve.head_area'>
+                      <Button
+                        variant='outline'
+                        color='info'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnHeadArea}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='lucide-lab:farm' width={24} height={24} />
+                        Approve Head Area
+                      </Button>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='tdesign:money' width={24} height={24} />
-                      Approve Finance
-                    </Button>
+                    <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>
 
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={bulkRejectClickHandler}
-                      disabled={
-                        !isAllSelectedRowLatestApprovalOnManager &&
-                        !isAllSelectedRowLatestApprovalOnFinance
-                      }
-                      className='w-full sm:w-fit'
+                    <RequirePermission permissions='lti.expense.approve.finance'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Finance
+                      </Button>
+                    </RequirePermission>
+
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.head_area',
+                        'lti.expense.approve.unit_vice_president',
+                        'lti.expense.approve.finance',
+                      ]}
                     >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
+                      <Button
+                        variant='outline'
+                        color='error'
+                        onClick={bulkRejectClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnHeadArea &&
+                          !isAllSelectedRowLatestApprovalOnUnitVicePresident &&
+                          !isAllSelectedRowLatestApprovalOnFinance
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon
+                          icon='material-symbols:close'
+                          width={24}
+                          height={24}
+                        />
+                        Reject
+                      </Button>
+                    </RequirePermission>
                   </>
                 )}
               </div>

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/ExpenseKandangsTable.tsx

@@ -20,10 +20,10 @@ interface ExpenseKandangsTableProps {
   locationId?: number;
   type: 'add' | 'edit' | 'detail';
   selectedKandangs: {
-    id: number;
-    name: string;
+    id?: number;
+    name?: string;
   }[];
-  onChange: (kandangs: { id: number; name: string }[]) => void;
+  onChange: (kandangs: { id?: number; name?: string }[]) => void;
   className?: {
     wrapper?: string;
   };
@@ -67,7 +67,11 @@ const ExpenseKandangsTable = ({
   );
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
-    convertRowSelectionArrToObj(selectedKandangs.map((item) => item.id))
+    convertRowSelectionArrToObj(
+      selectedKandangs
+        .map((item) => item.id)
+        .filter((id): id is number => id !== undefined)
+    )
   );
 
   const kandangsColumns: ColumnDef<Kandang>[] = [

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

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { Expense } from '@/types/api/expense';
 import { formatDate } from '@/lib/helper';
+import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 type ExpenseRealizationFormSchemaType = {
   category?: {
@@ -12,7 +13,7 @@ type ExpenseRealizationFormSchemaType = {
     label: string;
   };
   realization_date?: string;
-  kandangs?: { id: number; name: string }[];
+  kandangs?: { id?: number; name?: string }[];
   supplier?: {
     value: number;
     label: string;
@@ -20,7 +21,7 @@ type ExpenseRealizationFormSchemaType = {
   existing_documents?: { name: string; url: string }[];
   documents?: File[];
   realizations: {
-    kandang_id: number;
+    kandang_id?: number;
     cost_items: {
       nonstock?: {
         value: number;
@@ -49,12 +50,11 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
     kandangs: Yup.array()
       .of(
         Yup.object({
-          id: Yup.number().required('Kandang wajib dipilih!'),
-          name: Yup.string().required('Kandang wajib dipilih!'),
+          id: Yup.number().optional(),
+          name: Yup.string().optional(),
         })
       )
-      .min(1, 'Kandang wajib dipilih!')
-      .required('Kandang wajib dipilih!'),
+      .optional(),
 
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
@@ -73,7 +73,7 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
     realizations: Yup.array()
       .of(
         Yup.object({
-          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').optional(),
           cost_items: Yup.array()
             .of(
               Yup.object({
@@ -86,12 +86,12 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
                 notes: Yup.string(),
               })
             )
-            .min(1, 'Kandang harus memiliki setidaknya 1 biaya!')
-            .required('Biaya kandang wajib diisi!'),
+            .min(1, 'Harus memiliki setidaknya 1 biaya!')
+            .required('Biaya wajib diisi!'),
         })
       )
-      .min(1, 'Biaya kandang wajib diisi!')
-      .required('Biaya kandang wajib diisi!'),
+      .min(1, 'Biaya wajib diisi!')
+      .required('Biaya wajib diisi!'),
   });
 
 export const UpdateExpenseRealizationFormSchema = ExpenseRealizationFormSchema;
@@ -139,10 +139,13 @@ export const getExpenseRealizationFormInitialValues = (
           label: initialValues.supplier.name,
         }
       : undefined,
-    existing_documents: initialValues?.realization_docs?.map((doc) => ({
-      name: doc.path,
-      url: doc.path,
-    })),
+    existing_documents: initialValues?.realization_docs?.map((doc) => {
+      const path = doc.path.startsWith('/') ? doc.path.slice(1) : doc.path;
+      return {
+        name: doc.path,
+        url: `${S3_PUBLIC_BASE_URL}/${path}`,
+      };
+    }),
     documents: [],
     realizations: initialValues?.kandangs
       ? initialValues.kandangs.map((kandangExpense) => {

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

@@ -16,6 +16,7 @@ import DateInput from '@/components/input/DateInput';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import ExpenseRealizationKandangDetailExpense from '@/components/pages/expense/form/ExpenseRealizationKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   CreateExpenseRealizationPayload,
@@ -149,25 +150,10 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('location', val);
 
     formik.setFieldValue('kandangs', []);
-    formik.setFieldValue('realizations', []);
-  };
 
-  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
-    formik.setFieldTouched('kandangs', true);
-    formik.setFieldValue('kandangs', kandangs);
-
-    const newRealizations = [...(formik.values.realizations ?? [])];
-
-    // add new realizations
-    kandangs.forEach((kandangItem) => {
-      const isKandangExistInRealization = newRealizations.find(
-        (realizationItem) => realizationItem.kandang_id === kandangItem.id
-      );
-
-      if (isKandangExistInRealization) return;
-
-      newRealizations.push({
-        kandang_id: kandangItem.id,
+    // Auto-create realization item for location (without kandang)
+    formik.setFieldValue('realizations', [
+      {
         cost_items: [
           {
             nonstock: undefined,
@@ -176,25 +162,57 @@ const ExpenseRealizationForm = ({
             notes: '',
           },
         ],
+      },
+    ]);
+  };
+
+  const kandangsChangeHandler = (
+    kandangs: { id?: number; name?: string }[]
+  ) => {
+    formik.setFieldTouched('kandangs', true);
+    formik.setFieldValue('kandangs', kandangs);
+
+    // If no kandangs selected, create realization item for location
+    if (kandangs.length === 0) {
+      formik.setFieldValue('realizations', [
+        {
+          cost_items: [
+            {
+              nonstock: undefined,
+              quantity: undefined,
+              price: undefined,
+              notes: '',
+            },
+          ],
+        },
+      ]);
+      return;
+    }
+
+    // Start with empty array when kandangs are selected
+    const newRealizations: typeof formik.values.realizations = [];
+
+    // add new realizations for each kandang
+    kandangs.forEach((kandangItem) => {
+      if (!kandangItem.id) return;
+
+      const existingRealization = formik.values.realizations?.find(
+        (realizationItem) => realizationItem.kandang_id === kandangItem.id
+      );
+
+      newRealizations.push({
+        kandang_id: kandangItem.id,
+        cost_items: existingRealization?.cost_items || [
+          {
+            nonstock: undefined,
+            quantity: undefined,
+            price: undefined,
+            notes: '',
+          },
+        ],
       });
     });
 
-    // prune realizations
-    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
-    const deletedRealizationsIdx: number[] = [];
-
-    newRealizations.forEach((realization, idx) => {
-      const isRealizationValid = kandangIds.has(realization.kandang_id);
-
-      if (!isRealizationValid) {
-        deletedRealizationsIdx.push(idx);
-      }
-    });
-
-    deletedRealizationsIdx.forEach((deletedRealizationIdx) => {
-      newRealizations.splice(deletedRealizationIdx, 1);
-    });
-
     formik.setFieldValue('realizations', newRealizations);
   };
 
@@ -205,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);
   };
 
@@ -290,21 +315,23 @@ const ExpenseRealizationForm = ({
             className={{ wrapper: 'col-span-12' }}
           />
 
-          <DropFileInput
-            label='Dokumen Realisasi'
-            name='documents'
-            values={formik.values.documents}
-            onChange={realizationDocumentsChangeHandler}
-            onDelete={realizationDocumentsDeleteHandler}
-            accept={{
-              ...ACCEPTED_FILE_TYPE.PDF,
-              ...ACCEPTED_FILE_TYPE.IMAGE,
-            }}
-            className={{
-              wrapper: 'col-span-12',
-              inputWrapper: 'h-12 flex items-center',
-            }}
-          />
+          <RequirePermission permissions='lti.expense.document.realization'>
+            <DropFileInput
+              label='Dokumen Realisasi'
+              name='documents'
+              values={formik.values.documents}
+              onChange={realizationDocumentsChangeHandler}
+              onDelete={realizationDocumentsDeleteHandler}
+              accept={{
+                ...ACCEPTED_FILE_TYPE.PDF,
+                ...ACCEPTED_FILE_TYPE.IMAGE,
+              }}
+              className={{
+                wrapper: 'col-span-12',
+                inputWrapper: 'h-12 flex items-center',
+              }}
+            />
+          </RequirePermission>
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -335,7 +362,10 @@ const ExpenseRealizationForm = ({
             )}
 
           <ExpenseRealizationKandangDetailExpense
+            type={type}
             formik={formik}
+            supplierId={formik.values.supplier?.value as number}
+            location={formik.values.location}
             className={{
               wrapper: 'col-span-12',
             }}
@@ -357,20 +387,22 @@ const ExpenseRealizationForm = ({
           {type !== 'add' && (
             <div className='flex flex-row justify-start gap-2'>
               {type !== 'edit' && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:edit-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
             </div>
           )}

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

@@ -18,6 +18,11 @@ import { Nonstock } from '@/types/api/master-data/nonstock';
 interface ExpenseRealizationKandangDetailExpenseProps {
   type?: 'add' | 'edit' | 'detail';
   formik: FormikContextType<ExpenseRealizationFormValues>;
+  supplierId?: number;
+  location?: {
+    value: number;
+    label: string;
+  };
   className?: {
     wrapper?: string;
   };
@@ -25,12 +30,18 @@ interface ExpenseRealizationKandangDetailExpenseProps {
 
 const ExpenseRealizationKandangDetailExpense: React.FC<
   ExpenseRealizationKandangDetailExpenseProps
-> = ({ type, formik, className }) => {
+> = ({ type, formik, supplierId, location, className }) => {
   const {
     setInputValue: setNonstockInputValue,
     options: nonstockOptions,
     isLoadingOptions: isLoadingNonstockOptions,
-  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+  } = useSelect<Nonstock>(
+    NonstockApi.basePath,
+    'id',
+    'name',
+    'search',
+    supplierId ? { supplier_id: String(supplierId) } : undefined
+  );
 
   const nonstockChangeHandler = (
     kandangExpenseIdx: number,
@@ -82,140 +93,159 @@ const ExpenseRealizationKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {formik.values.realizations.length === 0 && (
+        {!formik.values.supplier?.value && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
-              Pilih kandang terlebih dahulu!
+              Pilih supplier terlebih dahulu!
             </p>
           </div>
         )}
 
-        {formik.values.realizations.map((kandangExpense, kandangExpenseIdx) => {
-          const kandangName = formik.values.kandangs?.find(
-            (kandang) => kandang.id === kandangExpense.kandang_id
-          );
+        {formik.values.realizations.length === 0 &&
+          formik.values.supplier?.value && (
+            <div>
+              <p className='text-sm text-gray-400 text-center'>
+                Belum ada item biaya. Silakan pilih lokasi terlebih dahulu.
+              </p>
+            </div>
+          )}
 
-          return (
-            kandangName?.name && (
-              <div
-                key={`kandangExpense-${kandangExpenseIdx}`}
-                className='w-full flex flex-col gap-4'
-              >
-                <div>
-                  <h5 className='mb-2 text-lg font-bold text-center'>
-                    Biaya {kandangName?.name}
-                  </h5>
+        {formik.values.realizations.length > 0 &&
+          formik.values.supplier?.value &&
+          formik.values.realizations.map(
+            (kandangExpense, kandangExpenseIdx) => {
+              const kandangName = kandangExpense.kandang_id
+                ? formik.values.kandangs?.find(
+                    (kandang) => kandang.id === kandangExpense.kandang_id
+                  )
+                : null;
 
-                  <div className='overflow-x-auto'>
-                    <table className='table'>
-                      <thead>
-                        <tr>
-                          <th>Nonstock</th>
-                          <th>Total Kuantitas</th>
-                          <th>Harga Satuan</th>
-                          <th>Catatan</th>
-                        </tr>
-                      </thead>
+              return (
+                (kandangName?.name || !kandangExpense.kandang_id) && (
+                  <div
+                    key={`kandangExpense-${kandangExpenseIdx}`}
+                    className='w-full flex flex-col gap-4'
+                  >
+                    <div>
+                      <h5 className='mb-2 text-lg font-bold text-center'>
+                        {kandangName?.name
+                          ? `Biaya ${kandangName.name}`
+                          : location?.label
+                            ? `Biaya ${location.label}`
+                            : 'Biaya Umum'}
+                      </h5>
 
-                      <tbody>
-                        {kandangExpense.cost_items.map(
-                          (expenseItem, expenseIdx) => (
-                            <tr key={`expense-${expenseIdx}`}>
-                              <td className='p-2'>
-                                <SelectInput
-                                  placeholder='Pilih Nonstock'
-                                  value={expenseItem.nonstock}
-                                  onChange={(val) => {
-                                    nonstockChangeHandler(
-                                      kandangExpenseIdx,
-                                      expenseIdx,
-                                      val
-                                    );
-                                  }}
-                                  options={nonstockOptions}
-                                  isLoading={isLoadingNonstockOptions}
-                                  onInputChange={setNonstockInputValue}
-                                  className={{ wrapper: 'min-w-48' }}
-                                  isDisabled
-                                />
-                              </td>
-
-                              <td className='p-2'>
-                                <NumberInput
-                                  required
-                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
-                                  placeholder='Masukkan Total Kuantitas'
-                                  value={
-                                    formik.values.realizations[
-                                      kandangExpenseIdx
-                                    ].cost_items[expenseIdx].quantity ?? ''
-                                  }
-                                  onChange={formik.handleChange}
-                                  onBlur={formik.handleBlur}
-                                  isError={isExpenseRepeaterInputError(
-                                    'quantity',
-                                    kandangExpenseIdx,
-                                    expenseIdx
-                                  )}
-                                  className={{ wrapper: 'min-w-24' }}
-                                />
-                              </td>
-
-                              <td className='p-2'>
-                                <NumberInput
-                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
-                                  placeholder='Masukkan Harga Satuan'
-                                  value={
-                                    formik.values.realizations[
-                                      kandangExpenseIdx
-                                    ].cost_items[expenseIdx].price ?? ''
-                                  }
-                                  onChange={formik.handleChange}
-                                  onBlur={formik.handleBlur}
-                                  isError={isExpenseRepeaterInputError(
-                                    'price',
-                                    kandangExpenseIdx,
-                                    expenseIdx
-                                  )}
-                                  inputPrefix={
-                                    <span className='text-gray-600 font-medium'>
-                                      Rp
-                                    </span>
-                                  }
-                                  className={{ wrapper: 'min-w-24' }}
-                                />
-                              </td>
-
-                              <td className='p-2'>
-                                <TextInput
-                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
-                                  placeholder='Tuliskan catatan'
-                                  value={
-                                    formik.values.realizations[
-                                      kandangExpenseIdx
-                                    ].cost_items[expenseIdx].notes ?? ''
-                                  }
-                                  onChange={formik.handleChange}
-                                  onBlur={formik.handleBlur}
-                                  isError={isExpenseRepeaterInputError(
-                                    'notes',
-                                    kandangExpenseIdx,
-                                    expenseIdx
-                                  )}
-                                  className={{ wrapper: 'min-w-24' }}
-                                />
-                              </td>
+                      <div className='overflow-x-auto'>
+                        <table className='table'>
+                          <thead>
+                            <tr>
+                              <th>Nonstock</th>
+                              <th>Total Kuantitas</th>
+                              <th>Harga Satuan</th>
+                              <th>Catatan</th>
                             </tr>
-                          )
-                        )}
-                      </tbody>
-                    </table>
+                          </thead>
+
+                          <tbody>
+                            {kandangExpense.cost_items.map(
+                              (expenseItem, expenseIdx) => (
+                                <tr key={`expense-${expenseIdx}`}>
+                                  <td className='p-2'>
+                                    <SelectInput
+                                      placeholder='Pilih Nonstock'
+                                      value={expenseItem.nonstock}
+                                      onChange={(val) => {
+                                        nonstockChangeHandler(
+                                          kandangExpenseIdx,
+                                          expenseIdx,
+                                          val
+                                        );
+                                      }}
+                                      options={nonstockOptions}
+                                      isLoading={isLoadingNonstockOptions}
+                                      onInputChange={setNonstockInputValue}
+                                      className={{ wrapper: 'min-w-48' }}
+                                      isDisabled
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      required
+                                      name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                      placeholder='Masukkan Total Kuantitas'
+                                      value={
+                                        formik.values.realizations[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].quantity ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'quantity',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
+                                      placeholder='Masukkan Harga Satuan'
+                                      value={
+                                        formik.values.realizations[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].price ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'price',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      inputPrefix={
+                                        <span className='text-gray-600 font-medium'>
+                                          Rp
+                                        </span>
+                                      }
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <TextInput
+                                      name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                      placeholder='Tuliskan catatan'
+                                      value={
+                                        formik.values.realizations[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].notes ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'notes',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+                                </tr>
+                              )
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            )
-          );
-        })}
+                )
+              );
+            }
+          )}
       </div>
     </Card>
   );

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

@@ -1,32 +1,36 @@
 import * as Yup from 'yup';
 import { Expense } from '@/types/api/expense';
 import { formatDate } from '@/lib/helper';
+import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 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 }[];
+  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[];
   expense_nonstocks: {
-    kandang_id: number;
+    kandang_id?: number;
     cost_items: {
       nonstock?: {
         value: number;
         label: string;
-      };
+      } | null;
+      nonstock_id?: number;
       quantity?: number;
       price?: number;
       notes?: string;
@@ -39,36 +43,54 @@ 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()
+      .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({
-          id: Yup.number().required('Kandang wajib dipilih!'),
-          name: Yup.string().required('Kandang wajib dipilih!'),
+          id: Yup.number().optional(),
+          name: Yup.string().optional(),
         })
       )
-      .min(1, 'Kandang wajib dipilih!')
-      .required('Kandang wajib dipilih!'),
+      .optional(),
 
     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(),
 
@@ -77,16 +99,24 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     expense_nonstocks: Yup.array()
       .of(
         Yup.object({
-          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').optional(),
           cost_items: Yup.array()
             .of(
               Yup.object({
                 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(),
               })
             )
@@ -101,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<
@@ -121,13 +160,14 @@ 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')
       : undefined,
@@ -140,12 +180,16 @@ export const getExpenseFormInitialValues = (
           value: initialValues.supplier.id,
           label: initialValues.supplier.name,
         }
-      : undefined,
-    existing_documents: initialValues?.documents?.map((doc) => ({
-      id: doc.id,
-      name: doc.path,
-      url: doc.path,
-    })),
+      : 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 {
+        id: doc.id,
+        name: doc.path,
+        url: `${S3_PUBLIC_BASE_URL}/${path}`,
+      };
+    }),
     deleted_documents: [],
     documents: [],
     expense_nonstocks: initialValues?.kandangs
@@ -157,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

@@ -18,6 +18,7 @@ import DateInput from '@/components/input/DateInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseRequestKandangDetailExpense from '@/components/pages/expense/form/ExpenseRequestKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ExpenseRequestFormSchema,
@@ -36,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';
@@ -54,6 +57,7 @@ const ExpenseRequestForm = ({
   const rejectModal = useModal();
 
   const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const createExpenseHandler = useCallback(
     async (payload: CreateExpensePayload) => {
@@ -107,18 +111,24 @@ const ExpenseRequestForm = ({
 
       const expensePayload: CreateExpensePayload = {
         category: formik.values.category?.value as 'BOP' | 'NON-BOP',
+        location_id: values.location_id as number,
         transaction_date: values?.transaction_date as string,
         supplier_id: values.supplier?.value as number,
         documents: values.documents as File[],
-        expense_nonstocks: values.expense_nonstocks.map((expenseNonstock) => ({
-          kandang_id: expenseNonstock.kandang_id,
-          cost_items: expenseNonstock.cost_items.map((costItem) => ({
-            nonstock_id: costItem.nonstock?.value as number,
-            quantity: parseFloat(String(costItem.quantity)) as number,
-            price: parseFloat(String(costItem.price)) as number,
-            notes: costItem.notes ?? '',
-          })),
-        })),
+        expense_nonstocks: values.expense_nonstocks.map((expenseNonstock) => {
+          const basePayload = {
+            cost_items: expenseNonstock.cost_items.map((costItem) => ({
+              nonstock_id: costItem.nonstock?.value as number,
+              quantity: parseFloat(String(costItem.quantity)) as number,
+              price: parseFloat(String(costItem.price)) as number,
+              notes: costItem.notes ?? '',
+            })),
+          };
+
+          return expenseNonstock.kandang_id
+            ? { ...basePayload, kandang_id: expenseNonstock.kandang_id }
+            : basePayload;
+        }),
       };
 
       switch (type) {
@@ -129,19 +139,25 @@ const ExpenseRequestForm = ({
         case 'edit':
           const expenseUpdatePayload: UpdateExpensePayload = {
             category: formik.values.category?.value as 'BOP' | 'NON-BOP',
+            location_id: values.location_id as number,
             transaction_date: values?.transaction_date as string,
             supplier_id: values.supplier?.value as number,
             documents: values.documents as File[],
             expense_nonstocks: values.expense_nonstocks.map(
-              (expenseNonstock) => ({
-                kandang_id: expenseNonstock.kandang_id,
-                cost_items: expenseNonstock.cost_items.map((costItem) => ({
-                  nonstock_id: costItem.nonstock?.value as number,
-                  quantity: parseFloat(String(costItem.quantity)) as number,
-                  price: parseFloat(String(costItem.price)) as number,
-                  notes: costItem.notes ?? '',
-                })),
-              })
+              (expenseNonstock) => {
+                const basePayload = {
+                  cost_items: expenseNonstock.cost_items.map((costItem) => ({
+                    nonstock_id: costItem.nonstock?.value as number,
+                    quantity: parseFloat(String(costItem.quantity)) as number,
+                    price: parseFloat(String(costItem.price)) as number,
+                    notes: costItem.notes ?? '',
+                  })),
+                };
+
+                return expenseNonstock.kandang_id
+                  ? { ...basePayload, kandang_id: expenseNonstock.kandang_id }
+                  : basePayload;
+              }
             ),
           };
 
@@ -178,30 +194,67 @@ const ExpenseRequestForm = ({
     formik.setFieldTouched('location', true);
     formik.setFieldValue('location', val);
 
+    const locationId = Array.isArray(val) ? val[0]?.value : val?.value;
+    formik.setFieldValue('location_id', locationId);
+
     formik.setFieldValue('kandangs', []);
-    formik.setFieldValue('expense_nonstocks', []);
+
+    // Auto-create expense item for location (without kandang)
+    formik.setFieldValue('expense_nonstocks', [
+      {
+        cost_items: [
+          {
+            nonstock: null,
+            nonstock_id: 0,
+            quantity: undefined,
+            price: undefined,
+            notes: '',
+          },
+        ],
+      },
+    ]);
   };
 
-  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
+  const kandangsChangeHandler = (
+    kandangs: { id?: number; name?: string }[]
+  ) => {
     formik.setFieldTouched('kandangs', true);
     formik.setFieldValue('kandangs', kandangs);
 
-    const newExpenseNonstocks = [...(formik.values.expense_nonstocks ?? [])];
+    // If no kandangs selected, create expense item for location
+    if (kandangs.length === 0) {
+      formik.setFieldValue('expense_nonstocks', [
+        {
+          cost_items: [
+            {
+              nonstock: null,
+              nonstock_id: 0,
+              quantity: undefined,
+              price: undefined,
+              notes: '',
+            },
+          ],
+        },
+      ]);
+      return;
+    }
+
+    const newExpenseNonstocks: typeof formik.values.expense_nonstocks = [];
 
-    // add new expense_nonstocks
     kandangs.forEach((kandangItem) => {
-      const isKandangExistInExpenseNonstocks = newExpenseNonstocks.find(
+      if (!kandangItem.id) return;
+
+      const existingExpenseNonstock = formik.values.expense_nonstocks?.find(
         (expenseNonstockItem) =>
           expenseNonstockItem.kandang_id === kandangItem.id
       );
 
-      if (isKandangExistInExpenseNonstocks) return;
-
       newExpenseNonstocks.push({
         kandang_id: kandangItem.id,
-        cost_items: [
+        cost_items: existingExpenseNonstock?.cost_items || [
           {
-            nonstock: undefined,
+            nonstock: null,
+            nonstock_id: 0,
             quantity: undefined,
             price: undefined,
             notes: '',
@@ -210,32 +263,26 @@ const ExpenseRequestForm = ({
       });
     });
 
-    // prune expense_nonstocks
-    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
-    const deletedExpenseNonstocksIdx: number[] = [];
-
-    newExpenseNonstocks.forEach((expenseNonstock, idx) => {
-      const isExpenseNonstockValid = kandangIds.has(expenseNonstock.kandang_id);
-
-      if (!isExpenseNonstockValid) {
-        deletedExpenseNonstocksIdx.push(idx);
-      }
-    });
-
-    deletedExpenseNonstocksIdx.forEach((deletedExpenseNonstockIdx) => {
-      newExpenseNonstocks.splice(deletedExpenseNonstockIdx, 1);
-    });
-
     formik.setFieldValue('expense_nonstocks', newExpenseNonstocks);
   };
 
   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);
   };
 
@@ -291,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]);
@@ -316,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'
@@ -385,21 +465,23 @@ const ExpenseRequestForm = ({
               className={{ wrapper: 'col-span-12' }}
             />
 
-            <DropFileInput
-              label='Dokumen Pengajuan'
-              name='documents'
-              values={formik.values.documents}
-              onChange={requestDocumentsChangeHandler}
-              onDelete={requestDocumentsDeleteHandler}
-              accept={{
-                ...ACCEPTED_FILE_TYPE.PDF,
-                ...ACCEPTED_FILE_TYPE.IMAGE,
-              }}
-              className={{
-                wrapper: 'col-span-12',
-                inputWrapper: 'h-12 flex items-center',
-              }}
-            />
+            <RequirePermission permissions='lti.expense.document'>
+              <DropFileInput
+                label='Dokumen Pengajuan'
+                name='documents'
+                values={formik.values.documents}
+                onChange={requestDocumentsChangeHandler}
+                onDelete={requestDocumentsDeleteHandler}
+                accept={{
+                  ...ACCEPTED_FILE_TYPE.PDF,
+                  ...ACCEPTED_FILE_TYPE.IMAGE,
+                }}
+                className={{
+                  wrapper: 'col-span-12',
+                  inputWrapper: 'h-12 flex items-center',
+                }}
+              />
+            </RequirePermission>
 
             {formik.values.existing_documents &&
               formik.values.existing_documents.length > 0 && (
@@ -451,7 +533,10 @@ const ExpenseRequestForm = ({
               )}
 
             <ExpenseRequestKandangDetailExpense
+              type={type}
               formik={formik}
+              supplierId={formik.values.supplier?.value as number}
+              location={formik.values.location}
               className={{
                 wrapper: 'col-span-12',
               }}
@@ -461,48 +546,41 @@ const ExpenseRequestForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteExpenseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.expense.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteExpenseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
-                )}
-              </div>
-            )}
+                </RequirePermission>
 
-            {expenseFormErrorMessage && (
-              <div role='alert' className='alert alert-error w-full'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{expenseFormErrorMessage}</span>
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.expense.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
+                )}
               </div>
             )}
 
@@ -520,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

@@ -21,6 +21,11 @@ import { removeArrayItemAndSync } from '@/lib/utils/formik';
 interface ExpenseRequestKandangDetailExpenseProps {
   type?: 'add' | 'edit' | 'detail';
   formik: FormikContextType<ExpenseRequestFormValues>;
+  supplierId?: number;
+  location?: {
+    value: number;
+    label: string;
+  } | null;
   className?: {
     wrapper?: string;
   };
@@ -28,12 +33,18 @@ interface ExpenseRequestKandangDetailExpenseProps {
 
 const ExpenseRequestKandangDetailExpense: React.FC<
   ExpenseRequestKandangDetailExpenseProps
-> = ({ type, formik, className }) => {
+> = ({ type, formik, supplierId, location, className }) => {
   const {
     setInputValue: setNonstockInputValue,
     options: nonstockOptions,
     isLoadingOptions: isLoadingNonstockOptions,
-  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+  } = useSelect<Nonstock>(
+    NonstockApi.basePath,
+    'id',
+    'name',
+    'search',
+    supplierId ? { supplier_id: String(supplierId) } : undefined
+  );
 
   const nonstockChangeHandler = (
     kandangExpenseIdx: number,
@@ -48,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: '',
@@ -113,41 +131,57 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {(formik.values.expense_nonstocks.length === 0 ||
-          !formik.values.supplier?.value) && (
+        {!formik.values.supplier?.value && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
-              Pilih kandang terlebih dahulu!
+              Pilih supplier terlebih dahulu!
             </p>
           </div>
         )}
 
+        {formik.values.expense_nonstocks.length === 0 &&
+          formik.values.supplier?.value && (
+            <div>
+              <p className='text-sm text-gray-400 text-center'>
+                Belum ada item biaya. Silakan pilih lokasi terlebih dahulu.
+              </p>
+            </div>
+          )}
+
         {formik.values.expense_nonstocks.length > 0 &&
           formik.values.supplier?.value &&
           formik.values.expense_nonstocks.map(
             (kandangExpense, kandangExpenseIdx) => {
-              const kandangName = formik.values.kandangs?.find(
-                (kandang) => kandang.id === kandangExpense.kandang_id
-              );
+              const kandangName = kandangExpense.kandang_id
+                ? formik.values.kandangs?.find(
+                    (kandang) => kandang.id === kandangExpense.kandang_id
+                  )
+                : null;
 
               return (
-                kandangName?.name && (
+                (kandangName?.name || !kandangExpense.kandang_id) && (
                   <div
                     key={`kandangExpense-${kandangExpenseIdx}`}
                     className='w-full flex flex-col gap-4'
                   >
                     <div>
                       <h5 className='mb-2 text-lg font-bold text-center'>
-                        Biaya {kandangName?.name}
+                        Biaya {kandangName?.name || location?.label || 'Umum'}
                       </h5>
 
                       <div className='overflow-x-auto'>
                         <table className='table'>
                           <thead>
                             <tr>
-                              <th>Nonstock</th>
-                              <th>Total Kuantitas</th>
-                              <th>Harga Satuan</th>
+                              <th className='after:content-["*"] after:text-red-500 after:ml-0.5'>
+                                Nonstock
+                              </th>
+                              <th className='after:content-["*"] after:text-red-500 after:ml-0.5'>
+                                Total Kuantitas
+                              </th>
+                              <th className='after:content-["*"] after:text-red-500 after:ml-0.5'>
+                                Harga Satuan
+                              </th>
                               <th>Catatan</th>
                               {type !== 'detail' && <th>Aksi</th>}
                             </tr>

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'
@@ -219,7 +219,13 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
     { label: 'Lokasi', value: expense?.location.name },
     {
       label: 'Kandang',
-      value: expense?.kandangs.map((item) => item.name).join(', '),
+      value:
+        expense?.kandangs && expense?.kandangs.some((k) => k.name)
+          ? expense?.kandangs
+              .filter((item) => item.name)
+              .map((item) => item.name)
+              .join(', ')
+          : '-',
     },
     { label: 'Vendor', value: expense?.supplier.name },
     {
@@ -235,7 +241,12 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
     { label: 'Nama Pengaju', value: expense?.created_user.name },
     {
       label: 'Nominal Biaya',
-      value: formatCurrency(expense?.grand_total ?? 0),
+      value: formatCurrency(
+        expense?.latest_approval.step_number === 5 ||
+          expense?.latest_approval.step_number === 6
+          ? (expense?.total_realisasi ?? 0)
+          : (expense?.total_pengajuan ?? 0)
+      ),
     },
     {
       label: 'Nominal Pengajuan',
@@ -326,7 +337,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
             let expenseRequestTotal = 0;
 
             kandangExpense.pengajuans?.forEach(
-              (item) => (expenseRequestTotal += item.price)
+              (item) => (expenseRequestTotal += item.qty * item.price)
             );
 
             return (
@@ -335,7 +346,9 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                 style={ExpensePDFStyle.kandangExpenseContainer}
               >
                 <Text style={ExpensePDFStyle.kandangExpenseTitle}>
-                  {kandangExpense.name}
+                  {kandangExpense.kandang_id && kandangExpense.name
+                    ? `Biaya ${kandangExpense.name}`
+                    : `Biaya ${expense?.location.name || 'Umum'}`}
                 </Text>
 
                 <View style={ExpensePDFStyle.kandangExpenseTable}>
@@ -484,7 +497,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
             let expenseRealizationTotal = 0;
 
             kandangExpense.realisasi?.forEach(
-              (item) => (expenseRealizationTotal += item.price)
+              (item) => (expenseRealizationTotal += item.qty * item.price)
             );
 
             return (
@@ -493,7 +506,9 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                 style={ExpensePDFStyle.kandangExpenseContainer}
               >
                 <Text style={ExpensePDFStyle.kandangExpenseTitle}>
-                  {kandangExpense.name}
+                  {kandangExpense.kandang_id && kandangExpense.name
+                    ? `Biaya ${kandangExpense.name}`
+                    : `Biaya ${expense?.location.name || 'Umum'}`}
                 </Text>
 
                 <View style={ExpensePDFStyle.kandangExpenseTable}>

src/components/pages/finance/FinanceDetail.tsx

@@ -0,0 +1,216 @@
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import RequirePermission from '@/components/helper/RequirePermission';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+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';
+import { Finance } from '@/types/api/finance/finance';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const FinanceDetail = ({ finance }: { finance: Finance }) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const informasiUmum = [
+    {
+      label: 'ID',
+      value: finance.payment_code,
+    },
+    {
+      label: 'Jenis Transaksi',
+      value: finance.transaction_type,
+    },
+    {
+      label: 'Pihak',
+      value: finance.party.id ? finance.party.name : '-',
+    },
+    {
+      label: 'Tanggal',
+      value: formatDate(finance.payment_date, 'DD MMM yyyy'),
+    },
+    {
+      label: 'Metode Pembayaran',
+      value: finance.payment_method,
+    },
+    {
+      label: 'Catatan',
+      value: finance.notes || '-',
+    },
+  ];
+  const informasiTransfer = [
+    {
+      label: 'No. Referensi',
+      value: finance.reference_number ?? '-',
+    },
+    {
+      label: 'Nomor Rekening',
+      value: `${finance.bank.alias} - ${finance.bank.account_number} - ${finance.bank.owner}`,
+    },
+    {
+      label: `Rekening ${formatTitleCase(finance.party.type)}`,
+      value: finance.party.account_number,
+    },
+    {
+      label: 'Nominal',
+      value: formatCurrency(finance.expense_amount),
+    },
+    {
+      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);
+
+    await FinanceApi.delete(finance.id as number);
+    router.back();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Finance!');
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <div className='flex flex-col gap-6 p-6'>
+      <FormHeader title='' backUrl='/finance' />
+
+      <Card
+        title='Detail Keuangan'
+        className={{
+          wrapper: 'w-full',
+        }}
+        variant='bordered'
+      >
+        <div className='grid grid-cols-2 gap-4 mb-6'>
+          <Table
+            data={informasiUmum}
+            columns={[
+              {
+                header: '',
+                id: 'label',
+                accessorKey: 'label',
+              },
+              {
+                header: '',
+                id: 'value',
+                accessorKey: 'value',
+              },
+            ]}
+            className={{
+              headerRowClassName: 'hidden',
+              paginationClassName: 'hidden',
+              containerClassName: 'mb-0',
+            }}
+          />
+          <Table
+            data={informasiTransfer}
+            columns={[
+              {
+                header: '',
+                id: 'label',
+                accessorKey: 'label',
+              },
+              {
+                header: '',
+                id: 'value',
+                accessorKey: 'value',
+              },
+            ]}
+            className={{
+              headerRowClassName: 'hidden',
+              paginationClassName: 'hidden',
+              containerClassName: 'mb-0',
+            }}
+          />
+        </div>
+      </Card>
+
+      <div className='flex flex-row gap-2 justify-end'>
+        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) && (
+          <RequirePermission permissions='lti.finance.payments.update'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              href={`/finance/detail/edit?financeId=${finance.id}`}
+            >
+              <Icon icon='mdi:pencil-outline' />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
+        {FINANCE_INITIAL_BALANCE_STATUS.includes(finance.transaction_type) && (
+          <RequirePermission permissions='lti.finance.initial_balances.update'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              href={`/finance/detail/edit/initial-balance?financeId=${finance.id}`}
+            >
+              <Icon icon='mdi:pencil-outline' />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
+        {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'
+            onClick={() => deleteModal.openModal()}
+          >
+            <Icon icon='mdi:delete-outline' />
+            Delete
+          </Button>
+        </RequirePermission>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </div>
+  );
+};
+
+export default FinanceDetail;

src/components/pages/finance/FinanceTable.tsx

@@ -0,0 +1,571 @@
+import { ChangeEventHandler, useMemo, useState } from 'react';
+import { CellContext, Row } from '@tanstack/react-table';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Dropdown from '@/components/dropdown/Dropdown';
+import DateInput from '@/components/input/DateInput';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import Table from '@/components/Table';
+import Tooltip from '@/components/Tooltip';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Finance } from '@/types/api/finance/finance';
+import {
+  FINANCE_INITIAL_BALANCE_STATUS,
+  FINANCE_INJECTION_STATUS,
+  FINANCE_TRANSACTION_STATUS,
+  ROWS_OPTIONS,
+} from '@/config/constant';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
+import { Bank } from '@/types/api/master-data/bank';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { Icon } from '@iconify/react';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Finance, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <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'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      {FINANCE_TRANSACTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.payments.update'>
+          <Button
+            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INITIAL_BALANCE_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.initial_balances.update'>
+          <Button
+            href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INJECTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.injections.update'>
+          <Button
+            href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      <RequirePermission permissions='lti.finance.transactions.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const FinanceTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transactionType: '',
+      bankId: '',
+      partyType: '',
+      sortBy: '',
+      startDate: '',
+      endDate: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transactionType: 'transaction_type',
+      bankId: 'bank_id',
+      partyType: 'party_type',
+      sortBy: 'sort_date',
+      startDate: 'start_date',
+      endDate: 'end_date',
+    },
+  });
+
+  // ===== State =====
+  const [searchParams, setSearchParams] = useSearchParams();
+  const deleteModal = useModal();
+  const [pendingFilters, setPendingFilters] = useState({
+    search: '',
+    transactionType: '',
+    bankId: '',
+    partyType: '',
+    sortBy: '',
+    startDate: '',
+    endDate: '',
+  });
+  const [selectedTransactionType, setSelectedTransactionType] =
+    useState<OptionType | null>(null);
+  const [selectedBank, setSelectedBank] = useState<OptionType | null>(null);
+  const [selectedPartyType, setSelectedPartyType] = useState<OptionType | null>(
+    null
+  );
+  const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
+  const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // ===== Fetch Data =====
+  const {
+    data: finances,
+    isLoading,
+    mutate: refreshFinances,
+  } = useSWR(
+    `${FinanceApi.basePath}/transactions${getTableFilterQueryString()}`,
+    FinanceApi.getAllFetcher
+  );
+
+  // ===== Options =====
+  const transactionTypeOptions = useMemo(() => {
+    return [
+      { label: 'Transfer', value: 'TRANSFER' },
+      { label: 'Cash', value: 'CASH' },
+      { label: 'Card', value: 'CARD' },
+      { label: 'Cheque', value: 'CHEQUE' },
+      { label: 'Saldo', value: 'SALDO' },
+    ];
+  }, []);
+  const partyTypeOptions = useMemo(() => {
+    return [
+      { label: 'Customer', value: 'CUSTOMER' },
+      { label: 'Supplier', value: 'SUPPLIER' },
+    ];
+  }, []);
+  const sortByOptions = useMemo(() => {
+    return [
+      { label: 'Tanggal Pembayaran', value: 'payment_date' },
+      { label: 'Tanggal Dibuat', value: 'created_at' },
+    ];
+  }, []);
+  const { options: bankOptions, rawData: bankRawData } = useSelect<Bank>(
+    BankApi.basePath,
+    'id',
+    'alias',
+    '',
+    {
+      limit: 'limit',
+    }
+  );
+
+  // ===== Handler =====
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPendingFilters((prev) => ({ ...prev, search: e.target.value }));
+  };
+  const transactionTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedTransactionType(val as OptionType);
+    setPendingFilters((prev) => ({
+      ...prev,
+      transactionType: val ? ((val as OptionType).value as string) : '',
+    }));
+  };
+  const bankChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedBank(val as OptionType);
+    setPendingFilters((prev) => ({
+      ...prev,
+      bankId: val ? ((val as OptionType).value as string) : '',
+    }));
+  };
+  const partyTypeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedPartyType(val as OptionType);
+    setPendingFilters((prev) => ({
+      ...prev,
+      partyType: val ? ((val as OptionType).value as string) : '',
+    }));
+  };
+  const sortByChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedSortBy(val as OptionType);
+    setPendingFilters((prev) => ({
+      ...prev,
+      sortBy: val ? ((val as OptionType).value as string) : '',
+    }));
+  };
+  const startDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPendingFilters((prev) => ({ ...prev, startDate: e.target.value }));
+  };
+  const endDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPendingFilters((prev) => ({ ...prev, endDate: e.target.value }));
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+  const submitFilterHandler = () => {
+    updateFilter('search', pendingFilters.search);
+    updateFilter('transactionType', pendingFilters.transactionType);
+    updateFilter('bankId', pendingFilters.bankId);
+    updateFilter('partyType', pendingFilters.partyType);
+    updateFilter('sortBy', pendingFilters.sortBy);
+    updateFilter('startDate', pendingFilters.startDate);
+    updateFilter('endDate', pendingFilters.endDate);
+  };
+  const resetFilterHandler = () => {
+    setSelectedTransactionType(null);
+    setSelectedBank(null);
+    setSelectedPartyType(null);
+    setSelectedSortBy(null);
+
+    const emptyFilters = {
+      search: '',
+      transactionType: '',
+      bankId: '',
+      partyType: '',
+      sortBy: '',
+      startDate: '',
+      endDate: '',
+    };
+    setPendingFilters(emptyFilters);
+
+    updateFilter('search', '');
+    updateFilter('transactionType', '');
+    updateFilter('bankId', '');
+    updateFilter('partyType', '');
+    updateFilter('sortBy', '');
+    updateFilter('startDate', '');
+    updateFilter('endDate', '');
+  };
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FinanceApi.delete(selectedFinance?.id as number);
+    refreshFinances();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Finance!');
+    setIsDeleteLoading(false);
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'ID',
+        accessorKey: 'payment_code',
+      },
+      {
+        header: 'References Number',
+        accessorKey: 'reference_number',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.reference_number;
+          return <span>{value ?? '-'}</span>;
+        },
+      },
+      {
+        header: 'Jenis Transaksi',
+        accessorKey: 'transaction_type',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.transaction_type
+            .split('_')
+            .join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
+      },
+      {
+        header: 'Pihak',
+        accessorFn: (finance: Finance) => finance.party.name,
+        cell: (props: CellContext<Finance, unknown>) => {
+          if (props.row.original.party.id) {
+            return <span>{props.row.original.party.name}</span>;
+          }
+          return <span>{'-'}</span>;
+        },
+      },
+      {
+        header: 'Tanggal',
+        accessorFn: (finance: Finance) =>
+          formatDate(finance.payment_date, 'DD MMM YYYY'),
+      },
+      {
+        header: 'Metode Pembayaran',
+        accessorKey: 'payment_method',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.payment_method.split('_').join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
+      },
+      {
+        header: 'Bank',
+        accessorFn: (finance: Finance) =>
+          `${finance.bank.alias} - ${finance.bank.account_number} - ${finance.bank.owner}`,
+      },
+      {
+        header: 'Pengeluaran (Rp)',
+        accessorFn: (finance: Finance) =>
+          formatCurrency(finance.expense_amount),
+      },
+      {
+        header: 'Pemasukan (Rp)',
+        accessorFn: (finance: Finance) => formatCurrency(finance.income_amount),
+      },
+      {
+        header: 'Aksi',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const currentPageSize =
+            props.table.getPaginationRowModel().rows.length;
+          const currentPageRows = props.table.getPaginationRowModel().flatRows;
+          const currentRowRelativeIndex =
+            currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+          const deleteClickHandler = () => {
+            setSelectedFinance(props.row.original);
+            deleteModal.openModal();
+          };
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu
+                    type='dropdown'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu
+                    type='collapse'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
+      },
+    ];
+  }, []);
+  return (
+    <section className='size-full p-6 flex flex-col gap-6'>
+      <div className='flex justify-end gap-2'>
+        <RequirePermission permissions='lti.finance.injections.create'>
+          <Button
+            color='warning'
+            className='min-w-24'
+            href='/finance/add/injection'
+          >
+            Injection Saldo Bank
+          </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.initial_balances.create'>
+          <Button
+            color='info'
+            className='text-white min-w-24'
+            href='/finance/add/initial-balance'
+          >
+            Saldo Awal
+          </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.payments.create'>
+          <Button color='primary' className='min-w-24' href='/finance/add'>
+            Tambah
+          </Button>
+        </RequirePermission>
+      </div>
+      <Card
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+        footer={
+          <div className='flex justify-end gap-2'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              onClick={resetFilterHandler}
+            >
+              Reset
+            </Button>
+            <Button
+              color='primary'
+              className='min-w-24'
+              onClick={submitFilterHandler}
+            >
+              Cari
+            </Button>
+          </div>
+        }
+      >
+        <div className='grid grid-cols-4 gap-6'>
+          <SelectInput
+            options={transactionTypeOptions}
+            label='Jenis Transaksi'
+            value={selectedTransactionType}
+            onChange={transactionTypeChangeHandler}
+            isClearable
+          />
+          <SelectInput
+            options={
+              isResponseSuccess(bankRawData)
+                ? bankOptions.map((bank) => ({
+                    label:
+                      bankRawData.data.find((data) => data.id === bank.value)
+                        ?.alias +
+                      ' - ' +
+                      bankRawData.data.find((data) => data.id === bank.value)
+                        ?.account_number +
+                      ' - ' +
+                      bankRawData.data.find((data) => data.id === bank.value)
+                        ?.owner,
+                    value: bank.value,
+                  }))
+                : []
+            }
+            label='Bank'
+            value={selectedBank}
+            onChange={bankChangeHandler}
+            isClearable
+          />
+          <SelectInput
+            options={partyTypeOptions}
+            label='Pihak'
+            value={selectedPartyType}
+            onChange={partyTypeChangeHandler}
+            isClearable
+          />
+          <DebouncedTextInput
+            name='search'
+            label='Cari'
+            placeholder='Cari'
+            value={pendingFilters.search}
+            onChange={searchChangeHandler}
+          />
+          <SelectInput
+            options={sortByOptions}
+            label='Urutkan Berdasarkan'
+            value={selectedSortBy}
+            onChange={sortByChangeHandler}
+            isClearable
+          />
+          <DateInput
+            name='startDate'
+            label='Periode Tanggal (Mulai)'
+            value={pendingFilters.startDate}
+            onChange={startDateChangeHandler}
+          />
+          <DateInput
+            name='endDate'
+            label='Periode Tanggal (Akhir)'
+            value={pendingFilters.endDate}
+            onChange={endDateChangeHandler}
+          />
+        </div>
+      </Card>
+      <Table<Finance>
+        data={isResponseSuccess(finances) ? finances.data : []}
+        columns={columns}
+        pageSize={tableFilterState.pageSize}
+        page={tableFilterState.page}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        totalItems={
+          isResponseSuccess(finances) ? finances.meta?.total_results : 0
+        }
+        isLoading={isLoading}
+      />
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${selectedFinance?.payment_code})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </section>
+  );
+};
+
+export default FinanceTable;

src/components/pages/finance/add/FormFinanceAdd.schema.ts

@@ -0,0 +1,67 @@
+import * as Yup from 'yup';
+import { OptionType } from '@/components/input/SelectInput';
+
+/**
+ * API Payload format:
+ * {
+    "party_id": 1,
+    "party_type": "CUSTOMER",
+    "payment_date": "2025-11-21",
+    "payment_method": "Transfer",
+    "bank_id": 1,
+    "reference_number": "DO.MBU.123",
+    "nominal": 25000000,
+    "notes": "Pembayaran piutang penjualan telur"
+  }
+ */
+
+// Type for form values (includes option objects for SelectInput)
+export type FinanceFormValues = {
+  party_type_option: OptionType | null;
+  party_id_option: OptionType | null;
+  party_account_number: string;
+  payment_date: string;
+  payment_method_option: OptionType | null;
+  bank_id_option: OptionType | null;
+  reference_number: string;
+  nominal: string;
+  notes: string;
+};
+
+export const FinanceFormSchema = Yup.object().shape({
+  party_type_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Jenis transaksi wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  party_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  party_account_number: Yup.string().required('Nomor rekening wajib diisi'),
+  payment_date: Yup.string().required('Tanggal pembayaran wajib diisi'),
+  payment_method_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Metode pembayaran wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  bank_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  reference_number: Yup.string().required('Nomor referensi wajib diisi'),
+  nominal: Yup.string().required('Nominal wajib diisi'),
+  notes: Yup.string().required('Catatan wajib diisi'),
+});
+
+export const UpdateFinanceFormSchema = FinanceFormSchema;

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

@@ -0,0 +1,417 @@
+'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 TextArea from '@/components/input/TextArea';
+import TextInput from '@/components/input/TextInput';
+import {
+  FinanceFormSchema,
+  FinanceFormValues,
+} from '@/components/pages/finance/add/FormFinanceAdd.schema';
+import {
+  FINANCE_PARTY_TYPE_OPTIONS,
+  FINANCE_PAYMENT_METHOD_OPTIONS,
+} 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 {
+  CreateFinancePayment,
+  Finance,
+  UpdateFinancePayment,
+} from '@/types/api/finance/finance';
+import { Bank } from '@/types/api/master-data/bank';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import toast from 'react-hot-toast';
+
+interface FormFinanceAddProps {
+  type?: 'add' | 'edit';
+  initialValues?: Finance;
+}
+
+interface PartyCommonProps {
+  id: number;
+  name: string;
+  account_number: string;
+}
+
+const FormFinanceAdd = ({
+  type = 'add',
+  initialValues,
+}: FormFinanceAddProps) => {
+  const router = useRouter();
+
+  // ===== Formik =====
+  const formikInitialValues = useMemo((): FinanceFormValues => {
+    return {
+      party_type_option:
+        FINANCE_PARTY_TYPE_OPTIONS.find(
+          (option) => option.value === initialValues?.party.type
+        ) || null,
+      party_id_option: initialValues?.party
+        ? {
+            label: initialValues?.party.name || '',
+            value: initialValues?.party.id || 0,
+          }
+        : null,
+      payment_date: initialValues?.payment_date || '',
+      payment_method_option:
+        FINANCE_PAYMENT_METHOD_OPTIONS.find(
+          (option) => option.value === initialValues?.payment_method
+        ) || null,
+      bank_id_option: initialValues?.bank
+        ? {
+            label: initialValues.bank.name,
+            value: initialValues.bank.id,
+          }
+        : null,
+      party_account_number: initialValues?.party.account_number || '',
+      reference_number: initialValues?.reference_number || '',
+      nominal: initialValues?.nominal.toString() || '',
+      notes: initialValues?.notes || '',
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<FinanceFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: FinanceFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload = transformFormValuesToPayload(values);
+
+      switch (type) {
+        case 'add':
+          await createFinance(payload);
+          break;
+
+        case 'edit':
+          if (initialValues?.id) {
+            await updateFinance(initialValues.id, payload);
+          }
+          break;
+      }
+    },
+  });
+
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
+  // ===== Options =====
+  const {
+    options: partyOptions,
+    isLoadingOptions: isLoadingPartyOptions,
+    rawData: partyRawData,
+  } = useSelect<PartyCommonProps>(
+    formik.values.party_type_option?.value === 'CUSTOMER'
+      ? CustomerApi.basePath
+      : SupplierApi.basePath,
+    'id',
+    'name',
+    '',
+    { limit: 'limit' }
+  );
+  const {
+    options: bankOptions,
+    rawData: bankRawData,
+    isLoadingOptions: isLoadingBankOptions,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+
+  // ===== Helper Functions =====
+  const transformFormValuesToPayload = (
+    values: FinanceFormValues
+  ): CreateFinancePayment => {
+    return {
+      party_id: Number(values.party_id_option?.value) || 0,
+      party_type: (values.party_type_option?.value as string) || '',
+      payment_date: formatDate(values.payment_date, 'YYYY-MM-DD'),
+      payment_method: (values.payment_method_option?.value as string) || '',
+      bank_id: Number(values.bank_id_option?.value) || 0,
+      reference_number: values.reference_number,
+      nominal: Number(values.nominal.replace(/\D/g, '')) || 0,
+      notes: values.notes,
+    };
+  };
+
+  // ===== Handler =====
+  const createFinance = useCallback(
+    async (payload: CreateFinancePayment) => {
+      const response = await FinanceApi.create(payload);
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Data berhasil ditambahkan');
+      router.refresh();
+      router.push('/finance');
+    },
+    [router]
+  );
+  const updateFinance = useCallback(
+    async (financeId: number, payload: UpdateFinancePayment) => {
+      const response = await FinanceApi.update(financeId, payload);
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Data berhasil diperbarui');
+      router.refresh();
+      router.push('/finance');
+    },
+    [router]
+  );
+
+  return (
+    <>
+      <section className='w-full max-w-xl mx-auto'>
+        <div className='flex flex-col gap-6 p-6'>
+          <FormHeader
+            title={`${type === 'add' ? 'Tambah' : 'Ubah'} Data Keuangan`}
+            backUrl='/finance'
+          />
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
+            <SelectInput
+              label='Jenis Transaksi'
+              placeholder='Pilih jenis transaksi'
+              options={FINANCE_PARTY_TYPE_OPTIONS}
+              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 &&
+                  formik.errors.party_type_option
+              )}
+              errorMessage={
+                formik.touched.party_type_option &&
+                formik.errors.party_type_option
+                  ? formik.errors.party_type_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <SelectInput
+              label={
+                formik.values.party_type_option?.value
+                  ? formatTitleCase(
+                      formik.values.party_type_option.value as string
+                    )
+                  : 'Pilih Jenis Transaksi Dahulu'
+              }
+              placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis transaksi dahulu'}`}
+              options={partyOptions}
+              value={formik.values.party_id_option}
+              onChange={(value) => {
+                formik.setFieldValue('party_id_option', value);
+                if (isResponseSuccess(partyRawData) && value) {
+                  formik.setFieldValue(
+                    'party_account_number',
+                    partyRawData.data?.find(
+                      (item) => item.id === (value as OptionType)?.value
+                    )?.account_number || ''
+                  );
+                }
+              }}
+              isLoading={isLoadingPartyOptions}
+              isError={Boolean(
+                formik.touched.party_id_option && formik.errors.party_id_option
+              )}
+              errorMessage={
+                formik.touched.party_id_option && formik.errors.party_id_option
+                  ? formik.errors.party_id_option
+                  : ''
+              }
+              required
+              isClearable
+              isDisabled={!formik.values.party_type_option?.value}
+            />
+            <DateInput
+              label='Tanggal'
+              placeholder='Pilih tanggal'
+              name='payment_date'
+              value={formik.values.payment_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(
+                formik.touched.payment_date && formik.errors.payment_date
+              )}
+              errorMessage={
+                formik.touched.payment_date && formik.errors.payment_date
+                  ? formik.errors.payment_date
+                  : ''
+              }
+              required
+            />
+            <SelectInput
+              label='Metode Pembayaran'
+              placeholder='Pilih metode pembayaran'
+              options={FINANCE_PAYMENT_METHOD_OPTIONS}
+              value={formik.values.payment_method_option}
+              onChange={(value) => {
+                formik.setFieldValue('payment_method_option', value);
+              }}
+              isError={Boolean(
+                formik.touched.payment_method_option &&
+                  formik.errors.payment_method_option
+              )}
+              errorMessage={
+                formik.touched.payment_method_option &&
+                formik.errors.payment_method_option
+                  ? formik.errors.payment_method_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <SelectInput
+              label='Bank'
+              placeholder='Pilih bank'
+              options={
+                isResponseSuccess(bankRawData)
+                  ? bankOptions.map((option) => ({
+                      label:
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.alias +
+                        ' - ' +
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.account_number +
+                        ' - ' +
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.owner,
+                      value: option.value,
+                    }))
+                  : []
+              }
+              value={formik.values.bank_id_option}
+              onChange={(value) => {
+                formik.setFieldValue('bank_id_option', value);
+              }}
+              isLoading={isLoadingBankOptions}
+              isError={Boolean(
+                formik.touched.bank_id_option && formik.errors.bank_id_option
+              )}
+              errorMessage={
+                formik.touched.bank_id_option && formik.errors.bank_id_option
+                  ? formik.errors.bank_id_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <TextInput
+              label={`Nomor Rekening ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'Pihak'}`}
+              placeholder={`Masukkan nomor rekening ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'pihak'}`}
+              name='party_account_number'
+              value={formik.values.party_account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(
+                formik.touched.party_account_number &&
+                  formik.errors.party_account_number
+              )}
+              errorMessage={
+                formik.touched.party_account_number &&
+                formik.errors.party_account_number
+                  ? formik.errors.party_account_number
+                  : ''
+              }
+              required
+              readOnly
+            />
+            <TextInput
+              label='Nomor Referensi'
+              placeholder='Masukkan nomor referensi'
+              name='reference_number'
+              value={formik.values.reference_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(
+                formik.touched.reference_number &&
+                  formik.errors.reference_number
+              )}
+              errorMessage={
+                formik.touched.reference_number &&
+                formik.errors.reference_number
+                  ? formik.errors.reference_number
+                  : ''
+              }
+              required
+            />
+            <NumberInput
+              label='Nominal'
+              placeholder='Masukkan nominal'
+              name='nominal'
+              value={formik.values.nominal}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(formik.touched.nominal && formik.errors.nominal)}
+              errorMessage={
+                formik.touched.nominal && formik.errors.nominal
+                  ? formik.errors.nominal
+                  : ''
+              }
+              required
+            />
+            <TextArea
+              label='Catatan'
+              placeholder='Masukkan catatan'
+              name='notes'
+              value={formik.values.notes}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(formik.touched.notes && formik.errors.notes)}
+              errorMessage={
+                formik.touched.notes && formik.errors.notes
+                  ? formik.errors.notes
+                  : ''
+              }
+              required
+            />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            <div className='flex justify-center gap-4'>
+              <Button
+                type='reset'
+                color='warning'
+                className='w-min-24'
+                onClick={() => formik.resetForm()}
+                disabled={formik.isSubmitting}
+              >
+                Reset
+              </Button>
+              <Button
+                type='submit'
+                className='w-min-24'
+                disabled={formik.isSubmitting || !formik.isValid}
+              >
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default FormFinanceAdd;

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts

@@ -0,0 +1,49 @@
+import * as Yup from 'yup';
+import { OptionType } from '@/components/input/SelectInput';
+
+// Type for form values (includes option objects for SelectInput)
+export type InitialBalanceFormValues = {
+  party_type_option: OptionType | null;
+  party_id_option: OptionType | null;
+  bank_id_option: OptionType | null;
+  reference_number: string;
+  initial_balance_type_option: OptionType | null;
+  nominal: string;
+  note: string;
+};
+
+export const InitialBalanceFormSchema = Yup.object().shape({
+  party_type_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Jenis pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  party_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  bank_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  reference_number: Yup.string().required('Nomor referensi wajib diisi'),
+  initial_balance_type_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Tipe saldo awal wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  nominal: Yup.string().required('Nominal wajib diisi'),
+  note: Yup.string().required('Catatan wajib diisi'),
+});
+
+export const UpdateInitialBalanceFormSchema = InitialBalanceFormSchema;

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

@@ -0,0 +1,383 @@
+'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, { useSelect } from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import TextInput from '@/components/input/TextInput';
+import {
+  InitialBalanceFormSchema,
+  InitialBalanceFormValues,
+} from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema';
+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';
+import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
+import {
+  CreateInitialBalance,
+  Finance,
+  UpdateInitialBalance,
+} from '@/types/api/finance/finance';
+import { Bank } from '@/types/api/master-data/bank';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import toast from 'react-hot-toast';
+
+interface FormFinanceAddInitialBalanceProps {
+  type?: 'add' | 'edit';
+  initialValues?: Finance;
+}
+
+const FormFinanceAddInitialBalance = ({
+  type = 'add',
+  initialValues,
+}: FormFinanceAddInitialBalanceProps) => {
+  const router = useRouter();
+
+  // ===== Formik =====
+  const formikInitialValues = useMemo((): InitialBalanceFormValues => {
+    // Type assertion to handle potential initial_balance_type field
+    const extendedInitialValues = initialValues as Finance & {
+      initial_balance_type?: string;
+    };
+
+    return {
+      party_type_option:
+        FINANCE_PARTY_TYPE_OPTIONS.find(
+          (option) => option.value === initialValues?.party.type
+        ) || null,
+      party_id_option: initialValues?.party
+        ? {
+            label: initialValues.party.name,
+            value: initialValues.party.id,
+          }
+        : null,
+      bank_id_option: initialValues?.bank
+        ? {
+            label: initialValues.bank.name,
+            value: initialValues.bank.id,
+          }
+        : null,
+      reference_number: initialValues?.reference_number || '',
+      initial_balance_type_option:
+        (initialValues?.nominal ?? 0) < 0
+          ? FINANCE_INITIAL_BALANCE_TYPE_OPTIONS.find(
+              (option) => option.value === 'NEGATIVE'
+            ) || null
+          : FINANCE_INITIAL_BALANCE_TYPE_OPTIONS.find(
+              (option) => option.value === 'POSITIVE'
+            ) || null,
+      nominal: initialValues?.nominal?.toString() || '',
+      note: initialValues?.notes || '',
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<InitialBalanceFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: InitialBalanceFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload = transformFormValuesToPayload(values);
+
+      switch (type) {
+        case 'add':
+          await createInitialBalance(payload);
+          break;
+
+        case 'edit':
+          if (initialValues?.id) {
+            await updateInitialBalance(initialValues.id, payload);
+          }
+          break;
+      }
+    },
+  });
+
+  // ===== Options =====
+  const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
+    useSelect(
+      formik.values.party_type_option?.value === 'CUSTOMER'
+        ? CustomerApi.basePath
+        : SupplierApi.basePath,
+      'id',
+      'name',
+      '',
+      { limit: 'limit' }
+    );
+  const {
+    options: bankOptions,
+    rawData: bankRawData,
+    isLoadingOptions: isLoadingBankOptions,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+
+  // ===== Helper Functions =====
+  const transformFormValuesToPayload = (
+    values: InitialBalanceFormValues
+  ): CreateInitialBalance => {
+    return {
+      party_type: (values.party_type_option?.value as string) || '',
+      party_id: Number(values.party_id_option?.value) || 0,
+      bank_id: Number(values.bank_id_option?.value) || 0,
+      reference_number: values.reference_number,
+      initial_balance_type:
+        (values.initial_balance_type_option?.value as string) || '',
+      nominal: Number(values.nominal.replace(/\D/g, '')) || 0,
+      note: values.note,
+    };
+  };
+
+  // ===== Handler =====
+  const createInitialBalance = useCallback(
+    async (payload: CreateInitialBalance) => {
+      const response = await FinanceApi.createInitialBalances(payload);
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Saldo awal berhasil ditambahkan');
+      router.refresh();
+      router.push('/finance');
+    },
+    [router]
+  );
+
+  const updateInitialBalance = useCallback(
+    async (financeId: number, payload: UpdateInitialBalance) => {
+      const response = await FinanceApi.updateInitialBalances(
+        financeId,
+        payload
+      );
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Saldo awal berhasil diperbarui');
+      router.refresh();
+      router.push('/finance');
+    },
+    [router]
+  );
+
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
+  return (
+    <>
+      <section className='w-full max-w-xl mx-auto'>
+        <div className='flex flex-col gap-6 p-6'>
+          <FormHeader
+            title={`${type === 'add' ? 'Tambah' : 'Ubah'} Saldo Awal`}
+            backUrl='/finance'
+          />
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
+            <SelectInput
+              label='Jenis Pihak'
+              placeholder='Pilih jenis pihak'
+              options={FINANCE_PARTY_TYPE_OPTIONS}
+              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 &&
+                  formik.errors.party_type_option
+              )}
+              errorMessage={
+                formik.touched.party_type_option &&
+                formik.errors.party_type_option
+                  ? formik.errors.party_type_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <SelectInput
+              label={
+                formik.values.party_type_option?.value
+                  ? formatTitleCase(
+                      formik.values.party_type_option.value as string
+                    )
+                  : 'Pilih Jenis Pihak Dahulu'
+              }
+              placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis pihak dahulu'}`}
+              options={partyOptions}
+              value={formik.values.party_id_option}
+              onChange={(value) => {
+                formik.setFieldValue('party_id_option', value);
+              }}
+              isLoading={isLoadingPartyOptions}
+              isError={Boolean(
+                formik.touched.party_id_option && formik.errors.party_id_option
+              )}
+              errorMessage={
+                formik.touched.party_id_option && formik.errors.party_id_option
+                  ? formik.errors.party_id_option
+                  : ''
+              }
+              required
+              isClearable
+              isDisabled={!formik.values.party_type_option?.value}
+            />
+            <SelectInput
+              label='Bank'
+              placeholder='Pilih bank'
+              options={
+                isResponseSuccess(bankRawData)
+                  ? bankOptions.map((option) => ({
+                      label:
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.alias +
+                        ' - ' +
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.account_number +
+                        ' - ' +
+                        bankRawData.data?.find(
+                          (item) => item.id === option.value
+                        )?.owner,
+                      value: option.value,
+                    }))
+                  : []
+              }
+              value={formik.values.bank_id_option}
+              onChange={(value) => {
+                formik.setFieldValue('bank_id_option', value);
+              }}
+              isLoading={isLoadingBankOptions}
+              isError={Boolean(
+                formik.touched.bank_id_option && formik.errors.bank_id_option
+              )}
+              errorMessage={
+                formik.touched.bank_id_option && formik.errors.bank_id_option
+                  ? formik.errors.bank_id_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <TextInput
+              label='Nomor Referensi'
+              placeholder='Masukkan nomor referensi'
+              name='reference_number'
+              value={formik.values.reference_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(
+                formik.touched.reference_number &&
+                  formik.errors.reference_number
+              )}
+              errorMessage={
+                formik.touched.reference_number &&
+                formik.errors.reference_number
+                  ? formik.errors.reference_number
+                  : ''
+              }
+              required
+            />
+            <SelectInput
+              label='Tipe Saldo Awal'
+              placeholder='Pilih tipe saldo awal'
+              options={FINANCE_INITIAL_BALANCE_TYPE_OPTIONS}
+              value={formik.values.initial_balance_type_option}
+              onChange={(value) => {
+                formik.setFieldValue('initial_balance_type_option', value);
+              }}
+              isError={Boolean(
+                formik.touched.initial_balance_type_option &&
+                  formik.errors.initial_balance_type_option
+              )}
+              errorMessage={
+                formik.touched.initial_balance_type_option &&
+                formik.errors.initial_balance_type_option
+                  ? formik.errors.initial_balance_type_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <NumberInput
+              label='Nominal'
+              placeholder='Masukkan nominal'
+              name='nominal'
+              value={formik.values.nominal}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(formik.touched.nominal && formik.errors.nominal)}
+              errorMessage={
+                formik.touched.nominal && formik.errors.nominal
+                  ? formik.errors.nominal
+                  : ''
+              }
+              allowNegative={false}
+              startAdornment={
+                formik.values.initial_balance_type_option?.value ===
+                'POSITIVE' ? (
+                  <Icon icon='mdi:plus' />
+                ) : formik.values.initial_balance_type_option?.value ===
+                  'NEGATIVE' ? (
+                  <Icon icon='mdi:minus' />
+                ) : (
+                  ''
+                )
+              }
+              required
+            />
+            <TextArea
+              label='Catatan'
+              placeholder='Masukkan catatan'
+              name='note'
+              value={formik.values.note}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(formik.touched.note && formik.errors.note)}
+              errorMessage={
+                formik.touched.note && formik.errors.note
+                  ? formik.errors.note
+                  : ''
+              }
+              required
+            />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            <div className='flex justify-center gap-4'>
+              <Button
+                type='reset'
+                color='warning'
+                className='w-min-24'
+                onClick={() => formik.resetForm()}
+                disabled={formik.isSubmitting}
+              >
+                Reset
+              </Button>
+              <Button
+                type='submit'
+                className='w-min-24'
+                disabled={formik.isSubmitting || !formik.isValid}
+              >
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default FormFinanceAddInitialBalance;

src/components/pages/finance/add/injection/FormFinanceInjection.schema.ts

@@ -0,0 +1,25 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as Yup from 'yup';
+
+// Type for form values (includes option objects for SelectInput)
+export type InjectionFormValues = {
+  bank_id_option: OptionType | null;
+  adjustment_date: string;
+  nominal: string;
+  note: string;
+};
+
+export const InjectionFormSchema = Yup.object<InjectionFormValues>({
+  bank_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  adjustment_date: Yup.string().required('Tanggal penyesuaian wajib diisi'),
+  nominal: Yup.string().required('Nominal wajib diisi'),
+  note: Yup.string().required('Catatan wajib diisi'),
+});
+
+export const UpdateInjectionFormSchema = InjectionFormSchema;