chore: add FINANCE_TRANSACTION_TYPE_OPTIONS and FINANCE_PAYMENT_METHOD_OPTIONS constant

.gitlab-ci.yml

@@ -2,17 +2,6 @@ stages:
   - build
   - deploy
 
-# ==========================================================
-# ✅ Global defaults
-# ==========================================================
-default:
-  tags:
-    - server-development-biznet
-  interruptible: true
-
-# ==========================================================
-# 🏗️ Build Template
-# ==========================================================
 .build_template: &build_template
   stage: build
   image: node:20-alpine
@@ -50,9 +39,6 @@ default:
       - out/
     expire_in: 1 week
 
-# ==========================================================
-# 🚀 Deploy Template
-# ==========================================================
 .deploy_template: &deploy_template
   stage: deploy
   image:
@@ -87,8 +73,8 @@ default:
 
       if [ "$CI_COMMIT_BRANCH" = "development" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-STAGING"
+      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-PROD"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -96,11 +82,11 @@ default:
       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 \
@@ -128,9 +114,7 @@ default:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ==========================================================
-# ==== DEVELOPMENT (Branch development) ======
-# ==========================================================
+# ====== DEVELOPMENT (Branch development) ======
 build:dev:
   <<: *build_template
   rules:
@@ -138,6 +122,8 @@ 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'
@@ -155,31 +141,25 @@ 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
 
-# ==========================================================
-# ====== 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: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
 
-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
-npx tsc --noEmit
+npm run build

package.json

@@ -15,35 +15,20 @@
     "@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",
-    "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react": "^19.1.2",
+    "next": "^15.5.7",
+    "react": "19.1.0",
     "react-day-picker": "^9.11.1",
-    "react-dom": "^19.1.2",
+    "react-dom": "19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-hook-form": "^7.70.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
-    "react-resizable-panels": "2.1.7",
     "react-select": "^5.10.2",
-    "recharts": "^3.6.0",
-    "sonner": "^2.0.7",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
-    "vaul": "^1.1.2",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },

src/app/closing/detail/page.tsx

@@ -7,43 +7,23 @@ 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();
 
@@ -59,12 +39,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading =
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingHppEkspedisi ||
-    isLoadingProject ||
-    isLoadingKandang;
+  const isLoading = isLoadingClosing || isLoadingSales;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -75,17 +50,6 @@ 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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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,7 +1,9 @@
-import DashboardProduction from '@/components/pages/dashboard/DashboardProduction';
-
 const Dashboard = () => {
-  return <DashboardProduction />;
+  return (
+    <section className='w-full p-4'>
+      <h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
+    </section>
+  );
 };
 
 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 === 4;
+    expense.data.latest_approval.step_number === 3;
 
   if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
     if (typeof window !== 'undefined') {

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

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

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

@@ -1,7 +0,0 @@
-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

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

src/app/finance/add/page.tsx

@@ -1,7 +1,16 @@
-import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
+import FinanceForm from '@/components/pages/finance/form/FinanceForm';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Finance | Add',
+};
 
 const FinanceAddPage = () => {
-  return <FormFinanceAdd />;
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <FinanceForm formType='add' />
+    </div>
+  );
 };
 
 export default FinanceAddPage;

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

@@ -1,51 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,41 +0,0 @@
-'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

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

src/app/globals.css

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

src/app/layout.tsx

@@ -3,7 +3,6 @@ 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';
 
@@ -36,7 +35,6 @@ export default function RootLayout({
         </RequireAuth>
 
         <Toaster />
-        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

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

@@ -1,13 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,56 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -0,0 +1,20 @@
+'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

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

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

@@ -14,13 +14,13 @@ const ProjectFlockClosingPage = () => {
   const projectFlockKandangId = searchParams.get('projectFlockKandangId');
 
   const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
-    useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
-      ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
+    useSWR(projectFlockKandangId, (id: number) =>
+      ProjectFlockKandangApi.getSingle(id)
     );
 
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    `get-flock-id/${projectFlockId}`,
-    () => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
   );
 
   if (!projectFlockId || !projectFlockKandangId) {

src/app/production/project-flock/layout.tsx

@@ -15,7 +15,7 @@ export default function ProjectFlockLayout({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
 
-  const isAdd = pathname.includes('/add');
+  const isAdd = pathname.endsWith('/add');
   const isEdit = pathname.includes('/detail/edit');
   const isDetail = pathname.includes('/detail');
   const isChickin = pathname.includes('/chickin/add/kandang');

src/app/production/recording/detail/edit/page.tsx

@@ -14,7 +14,7 @@ const RecordingEdit = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: string) => RecordingApi.getSingle(parseInt(id))
+    (id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
   );
 
   if (!recordingId) {

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

@@ -14,7 +14,7 @@ const RecordingDetail = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: string) => RecordingApi.getSingle(parseInt(id))
+    (id: number) => RecordingApi.getSingle(id)
   );
 
   if (!recordingId) {

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

@@ -1,7 +0,0 @@
-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

@@ -1,49 +0,0 @@
-'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

@@ -1,10 +0,0 @@
-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

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

src/app/report/expense/detail/layout.tsx

@@ -1,11 +0,0 @@
-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

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

src/app/report/expense/page.tsx

@@ -1,13 +0,0 @@
-'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

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

src/app/report/logistic-stock/layout.tsx

@@ -1,11 +0,0 @@
-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

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

src/app/report/marketing/layout.tsx

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

src/app/report/marketing/page.tsx

@@ -1,11 +0,0 @@
-import MarketingReportContent from '@/components/pages/report/MarketingReportContent';
-
-const MarketingReportPage = () => {
-  return (
-    <section className='w-full p-4'>
-      <MarketingReportContent />
-    </section>
-  );
-};
-
-export default MarketingReportPage;

src/app/report/production-result/page.tsx

@@ -1,11 +0,0 @@
-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,25 +3,29 @@
 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;
   };
-  statusIndicator?: boolean;
-  variant?: Variant;
-  color?: Color;
-  size?: Size;
+  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const Badge = ({
   children,
   className,
-  statusIndicator = false,
   variant = 'default',
   color,
   size = 'md',
@@ -30,7 +34,7 @@ const Badge = ({
   const getBadgeClasses = () => {
     const baseClasses = 'badge';
 
-    const variantClasses: Record<Variant, string> = {
+    const variantClasses = {
       default: '',
       outline: 'badge-outline',
       ghost: 'badge-ghost',
@@ -38,7 +42,7 @@ const Badge = ({
       dash: 'badge-dash',
     };
 
-    const colorClasses: Record<Color, string> = {
+    const colorClasses = {
       neutral: 'badge-neutral',
       primary: 'badge-primary',
       secondary: 'badge-secondary',
@@ -47,10 +51,9 @@ const Badge = ({
       success: 'badge-success',
       warning: 'badge-warning',
       error: 'badge-error',
-      none: '',
     };
 
-    const sizeClasses: Record<Size, string> = {
+    const sizeClasses = {
       xs: 'badge-xs',
       sm: 'badge-sm',
       md: 'badge-md',
@@ -67,31 +70,8 @@ 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,8 +15,6 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
-  expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -38,8 +36,6 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
-  expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -50,21 +46,12 @@ 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,
-          getSidebarWidth()
+          'w-full max-w-[300px] lg:w-[300px]'
         ),
       };
     } else if (variant === 'right') {
@@ -73,11 +60,11 @@ const Drawer = ({
         drawer: cn(baseClassNames.drawer, 'drawer-end'),
         drawerSide: cn(
           baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
+          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full min-w-120 sm:w-fit'
         ),
       };
     } else if (variant === 'left') {
@@ -89,7 +76,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full min-w-120 sm:w-fit'
         ),
       };
     }
@@ -151,37 +138,14 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content - Full height container */}
+        {/* Sidebar Content */}
         <div
           className={cn(
-            'flex h-screen bg-base-100 overflow-hidden',
-            variant === 'right' && 'flex-row'
+            varianClassName?.drawerSidebarContent,
+            className?.drawerContent
           )}
         >
-          {/* 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>
-          )}
+          {sidebarContent}
         </div>
       </div>
     </div>

src/components/Dropdown.tsx

@@ -1,114 +0,0 @@
-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,8 +5,6 @@ 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';
@@ -15,7 +13,6 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
-    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -23,7 +20,6 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
-    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -35,12 +31,9 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
-  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
-    selectedRowIds.length > 0
-      ? 'bottom-[5%] opacity-100'
-      : 'bottom-[-5%] opacity-0';
+    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -60,7 +53,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        `absolute ${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'
       )}
@@ -76,18 +69,7 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .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;
-                })
+                .filter((action) => !action.hidden)
                 .map((action, index) => {
                   return (
                     <Button
@@ -127,41 +109,29 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {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>
-            ))}
+          {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>
+          ))}
         </div>
       </div>
     </div>

src/components/MainDrawer.tsx

@@ -9,13 +9,10 @@ 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();
@@ -65,13 +62,6 @@ 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 = '';
@@ -111,10 +101,6 @@ 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';
+import Dropdown from '@/components/dropdown/Dropdown';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
@@ -54,8 +54,7 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          align='end'
-          direction='bottom'
+          position='bottom-end'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -63,11 +62,9 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          className={{
-            content: 'w-52 mt-3',
-          }}
+          contentClassName='w-52 mt-3'
         >
-          <Menu>
+          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

src/components/Table.tsx

@@ -60,12 +60,6 @@ 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 = [{}, {}, {}, {}, {}];
@@ -118,7 +112,6 @@ const Table = <TData extends object>({
   renderFooter = false,
   withCheckbox = false,
   rowOptions = [10, 20, 50, 100],
-  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -312,35 +305,24 @@ const Table = <TData extends object>({
           </thead>
 
           <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => {
-              const customRowContent = renderCustomRow?.(row);
+            {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())}
 
-              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>
-              );
-            })}
+                    {isLoading && <div className='skeleton w-full h-4' />}
+                  </td>
+                ))}
+              </tr>
+            ))}
           </tbody>
           <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (

src/components/Tabs.tsx

@@ -21,7 +21,6 @@ export interface TabsProps
   className?:
     | string
     | {
-        container?: string;
         wrapper?: string;
         tab?: string;
         content?: string;
@@ -54,14 +53,10 @@ const Tabs = ({
     onTabChange?.(tabId);
   };
 
-  const {
-    container: containerClassName,
-    wrapper: wrapperClassName,
-    tab: tabClassName,
-    content: contentClassName,
-  } = typeof className === 'object'
-    ? className
-    : { wrapper: className, tab: undefined };
+  const { wrapper: wrapperClassName, tab: tabClassName } =
+    typeof className === 'object'
+      ? className
+      : { wrapper: className, tab: undefined };
 
   const getTabsClasses = () => {
     const variantClasses: Record<string, string> = {
@@ -109,7 +104,7 @@ const Tabs = ({
       {...props}
       className={cn(
         'w-full',
-        typeof className === 'string' ? className : containerClassName
+        typeof className === 'string' ? className : undefined
       )}
     >
       <div role='tablist' className={getTabsClasses()}>
@@ -126,9 +121,7 @@ const Tabs = ({
         ))}
       </div>
 
-      {activeContent && (
-        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
-      )}
+      {activeContent && <div className='mt-4'>{activeContent}</div>}
     </div>
   );
 };

src/components/dropdown/Dropdown.tsx

@@ -1,109 +1,111 @@
-import React, { ReactNode, useState, useRef } from 'react';
+'use client';
 
+import { ReactNode, useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
-export interface DropdownProps {
+interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
-  className?: {
-    wrapper?: string;
-    trigger?: string;
-    content?: string;
-  };
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
   align?: 'start' | 'center' | 'end';
-  direction?: 'top' | 'bottom' | 'left' | 'right';
   hover?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  close?: boolean;
-  controlled?: boolean;
+  className?: string;
+  contentClassName?: string;
 }
 
 const Dropdown = ({
   trigger,
   children,
+  position = 'bottom',
+  align = 'start',
+  hover = false,
   className,
-  align,
-  direction,
-  hover,
-  defaultOpen = false,
-  open,
-  close,
-  controlled = false,
+  contentClassName,
 }: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const toggleDropdown = () => {
-    if (!controlled) {
-      const newState = !isOpen;
-      setIsOpen(newState);
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
     }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Build position classes
+  const getPositionClasses = () => {
+    const classes: string[] = [];
+
+    // Handle combined positions like 'top-start'
+    if (position.includes('-')) {
+      const [pos, al] = position.split('-');
+      classes.push(`dropdown-${pos}`);
+      classes.push(`dropdown-${al}`);
+    } else {
+      classes.push(`dropdown-${position}`);
+      if (align !== 'start') {
+        classes.push(`dropdown-${align}`);
+      }
+    }
+
+    return classes.join(' ');
   };
 
-  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 handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // alert('clicked');
+    setIsOpen(!isOpen);
   };
 
-  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();
-          }
-        }}
-      >
+    <div
+      ref={dropdownRef}
+      className={cn(
+        'dropdown',
+        getPositionClasses(),
+        hover && 'dropdown-hover',
+        isOpen && 'dropdown-open',
+        className
+      )}
+    >
+      {/* Trigger Button */}
+      <div onClick={handleToggle} className='cursor-pointer'>
         {trigger}
       </div>
-      {!close && (
-        <div tabIndex={-1} className={getContentClasses()}>
+
+      {/* Dropdown Content - Only render when open */}
+      {isOpen && (
+        <div
+          tabIndex={-1}
+          className={cn('dropdown-content z-[10]', contentClassName)}
+          onClick={() => setIsOpen(false)} // Close on item click
+        >
           {children}
         </div>
       )}

src/components/helper/PermissionNotFound.tsx

@@ -1,12 +0,0 @@
-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,7 +5,6 @@ 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,9 +27,6 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
-
-    // refresh every 12 minutes
-    refreshInterval: 12 * 60 * 1000,
   });
 
   useEffect(() => {
@@ -56,25 +52,6 @@ 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)
@@ -86,7 +63,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     );
   }
 
-  if (!isLoadingUserResponse && userErrorResponse) {
+  if (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>
@@ -94,7 +71,10 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
           Please try refreshing the page or contact support if the problem
           persists.
         </p>
-        <button className='btn btn-primary' onClick={() => redirectToSSO()}>
+        <button
+          className='btn btn-primary'
+          onClick={() => window.location.reload()}
+        >
           Retry
         </button>
       </div>

src/components/helper/RequirePermission.tsx

@@ -1,28 +0,0 @@
-'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

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

src/components/menu/MenuItem.tsx

@@ -8,7 +8,6 @@ interface MenuItemProps {
   href?: string;
   icon?: string;
   active?: boolean;
-  isLoading?: boolean;
   onClick?: () => void;
   className?: string;
 }
@@ -18,7 +17,6 @@ const MenuItem = ({
   href,
   icon,
   active = false,
-  isLoading = false,
   className,
   onClick,
 }: MenuItemProps) => {
@@ -52,28 +50,17 @@ const MenuItem = ({
 
   return (
     <li>
-      {!isLoading && href && (
+      {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!isLoading && !href && (
+      {!href && (
         <button className={menuItemBaseClassName} onClick={onClick}>
           {menuItemContent}
         </button>
       )}
-
-      {isLoading && (
-        <button className={menuItemBaseClassName}>
-          <span
-            className={cn('loading loading-dots loading-md mx-auto', {
-              'text-gray-400': !active,
-              'text-black': active,
-            })}
-          />
-        </button>
-      )}
     </li>
   );
 };

src/components/modal/ConfirmationModal.tsx

@@ -8,13 +8,10 @@ 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;
@@ -27,84 +24,17 @@ 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);
 
@@ -125,44 +55,47 @@ const ConfirmationModal = ({
   return (
     <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
       <div className='w-full flex flex-col gap-4'>
-        {iconPosition === 'center' ? (
-          <>
-            <div className='w-fit mx-auto'>
-              <ConfirmationModalIcon type={type} size={iconSize} />
-            </div>
+        <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'
+            />
+          )}
 
-            <p className='text-center font-medium'>
-              {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
-            </p>
+          {type === 'success' && (
+            <Icon
+              icon='qlementine-icons:success-12'
+              width={64}
+              height={64}
+              className='text-success-content'
+            />
+          )}
 
-            {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>
+          {type === 'error' && (
+            <Icon
+              icon='solar:danger-triangle-linear'
+              width={64}
+              height={64}
+              className='text-error-content'
+            />
+          )}
+        </div>
 
-            <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>
-        )}
+        <p className='text-center font-medium'>
+          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+        </p>
 
         {children && <div className='w-full'>{children}</div>}
 
@@ -170,7 +103,7 @@ const ConfirmationModal = ({
           {secondaryButton && secondaryButton.text && (
             <Button
               {...secondaryButton}
-              variant='outline'
+              variant='ghost'
               color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
               disabled={

src/components/molecules/SidebarMenu.tsx

@@ -2,7 +2,6 @@ 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';
@@ -10,7 +9,6 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
-  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -24,17 +22,8 @@ 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
@@ -89,15 +78,13 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => {
-        return (
-          <SidebarMenuItem
-            key={menuIdx}
-            item={menuItem}
-            activeLink={activeLink}
-          />
-        );
-      })}
+      {menu.map((menuItem, menuIdx) => (
+        <SidebarMenuItem
+          key={menuIdx}
+          item={menuItem}
+          activeLink={activeLink}
+        />
+      ))}
     </Menu>
   );
 };

src/components/pages/ApprovalSteps.tsx

@@ -144,45 +144,33 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
 
 export const formatGroupedApprovalsToApprovalSteps = (
   approvalLine: ApprovalLine,
-  groupedApprovals: BaseGroupedApproval[] | undefined,
-  latestApproval: BaseApproval | undefined
+  groupedApprovals: BaseGroupedApproval[],
+  latestApproval: BaseApproval
 ): ApprovalStepsProps['approvals'] => {
   const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
     approvalLine.map((approvalLineItem) => {
-      const approvalGroup = groupedApprovals?.find(
+      const approvalGroup = groupedApprovals.find(
         (approvalGroupItem) =>
           approvalGroupItem.step_number === approvalLineItem.step_number
       );
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals?.[groupedApprovals.length - 1]?.step_number;
+        groupedApprovals[groupedApprovals.length - 1]?.step_number;
 
-      const isLatestApprovalRejected = latestApproval?.action === 'REJECTED';
+      const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
 
-      // Only throw error if we have a valid lastStepNumber to compare against
-      if (
-        !approvalGroup &&
-        lastStepNumber !== undefined &&
-        currentStepNumber <= lastStepNumber
-      ) {
-        // throw new Error(
-        //   `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
-        // );
+      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
+        throw new Error(
+          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        );
       }
 
       if (!approvalGroup) {
-        // Check if this step is waiting (only if we have latestApproval)
-        const isWaiting =
-          latestApproval?.step_number !== undefined &&
-          currentStepNumber === latestApproval.step_number + 1;
-
-        // Check if previous approval was rejected
+        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
         const isPreviousApprovalRejected =
-          groupedApprovals &&
-          groupedApprovals.length > 0 &&
-          groupedApprovals[groupedApprovals.length - 1]?.approvals?.[0]
-            ?.action === 'REJECTED';
+          groupedApprovals[groupedApprovals.length - 1].approvals[0].action ===
+          'REJECTED';
 
         return {
           name: approvalLineItem.step_name,
@@ -196,11 +184,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       let approvalStatus: ApprovalStepStatus = 'IDLE';
 
-      // Only compare if latestApproval and its step_number exist
-      if (
-        latestApproval?.step_number !== undefined &&
-        approvalGroup.step_number <= latestApproval.step_number
-      ) {
+      if (approvalGroup.step_number <= latestApproval.step_number) {
         if (approvalGroup.approvals) {
           switch (approvalGroup?.approvals[0]?.action) {
             case 'CREATED':
@@ -219,7 +203,6 @@ export const formatGroupedApprovalsToApprovalSteps = (
           }
         }
       } else if (
-        latestApproval?.step_number !== undefined &&
         approvalGroup.step_number === latestApproval.step_number + 1 &&
         !isLatestApprovalRejected
       ) {
@@ -309,7 +292,7 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit: number | string;
+    limit: number;
     search?: string;
     group_step_number?: boolean;
   };
@@ -370,33 +353,14 @@ const useApprovalSteps = ({
 
   // Formatting Akhir
   const approvals = useMemo(() => {
-    if (isLoading || !approvalLines.length) {
+    if (isLoading || !approvalLines.length || !latestApproval) {
       return [];
     }
-
-    // Try to derive latestApproval from groupedApprovals if not provided
-    let effectiveLatestApproval = latestApproval;
-
-    if (!effectiveLatestApproval && groupedApprovals.length > 0) {
-      // Get all approvals from grouped data
-      const allApprovals = groupedApprovals.flatMap((group) => group.approvals);
-
-      if (allApprovals.length > 0) {
-        // Use the most recent approval (last in array)
-        effectiveLatestApproval = allApprovals[allApprovals.length - 1];
-      }
-    }
-
-    // If still no latestApproval, return empty
-    if (!effectiveLatestApproval) {
-      return [];
-    }
-
     try {
       return formatGroupedApprovalsToApprovalSteps(
         approvalLines,
         groupedApprovals,
-        effectiveLatestApproval
+        latestApproval
       );
     } catch (error) {
       console.warn('Gagal memformat approval steps:', error);

src/components/pages/closing/ClosingDetail.tsx

@@ -6,38 +6,24 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
-import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
-import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
 
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
-  ClosingHppExpedition,
 } from '@/types/api/closing';
-import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
-import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
-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';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+import SalesReportTable from './sale/SalesReportTable';
+
 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');
 
@@ -51,12 +37,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'perhitunganSapronak',
         label: 'Perhitungan Sapronak',
-        content: (
-          <ClosingSapronakCalculationTabContent
-            closingGeneralInformation={initialValue}
-            projectFlockId={id}
-          />
-        ),
+        content: 'Perhitungan Sapronak',
       },
       {
         id: 'penjualan',
@@ -66,22 +47,22 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'overhead',
         label: 'Overhead',
-        content: <ClosingOverheadTabContent projectFlockId={id} />,
+        content: 'Overhead',
       },
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
+        content: 'HPP Ekspedisi',
       },
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: <ClosingProductionDataTabContent projectFlockId={id} />,
+        content: 'Data Produksi',
       },
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: <ClosingFinanceTabContent projectFlockId={id} />,
+        content: 'Keuangan',
       },
     ];
 
@@ -93,9 +74,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       <section className='w-full max-w-7xl pb-16'>
         <header className='flex flex-col gap-4'>
           <Button
-            href={
-              !kandangData ? '/closing' : `/closing/detail/?closingId=${id}`
-            }
+            href='/closing'
             variant='link'
             className='w-fit p-0 text-primary'
           >
@@ -106,18 +85,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
         </header>
 
-        <ClosingGeneralInformationTable
-          initialValue={initialValue}
-          projectData={projectData}
-          kandangData={kandangData}
-        />
-
-        {!kandangData && (
-          <ClosingKandangList
-            initialValue={initialValue}
-            projectData={projectData}
-          />
-        )}
+        <ClosingGeneralInformationTable initialValue={initialValue} />
 
         <Tabs
           activeTabId={activeTab}

src/components/pages/closing/ClosingFinanceTabContent.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,595 +0,0 @@
-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,29 +1,12 @@
 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'>
@@ -34,9 +17,7 @@ const ClosingGeneralInformationTable = ({
                 <tr>
                   <td>Lokasi</td>
                   <td>:</td>
-                  <td>
-                    {initialValue?.location_name ?? projectData?.location?.name}
-                  </td>
+                  <td>{initialValue?.location_name}</td>
                 </tr>
                 <tr>
                   <td>Periode</td>
@@ -44,22 +25,14 @@ const ClosingGeneralInformationTable = ({
                   <td>{initialValue?.period}</td>
                 </tr>
                 <tr>
-                  <td>Project Flock</td>
+                  <td>Kategori</td>
                   <td>:</td>
-                  <td>
-                    {initialValue?.project_flock?.name ??
-                      projectData?.flock_name}
-                  </td>
+                  <td>{initialValue?.project_category}</td>
                 </tr>
                 <tr>
                   <td>Populasi</td>
                   <td>:</td>
-                  <td>
-                    {!kandangData
-                      ? (initialValue?.population ?? 0)
-                      : (chickinPopulation ?? 0)}{' '}
-                    Ekor
-                  </td>
+                  <td>{initialValue?.population} Ekor</td>
                 </tr>
                 <tr>
                   <td>Jenis Project</td>
@@ -67,13 +40,9 @@ const ClosingGeneralInformationTable = ({
                   <td>{initialValue?.project_type}</td>
                 </tr>
                 <tr className='table-row @sm:hidden'>
-                  <td>Kandang {!kandangData && 'Aktif'}</td>
+                  <td>Kandang Aktif</td>
                   <td>:</td>
-                  <td>
-                    {!kandangData
-                      ? `${initialValue?.active_house_count} Kandang`
-                      : kandangData?.kandang?.name}
-                  </td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
                 </tr>
                 <tr className='table-row @sm:hidden'>
                   <td>Status Pembayaran Penjualan</td>
@@ -100,13 +69,9 @@ const ClosingGeneralInformationTable = ({
             <table className='table table-zebra table-sm'>
               <tbody>
                 <tr>
-                  <td>Kandang {!kandangData && 'Aktif'}</td>
+                  <td>Kandang Aktif</td>
                   <td>:</td>
-                  <td>
-                    {!kandangData
-                      ? `${initialValue?.active_house_count} Kandang`
-                      : kandangData?.kandang?.name}
-                  </td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
                 </tr>
                 <tr>
                   <td>Status Pembayaran Penjualan</td>

src/components/pages/closing/ClosingKandangList.tsx

@@ -1,37 +0,0 @@
-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/ClosingOverheadTabContent.tsx

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

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -1,162 +0,0 @@
-import Card from '@/components/Card';
-import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-import { ClosingApi } from '@/services/api/closing';
-import { Overhead, OverheadTotal } from '@/types/api/closing';
-import { ColumnDef } from '@tanstack/react-table';
-import { useMemo } from 'react';
-import useSWR from 'swr';
-
-interface ClosingOverheadTableProps {
-  type?: 'detail';
-  projectFlockId: number;
-}
-
-const ClosingOverheadTable = ({
-  type,
-  projectFlockId,
-}: ClosingOverheadTableProps) => {
-  const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/overhead`,
-    () => ClosingApi.getOverhead(projectFlockId),
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  // Helper function to create columns with footer support
-  const createColumns = (total?: OverheadTotal): ColumnDef<Overhead>[] => [
-    // Group untuk kolom tanpa footer
-    {
-      header: 'Nama Item',
-      accessorFn: (props) => props.item_name,
-      footer: 'Total Pengeluaran Overhead',
-    },
-    {
-      header: 'Satuan',
-      accessorFn: (props) => props.uom_name,
-    },
-    {
-      header: 'Budget Pengajuan',
-      footer: '',
-      columns: [
-        {
-          id: 'budget_quantity',
-          header: 'Jumlah',
-          accessorFn: (props) =>
-            props.budget_quantity ? formatNumber(props.budget_quantity) : '-',
-          footer: total ? () => formatNumber(total.budget_quantity) : '',
-        },
-        {
-          id: 'budget_unit_price',
-          header: 'Harga Satuan',
-          accessorFn: (props) =>
-            props.budget_unit_price
-              ? formatCurrency(props.budget_unit_price)
-              : '-',
-          footer: '',
-        },
-        {
-          id: 'budget_total_amount',
-          header: 'Total',
-          accessorFn: (props) =>
-            props.budget_total_amount
-              ? formatCurrency(props.budget_total_amount)
-              : '-',
-          footer: total ? () => formatCurrency(total.budget_total_amount) : '',
-        },
-      ],
-    },
-    {
-      header: 'Realisasi',
-      footer: '',
-      columns: [
-        {
-          id: 'actual_date',
-          header: 'Tanggal',
-          accessorFn: (props) =>
-            props.actual_date
-              ? formatDate(props.actual_date, 'DD MMM, YYYY')
-              : '-',
-          footer: '',
-        },
-        {
-          id: 'actual_quantity',
-          header: 'Jumlah',
-          accessorFn: (props) =>
-            props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
-          footer: total ? () => formatNumber(total.actual_quantity) : '',
-        },
-        {
-          id: 'actual_unit_price',
-          header: 'Harga Satuan',
-          accessorFn: (props) =>
-            props.actual_unit_price
-              ? formatCurrency(props.actual_unit_price)
-              : '-',
-          footer: '',
-        },
-        {
-          id: 'actual_total_amount',
-          header: 'Total',
-          accessorFn: (props) =>
-            props.actual_total_amount
-              ? formatCurrency(props.actual_total_amount)
-              : '-',
-          footer: total ? () => formatCurrency(total.actual_total_amount) : '',
-        },
-      ],
-    },
-    {
-      id: 'cost_per_bird',
-      header: 'Rp/Ekor',
-      accessorFn: (props) =>
-        props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
-      footer: total ? () => formatCurrency(total.cost_per_bird) : '',
-    },
-  ];
-
-  const columns = useMemo(
-    () =>
-      isResponseSuccess(overhead)
-        ? createColumns(overhead.data?.total)
-        : createColumns(),
-    [overhead]
-  );
-
-  return (
-    <>
-      <Card
-        title='Pengeluaran Overhead'
-        collapsible
-        defaultCollapsed={false}
-        className={{
-          wrapper: 'w-full',
-          body: 'p-4 shadow',
-        }}
-      >
-        <Table<Overhead>
-          data={
-            isResponseSuccess(overhead) ? (overhead.data?.overheads ?? []) : []
-          }
-          columns={columns}
-          className={{
-            containerClassName: 'my-4',
-            headerColumnClassName: cn(
-              TABLE_DEFAULT_STYLING.headerColumnClassName,
-              'whitespace-nowrap'
-            ),
-          }}
-          renderFooter={
-            isResponseSuccess(overhead)
-              ? overhead.data?.overheads.length > 0
-              : false
-          }
-        />
-      </Card>
-    </>
-  );
-};
-
-export default ClosingOverheadTable;

src/components/pages/closing/ClosingProductionDataTabContent.tsx

@@ -1,304 +0,0 @@
-'use client';
-
-import useSWR from 'swr';
-import { ClosingApi } from '@/services/api/closing';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { formatNumber } from '@/lib/helper';
-
-interface ClosingProductionDataTabContentProps {
-  projectFlockId: number;
-}
-
-const ClosingProductionDataTabContent = ({
-  projectFlockId,
-}: ClosingProductionDataTabContentProps) => {
-  const { data: productionData, isLoading } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
-    () => ClosingApi.getProductionData(projectFlockId)
-  );
-
-  if (isLoading) {
-    return (
-      <div className='w-full flex justify-center py-8'>
-        <span className='loading loading-spinner loading-lg' />
-      </div>
-    );
-  }
-
-  if (!productionData || !isResponseSuccess(productionData)) {
-    return (
-      <div className='w-full text-center py-8 text-gray-500'>
-        Gagal memuat data produksi.
-      </div>
-    );
-  }
-
-  const { purchase, sales, performance } = productionData.data;
-
-  // Helper for consistent row styling
-  const DataRow = ({
-    label,
-    value,
-    unit = '',
-    valueClassName = 'font-bold text-gray-800',
-    unitClassName = 'text-gray-500 w-12 text-right',
-  }: {
-    label: string;
-    value: string | number;
-    unit?: string;
-    valueClassName?: string;
-    unitClassName?: 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'>
-        <span className={valueClassName}>{value}</span>
-        {unit && <span className={unitClassName}>{unit}</span>}
-      </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>
-
-      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
-        {/* Left Column */}
-        <div className='space-y-10'>
-          {/* Purchase Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Pembelian
-            </h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Populasi Awal'
-                value={formatNumber(purchase.initial_population)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Claim Culling'
-                value={formatNumber(purchase.claim_culling)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Populasi Akhir'
-                value={formatNumber(purchase.final_population)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Pakan Masuk'
-                value={formatNumber(purchase.feed_in)}
-                unit='Kg'
-              />
-              <DataRow
-                label='Pakan Terpakai'
-                value={formatNumber(purchase.feed_used)}
-                unit='Kg'
-              />
-            </div>
-          </section>
-
-          {/* Sales Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Penjualan
-            </h3>
-            <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>
-
-        {/* Divider Line (Absolute centered) */}
-        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
-
-        {/* Right Column */}
-        <div className='space-y-10 flex flex-col h-full'>
-          {/* Performance Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Performance
-            </h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Deplesi'
-                value={formatNumber(performance.depletion)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Umur'
-                value={formatNumber(performance.age_day)}
-                unit='Hari'
-              />
-              <DataRow
-                label='Mortalitas Std'
-                value={formatNumber(performance.mor_std)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='Mortalitas Act'
-                value={formatNumber(performance.mor_act)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='DEFF Mortalitas'
-                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
-                label='FCR Std'
-                value={formatNumber(performance.fcr_std)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='FCR Act'
-                value={formatNumber(performance.fcr_act)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='DEFF FCR'
-                value={formatNumber(performance.fcr_diff)}
-                unitClassName='hidden'
-              />
-
-              {/* 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>
-      </div>
-    </div>
-  );
-};
-
-export default ClosingProductionDataTabContent;

src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-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
-            closingGeneralInformation={closingGeneralInformation}
-            projectFlockId={projectFlockId}
-          />
-        </>
-      )}
-    </div>
-  );
-};
-
-export default ClosingSapronakCalculationTabContent;

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

@@ -1,268 +0,0 @@
-'use client';
-
-import Card from '@/components/Card';
-
-import Table from '@/components/Table';
-import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-import {
-  RowSapronakCalculation,
-  TotalSapronakCalculation,
-} from '@/types/api/closing';
-import { ColumnDef } from '@tanstack/react-table';
-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 {
-  projectFlockId: number;
-  closingGeneralInformation?: ClosingGeneralInformation;
-}
-
-const ClosingSapronakCalculationTable = ({
-  projectFlockId,
-  closingGeneralInformation,
-}: ClosingSapronakCalculationTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
-  const { data: sapronakCalculation, isLoading } = useSWR(
-    `/closing/sapronak-calculation/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
-    () => ClosingApi.getPerhitunganSapronak(projectFlockId, Number(kandangId)),
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  // Helper function to create columns with footer support
-  const createColumns = (
-    total?: TotalSapronakCalculation
-  ): ColumnDef<RowSapronakCalculation>[] => [
-    {
-      header: 'Tanggal',
-      accessorKey: 'date',
-      cell: (props) =>
-        props.row.original.date
-          ? formatDate(props.row.original.date, 'DD MMM YYYY')
-          : '-',
-      footer: 'Total',
-    },
-    {
-      header: 'No. Referensi',
-      accessorKey: 'reference_number',
-      cell: (props) => (props.row.original.reference_number as string) || '-',
-      footer: '',
-    },
-    {
-      header: 'QTY Masuk',
-      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'>
-              {total?.qty_in ? formatNumber(total?.qty_in) : '0'}
-            </div>
-          )
-        : '',
-    },
-    {
-      header: 'QTY Keluar',
-      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'>
-              {total?.qty_out ? formatNumber(total?.qty_out) : '0'}
-            </div>
-          )
-        : '',
-    },
-    {
-      header: 'QTY Pakai',
-      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'>
-              {total?.qty_used ? formatNumber(total?.qty_used) : '0'}
-            </div>
-          )
-        : '',
-    },
-    {
-      header: 'Uraian',
-      accessorKey: 'description',
-      cell: (props) => (props.row.original.description as string) || '-',
-      footer: '',
-    },
-    {
-      header: 'Kategori Produk',
-      accessorKey: 'product_category',
-      cell: (props) => (props.row.original.product_category as string) || '-',
-      footer: '',
-    },
-    {
-      header: 'Harga Beli/Qty (Rp)',
-      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'>
-              {total?.avg_unit_price
-                ? formatCurrency(total?.avg_unit_price)
-                : '-'}
-            </div>
-          )
-        : '',
-    },
-    {
-      header: 'Total Harga (Rp)',
-      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'>
-              {total?.total_amount ? formatCurrency(total?.total_amount) : '-'}
-            </div>
-          )
-        : '',
-    },
-    {
-      header: 'Keterangan',
-      accessorKey: 'notes',
-      cell: (props) => (props.row.original.notes as string) || '-',
-      footer: '',
-    },
-  ];
-
-  // Memoize columns untuk setiap kategori
-  const docColumns = useMemo(
-    () =>
-      isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.doc?.total)
-        : createColumns(),
-    [sapronakCalculation]
-  );
-
-  const ovkColumns = useMemo(
-    () =>
-      isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.ovk?.total)
-        : createColumns(),
-    [sapronakCalculation]
-  );
-
-  const pakanColumns = useMemo(
-    () =>
-      isResponseSuccess(sapronakCalculation)
-        ? createColumns(sapronakCalculation.data?.pakan?.total)
-        : createColumns(),
-    [sapronakCalculation]
-  );
-
-  return (
-    <div className='flex flex-col gap-4'>
-      {/* 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={
-            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={
-            isResponseSuccess(sapronakCalculation)
-              ? (sapronakCalculation.data?.pakan?.rows ?? [])
-              : []
-          }
-          columns={pakanColumns}
-          className={{
-            containerClassName: 'my-4',
-          }}
-          renderFooter={
-            isResponseSuccess(sapronakCalculation) &&
-            sapronakCalculation.data?.pakan?.rows.length > 0
-          }
-        />
-      </Card>
-    </div>
-  );
-};
-
-export default ClosingSapronakCalculationTable;

src/components/pages/closing/ClosingsTable.tsx

@@ -15,8 +15,6 @@ 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';
@@ -45,18 +43,17 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <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>
+        <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>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -126,6 +123,28 @@ 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

@@ -1,110 +0,0 @@
-'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

@@ -1,491 +0,0 @@
-'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

@@ -1,545 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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 >= 5 &&
+      initialValues?.latest_approval.step_number >= 4 &&
       initialValues.latest_approval.action !== 'REJECTED'
     ) {
       validTabs.push({

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -4,7 +4,6 @@ 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';
 
@@ -16,7 +15,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, S3_PUBLIC_BASE_URL } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
 
 interface ExpenseRealizationContentProps {
   initialValues?: Expense;
@@ -48,13 +47,6 @@ 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);
   };
 
@@ -70,17 +62,16 @@ 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'>
-          <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>
+          {/* 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>
         </div>
       </div>
 
@@ -110,69 +101,59 @@ const ExpenseRealizationContent = ({
                     initialValues?.realization_docs.length > 0 && (
                       <ul className='list-disc'>
                         {initialValues?.realization_docs.map(
-                          (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>
-                            );
-                          }
+                          (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>
+                          )
                         )}
                       </ul>
                     )}
                 </div>
 
-                <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',
-                      }}
-                    />
+                <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>
-                </RequirePermission>
+                  {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>
               </td>
             </tr>
           </tbody>
@@ -226,7 +207,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.pengajuans?.forEach(
-              (item) => (expenseGrandTotal += item.qty * item.price)
+              (item) => (expenseGrandTotal += item.price)
             );
 
             return (
@@ -288,7 +269,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.realisasi?.forEach(
-              (item) => (expenseGrandTotal += item.qty * item.price)
+              (item) => (expenseGrandTotal += item.price)
             );
 
             return (

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -19,7 +19,6 @@ 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';
@@ -27,7 +26,7 @@ import {
   UploadRequestDocumentsFormSchema,
   UploadRequestDocumentsFormValues,
 } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
-import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
 import { ExpenseApi } from '@/services/api/expense';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { EXPENSE_REQUEST_APPROVAL_LINE } from '@/config/approval-line';
@@ -59,40 +58,34 @@ const ExpenseRequestContent = ({
 
   const isLatestApprovalRejectedOrDone =
     isLatestApprovalRejected ||
-    initialValues?.latest_approval.step_number === 6;
+    initialValues?.latest_approval.step_number === 5;
 
-  const isCurrentApprovalOnHeadArea =
+  const isCurrentApprovalOnManager =
     !isLatestApprovalRejected &&
     initialValues?.latest_approval.step_number === 1;
 
-  const isCurrentApprovalOnUnitVicePresident =
+  const isCurrentApprovalOnFinance =
     !isLatestApprovalRejected &&
     initialValues?.latest_approval.step_number === 2;
 
-  const isCurrentApprovalOnFinance =
-    !isLatestApprovalRejected &&
-    initialValues?.latest_approval.step_number === 3;
-
   const isCurrentApprovalOnRealization =
     !isLatestApprovalRejected &&
-    initialValues?.latest_approval.step_number === 5;
+    initialValues?.latest_approval.step_number === 4;
 
   const showEditButton =
-    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 === 4);
-
-  const showRejectButton =
-    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number !== 5 &&
     (initialValues?.latest_approval.step_number === 1 ||
       initialValues?.latest_approval.step_number === 2 ||
       initialValues?.latest_approval.step_number === 3);
 
+  const showRejectButton =
+    !isLatestApprovalRejected &&
+    (initialValues?.latest_approval.step_number === 1 ||
+      initialValues?.latest_approval.step_number === 2);
+
   const isExpenseCanBeRealized =
     !isLatestApprovalRejected &&
-    initialValues?.latest_approval.step_number === 4;
+    initialValues?.latest_approval.step_number === 3;
 
   // Modal hooks
   const deleteModal = useModal();
@@ -146,17 +139,17 @@ const ExpenseRequestContent = ({
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    const deleteResponse = await ExpenseApi.delete(initialValues?.id as number);
+    try {
+      await ExpenseApi.delete(initialValues?.id as number);
 
-    if (isResponseSuccess(deleteResponse)) {
       toast.success('Berhasil menghapus data biaya operasional!');
       router.push('/expense');
-    } else {
+    } catch (error) {
       toast.error('Gagal menghapus data biaya operasional!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
     }
-
-    deleteModal.closeModal();
-    setIsDeleteLoading(false);
   };
 
   const confirmationModalCompleteClickHandler = async () => {
@@ -180,15 +173,8 @@ const ExpenseRequestContent = ({
 
     let approveResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isCurrentApprovalOnHeadArea) {
-      approveResponse = await ExpenseApi.approveHeadArea(
-        initialValues.id,
-        notes
-      );
-    }
-
-    if (isCurrentApprovalOnUnitVicePresident) {
-      approveResponse = await ExpenseApi.approveUnitVicePresident(
+    if (isCurrentApprovalOnManager) {
+      approveResponse = await ExpenseApi.approveManager(
         initialValues.id,
         notes
       );
@@ -220,15 +206,8 @@ const ExpenseRequestContent = ({
 
     let rejectResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isCurrentApprovalOnHeadArea) {
-      rejectResponse = await ExpenseApi.rejectHeadArea(initialValues.id, notes);
-    }
-
-    if (isCurrentApprovalOnUnitVicePresident) {
-      rejectResponse = await ExpenseApi.rejectUnitVicePresident(
-        initialValues.id,
-        notes
-      );
+    if (isCurrentApprovalOnManager) {
+      rejectResponse = await ExpenseApi.rejectManager(initialValues.id, notes);
     }
 
     if (isCurrentApprovalOnFinance) {
@@ -251,13 +230,6 @@ 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);
   };
 
@@ -282,135 +254,101 @@ const ExpenseRequestContent = ({
           {/* TODO: apply RBAC */}
 
           <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
-            {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>
+            {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>
             )}
 
             {isCurrentApprovalOnFinance && (
-              <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>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='tdesign:money' width={24} height={24} />
+                Approve Finance
+              </Button>
             )}
 
             {isCurrentApprovalOnRealization && (
-              <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>
+              <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>
             )}
 
             {showRejectButton && (
-              <RequirePermission
-                permissions={[
-                  'lti.expense.approve.head_area',
-                  'lti.expense.approve.unit_vice_president',
-                  'lti.expense.approve.finance',
-                ]}
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                className='w-full:w-fit'
               >
-                <Button
-                  variant='outline'
-                  color='error'
-                  onClick={rejectClickHandler}
-                  className='w-full:w-fit'
-                >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
-                  Reject
-                </Button>
-              </RequirePermission>
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
             )}
 
             {isExpenseCanBeRealized && (
-              <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>
+              <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>
             )}
 
             <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
               {showEditButton && (
-                <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>
-              )}
-
-              <RequirePermission permissions='lti.expense.delete'>
                 <Button
                   type='button'
-                  color='error'
-                  onClick={deleteExpenseClickHandler}
+                  color='warning'
+                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
                   className='px-4 grow sm:grow-0'
                 >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
+                  <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>
             </div>
           </div>
 
@@ -450,13 +388,9 @@ const ExpenseRequestContent = ({
                   <th>Kandang</th>
                   <th>:</th>
                   <td>
-                    {initialValues?.kandangs &&
-                    initialValues?.kandangs.some((k) => k.name)
-                      ? initialValues?.kandangs
-                          .filter((item) => item.name)
-                          .map((item) => item.name)
-                          .join(', ')
-                      : '-'}
+                    {initialValues?.kandangs
+                      .map((item) => item.name)
+                      .join(', ')}
                   </td>
                 </tr>
                 <tr>
@@ -494,14 +428,7 @@ const ExpenseRequestContent = ({
                 <tr>
                   <th>Nominal Biaya</th>
                   <th>:</th>
-                  <td>
-                    {formatCurrency(
-                      initialValues?.latest_approval.step_number === 5 ||
-                        initialValues?.latest_approval.step_number === 6
-                        ? (initialValues?.total_realisasi ?? 0)
-                        : (initialValues?.total_pengajuan ?? 0)
-                    )}
-                  </td>
+                  <td>{formatCurrency(initialValues?.grand_total ?? 0)}</td>
                 </tr>
                 <tr>
                   <th>Status Pencairan</th>
@@ -535,73 +462,59 @@ const ExpenseRequestContent = ({
                         initialValues?.documents.length > 0 && (
                           <ul className='list-disc'>
                             {initialValues?.documents.map(
-                              (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>
-                                );
-                              }
+                              (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>
+                              )
                             )}
                           </ul>
                         )}
                     </div>
 
-                    <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',
-                          }}
-                        />
+                    <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>
-                    </RequirePermission>
+                      {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>
                   </td>
                 </tr>
               </tbody>
@@ -619,7 +532,7 @@ const ExpenseRequestContent = ({
                 let expenseGrandTotal = 0;
 
                 kandangExpense.pengajuans?.forEach(
-                  (item) => (expenseGrandTotal += item.qty * item.price)
+                  (item) => (expenseGrandTotal += item.price)
                 );
 
                 return (
@@ -634,9 +547,7 @@ const ExpenseRequestContent = ({
                             colSpan={5}
                             className='font-bold text-center text-base-content text-lg'
                           >
-                            {kandangExpense.kandang_id && kandangExpense.name
-                              ? `Biaya ${kandangExpense.name}`
-                              : `Biaya ${initialValues?.location.name || 'Umum'}`}
+                            Biaya {kandangExpense.name}
                           </th>
                         </tr>
                         <tr>

src/components/pages/expense/ExpenseStatusBadge.tsx

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

src/components/pages/expense/ExpensesTable.tsx

@@ -28,7 +28,6 @@ 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';
@@ -55,84 +54,71 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   const showEditButton =
-    props.row.original.latest_approval.step_number !== 6 &&
+    props.row.original.latest_approval.step_number !== 5 &&
     (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 === 4);
+      props.row.original.latest_approval.step_number === 3);
 
   // TODO: apply RBAC
   const showRealizationButton =
     props.row.original.latest_approval.action !== 'REJECTED' &&
-    props.row.original.latest_approval.step_number === 4;
+    props.row.original.latest_approval.step_number === 3;
 
   return (
     <RowOptionsMenuWrapper type={type}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <RequirePermission permissions='lti.expense.detail'>
-          <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>
-        </RequirePermission>
+        <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.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>
+          <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>
         )}
 
         {showRealizationButton && (
-          <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>
-        )}
-
-        <RequirePermission permissions='lti.expense.delete'>
           <Button
-            onClick={deleteClickHandler}
+            href={`/expense/realization/?expenseId=${props.row.original.id}`}
             variant='ghost'
-            color='error'
-            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+            color='info'
+            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
           >
             <Icon
-              icon='material-symbols:delete-outline-rounded'
+              icon='material-symbols:money-bag-rounded'
               width={16}
               height={16}
-              className='justify-start text-sm'
             />
-            Delete
+            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>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -194,7 +180,7 @@ const ExpensesTable = () => {
     parseInt(item)
   );
 
-  const isAllSelectedRowLatestApprovalOnHeadArea = useMemo(() => {
+  const isAllSelectedRowLatestApprovalOnManager = useMemo(() => {
     return selectedRowIds.every((rowId) => {
       if (!isResponseSuccess(expenses)) return false;
 
@@ -203,28 +189,11 @@ const ExpensesTable = () => {
       const isLatestApprovalRejected =
         expenseItem?.latest_approval.action === 'REJECTED';
 
-      const isCurrentApprovalOnHeadArea =
+      const isCurrentApprovalOnManager =
         !isLatestApprovalRejected &&
         expenseItem?.latest_approval.step_number === 1;
 
-      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;
+      return isCurrentApprovalOnManager;
     });
   }, [expenses, selectedRowIds]);
 
@@ -239,7 +208,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnFinance =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 3;
+        expenseItem?.latest_approval.step_number === 2;
 
       return isCurrentApprovalOnFinance;
     });
@@ -256,7 +225,7 @@ const ExpensesTable = () => {
 
       const isCurrentApprovalOnRealization =
         !isLatestApprovalRejected &&
-        expenseItem?.latest_approval.step_number === 5;
+        expenseItem?.latest_approval.step_number === 4;
 
       return isCurrentApprovalOnRealization;
     });
@@ -415,7 +384,7 @@ const ExpensesTable = () => {
   ) => {
     return (
       row.original.latest_approval.action !== 'REJECTED' &&
-      row.original.latest_approval.step_number !== 6
+      row.original.latest_approval.step_number !== 5
     );
   };
 
@@ -438,19 +407,11 @@ const ExpensesTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    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!');
-    }
+    await ExpenseApi.delete(selectedExpense?.id as number);
+    refreshExpenses();
 
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus biaya operasional!');
     setIsDeleteLoading(false);
   };
 
@@ -459,13 +420,8 @@ const ExpensesTable = () => {
 
     let bulkApproveResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isAllSelectedRowLatestApprovalOnHeadArea) {
-      bulkApproveResponse = await ExpenseApi.bulkApproveHeadArea(
-        selectedRowIds,
-        notes
-      );
-    } else if (isAllSelectedRowLatestApprovalOnUnitVicePresident) {
-      bulkApproveResponse = await ExpenseApi.bulkApproveUnitVicePresident(
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveManager(
         selectedRowIds,
         notes
       );
@@ -501,13 +457,8 @@ const ExpensesTable = () => {
 
     let bulkRejectResponse: BaseApiResponse<Expense> | undefined = undefined;
 
-    if (isAllSelectedRowLatestApprovalOnHeadArea) {
-      bulkRejectResponse = await ExpenseApi.bulkRejectHeadArea(
-        selectedRowIds,
-        notes
-      );
-    } else if (isAllSelectedRowLatestApprovalOnUnitVicePresident) {
-      bulkRejectResponse = await ExpenseApi.bulkRejectUnitVicePresident(
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectManager(
         selectedRowIds,
         notes
       );
@@ -608,87 +559,57 @@ 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'>
-                <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>
+                <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>
 
                 {selectedRowIds.length > 0 && (
                   <>
-                    <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>
-
-                    <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>
-
-                    <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',
-                      ]}
+                    <Button
+                      variant='outline'
+                      color='info'
+                      onClick={bulkApproveClickHandler}
+                      disabled={!isAllSelectedRowLatestApprovalOnManager}
+                      className='w-full sm:w-fit'
                     >
-                      <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>
+                      <Icon icon='lucide-lab:farm' width={24} height={24} />
+                      Approve Manager
+                    </Button>
+
+                    <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>
+
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={bulkRejectClickHandler}
+                      disabled={
+                        !isAllSelectedRowLatestApprovalOnManager &&
+                        !isAllSelectedRowLatestApprovalOnFinance
+                      }
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
                   </>
                 )}
               </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 >= 5;
+  const isExpenseRealized = approval?.step_number && approval.step_number >= 4;
 
   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,11 +67,7 @@ const ExpenseKandangsTable = ({
   );
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
-    convertRowSelectionArrToObj(
-      selectedKandangs
-        .map((item) => item.id)
-        .filter((id): id is number => id !== undefined)
-    )
+    convertRowSelectionArrToObj(selectedKandangs.map((item) => item.id))
   );
 
   const kandangsColumns: ColumnDef<Kandang>[] = [

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

@@ -1,7 +1,6 @@
 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?: {
@@ -13,7 +12,7 @@ type ExpenseRealizationFormSchemaType = {
     label: string;
   };
   realization_date?: string;
-  kandangs?: { id?: number; name?: string }[];
+  kandangs?: { id: number; name: string }[];
   supplier?: {
     value: number;
     label: string;
@@ -21,7 +20,7 @@ type ExpenseRealizationFormSchemaType = {
   existing_documents?: { name: string; url: string }[];
   documents?: File[];
   realizations: {
-    kandang_id?: number;
+    kandang_id: number;
     cost_items: {
       nonstock?: {
         value: number;
@@ -50,11 +49,12 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
     kandangs: Yup.array()
       .of(
         Yup.object({
-          id: Yup.number().optional(),
-          name: Yup.string().optional(),
+          id: Yup.number().required('Kandang wajib dipilih!'),
+          name: Yup.string().required('Kandang wajib dipilih!'),
         })
       )
-      .optional(),
+      .min(1, 'Kandang wajib dipilih!')
+      .required('Kandang wajib dipilih!'),
 
     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!').optional(),
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
           cost_items: Yup.array()
             .of(
               Yup.object({
@@ -86,12 +86,12 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
                 notes: Yup.string(),
               })
             )
-            .min(1, 'Harus memiliki setidaknya 1 biaya!')
-            .required('Biaya wajib diisi!'),
+            .min(1, 'Kandang harus memiliki setidaknya 1 biaya!')
+            .required('Biaya kandang wajib diisi!'),
         })
       )
-      .min(1, 'Biaya wajib diisi!')
-      .required('Biaya wajib diisi!'),
+      .min(1, 'Biaya kandang wajib diisi!')
+      .required('Biaya kandang wajib diisi!'),
   });
 
 export const UpdateExpenseRealizationFormSchema = ExpenseRealizationFormSchema;
@@ -139,13 +139,10 @@ export const getExpenseRealizationFormInitialValues = (
           label: initialValues.supplier.name,
         }
       : undefined,
-    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}`,
-      };
-    }),
+    existing_documents: initialValues?.realization_docs?.map((doc) => ({
+      name: doc.path,
+      url: doc.path,
+    })),
     documents: [],
     realizations: initialValues?.kandangs
       ? initialValues.kandangs.map((kandangExpense) => {

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

@@ -16,7 +16,6 @@ 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,
@@ -150,10 +149,25 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('location', val);
 
     formik.setFieldValue('kandangs', []);
+    formik.setFieldValue('realizations', []);
+  };
 
-    // Auto-create realization item for location (without kandang)
-    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,
         cost_items: [
           {
             nonstock: undefined,
@@ -162,57 +176,25 @@ 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);
   };
 
@@ -223,13 +205,6 @@ 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);
   };
 
@@ -315,23 +290,21 @@ const ExpenseRealizationForm = ({
             className={{ wrapper: 'col-span-12' }}
           />
 
-          <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>
+          <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',
+            }}
+          />
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -362,10 +335,7 @@ const ExpenseRealizationForm = ({
             )}
 
           <ExpenseRealizationKandangDetailExpense
-            type={type}
             formik={formik}
-            supplierId={formik.values.supplier?.value as number}
-            location={formik.values.location}
             className={{
               wrapper: 'col-span-12',
             }}
@@ -387,22 +357,20 @@ const ExpenseRealizationForm = ({
           {type !== 'add' && (
             <div className='flex flex-row justify-start gap-2'>
               {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>
+                <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>
               )}
             </div>
           )}

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

@@ -18,11 +18,6 @@ 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;
   };
@@ -30,18 +25,12 @@ interface ExpenseRealizationKandangDetailExpenseProps {
 
 const ExpenseRealizationKandangDetailExpense: React.FC<
   ExpenseRealizationKandangDetailExpenseProps
-> = ({ type, formik, supplierId, location, className }) => {
+> = ({ type, formik, className }) => {
   const {
     setInputValue: setNonstockInputValue,
     options: nonstockOptions,
     isLoadingOptions: isLoadingNonstockOptions,
-  } = useSelect<Nonstock>(
-    NonstockApi.basePath,
-    'id',
-    'name',
-    'search',
-    supplierId ? { supplier_id: String(supplierId) } : undefined
-  );
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
   const nonstockChangeHandler = (
     kandangExpenseIdx: number,
@@ -93,159 +82,140 @@ const ExpenseRealizationKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {!formik.values.supplier?.value && (
+        {formik.values.realizations.length === 0 && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
-              Pilih supplier terlebih dahulu!
+              Pilih kandang terlebih dahulu!
             </p>
           </div>
         )}
 
-        {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>
-          )}
+        {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 &&
-          formik.values.realizations.map(
-            (kandangExpense, kandangExpenseIdx) => {
-              const kandangName = kandangExpense.kandang_id
-                ? formik.values.kandangs?.find(
-                    (kandang) => kandang.id === kandangExpense.kandang_id
-                  )
-                : null;
+          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>
 
-              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>
+                  <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>
 
-                      <div className='overflow-x-auto'>
-                        <table className='table'>
-                          <thead>
-                            <tr>
-                              <th>Nonstock</th>
-                              <th>Total Kuantitas</th>
-                              <th>Harga Satuan</th>
-                              <th>Catatan</th>
+                      <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>
-                          </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>
+                          )
+                        )}
+                      </tbody>
+                    </table>
                   </div>
-                )
-              );
-            }
-          )}
+                </div>
+              </div>
+            )
+          );
+        })}
       </div>
     </Card>
   );

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

@@ -1,36 +1,32 @@
 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;
@@ -43,54 +39,36 @@ 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(),
-    })
-      .nullable()
-      .optional(),
+    }).required('Kategori wajib diisi!'),
 
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
-
-    location_id: Yup.number()
-      .required('Lokasi wajib diisi!')
-      .min(1, 'Lokasi wajib diisi!')
-      .typeError('Lokasi wajib diisi!'),
+    }).required('Lokasi wajib diisi!'),
 
     transaction_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
-
     kandangs: Yup.array()
       .of(
         Yup.object({
-          id: Yup.number().optional(),
-          name: Yup.string().optional(),
+          id: Yup.number().required('Kandang wajib dipilih!'),
+          name: Yup.string().required('Kandang wajib dipilih!'),
         })
       )
-      .optional(),
+      .min(1, 'Kandang wajib dipilih!')
+      .required('Kandang wajib dipilih!'),
 
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
+    }).required('Vendor wajib diisi!'),
 
-    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(),
+    existing_documents: Yup.array().of(
+      Yup.object({
+        id: Yup.number().required(),
+        name: Yup.string().required(),
+        url: Yup.string().required(),
+      })
+    ),
 
     deleted_documents: Yup.array().of(Yup.number().required()).optional(),
 
@@ -99,24 +77,16 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     expense_nonstocks: Yup.array()
       .of(
         Yup.object({
-          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').optional(),
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
           cost_items: Yup.array()
             .of(
               Yup.object({
                 nonstock: Yup.object({
                   value: Yup.number().min(1).required(),
                   label: Yup.string().required(),
-                }).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!'),
+                }).required('Nonstock wajib diisi!'),
+                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
                 notes: Yup.string(),
               })
             )
@@ -131,16 +101,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
 export const UpdateExpenseRequestFormSchema = ExpenseRequestFormSchema;
 
 export const UploadRequestDocumentsFormSchema = Yup.object({
-  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(),
+  documents: Yup.array().of(Yup.mixed<File>().required()).required(),
 });
 
 export type ExpenseRequestFormValues = Yup.InferType<
@@ -160,14 +121,13 @@ export const getExpenseFormInitialValues = (
           value: initialValues.category,
           label: initialValues.category,
         }
-      : null,
+      : undefined,
     location: initialValues?.location
       ? {
           value: initialValues.location.id,
           label: initialValues.location.name,
         }
-      : null,
-    location_id: Number(initialValues?.location.id || 0),
+      : undefined,
     transaction_date: initialValues?.transaction_date
       ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
       : undefined,
@@ -180,16 +140,12 @@ export const getExpenseFormInitialValues = (
           value: initialValues.supplier.id,
           label: initialValues.supplier.name,
         }
-      : 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}`,
-      };
-    }),
+      : undefined,
+    existing_documents: initialValues?.documents?.map((doc) => ({
+      id: doc.id,
+      name: doc.path,
+      url: doc.path,
+    })),
     deleted_documents: [],
     documents: [],
     expense_nonstocks: initialValues?.kandangs
@@ -201,25 +157,12 @@ 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: '',
-              },
-            ],
-          },
-        ],
+      : [],
   };
 };