Merge branch 'dev/randy' into 'fix/FE/master-data-and-production'

[FIX/FE][US#33-74] Fix issue in master data and adjusmen in project flock

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

.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:
@@ -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:
@@ -156,9 +140,7 @@ deploy:dev:
     name: development
     url: https://dev-lti-erp.mbugroup.id
 
-# ==========================================================
 # ====== STAGING (Branch staging) ======
-# ==========================================================
 build:staging:
   <<: *build_template
   rules:
@@ -183,3 +165,25 @@ deploy:staging:
   environment:
     name: staging
     url: https://stg-lti-erp.mbugroup.id
+# ====== PRODUCTION ======
+# build:production:
+#   <<: *build_template
+#   rules:
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
+#   environment:
+#     name: production
+
+# deploy:production:
+#   <<: *deploy_template
+#   needs: ["build:production"]
+#   rules:
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
+#   variables:
+#     S3_BUCKET: "lti-erp.mbugroup.id"
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
+#   environment:
+#     name: production
+

package.json

@@ -15,36 +15,22 @@
     "@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",
-    "exceljs": "^4.4.0",
     "formik": "^2.4.6",
-    "html-to-image": "^1.11.13",
-    "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",
+    "react": "19.1.0",
-    "radix-ui": "^1.4.3",
-    "react": "^19.1.2",
     "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"
@@ -56,7 +42,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "daisyui": "^5.5.14",
+    "daisyui": "^5.5.8",
     "eslint": "^9",
     "eslint-config-next": "^15.5.7",
     "husky": "^9.1.7",

src/app/closing/detail/page.tsx

@@ -7,58 +7,26 @@ 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(
-    kandangId
+    closingId ? `sales-${closingId}` : null,
-      ? `sales-${closingId}-${kandangId}`
+    () => ClosingApi.getPenjualan(Number(closingId))
-      : closingId
-        ? `sales-${closingId}`
-        : null,
-    () =>
-      kandangId
-        ? ClosingApi.getPenjualanByKandang(Number(closingId), Number(kandangId))
-        : ClosingApi.getPenjualan(Number(closingId))
   );
 
   const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
-    kandangId
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
-      ? `hpp-ekspedisi-${closingId}-${kandangId}`
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
-      : closingId
-        ? `hpp-ekspedisi-${closingId}`
-        : null,
-    () =>
-      kandangId
-        ? ClosingApi.getHppEkspedisiByKandang(
-            Number(closingId),
-            Number(kandangId)
-          )
-        : ClosingApi.getHppEkspedisi(Number(closingId))
   );
 
   if (!closingId) {
@@ -76,12 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading =
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingHppEkspedisi ||
-    isLoadingProject ||
-    isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -97,12 +60,6 @@ const ClosingDetailPage = () => {
               ? hppEkspedisiData.data
               : undefined
           }
-          projectData={
-            isResponseSuccess(projectData) ? projectData.data : undefined
-          }
-          kandangData={
-            isResponseSuccess(kandangData) ? kandangData.data : undefined
-          }
         />
       )}
     </div>

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

@@ -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/detail/edit/page.tsx

@@ -38,11 +38,9 @@ const ExpenseEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.step_number !== 5 &&
-    expense.data.latest_approval.step_number !== 6 &&
     (expense.data.latest_approval.step_number === 1 ||
       expense.data.latest_approval.step_number === 2 ||
-      expense.data.latest_approval.step_number === 3 ||
+      expense.data.latest_approval.step_number === 3);
-      expense.data.latest_approval.step_number === 4);
 
   if (!isLoadingExpense && !isExpenseCanBeEdited) {
     router.back();

src/app/expense/page.tsx

@@ -2,7 +2,7 @@ import ExpensesTable from '@/components/pages/expense/ExpensesTable';
 
 const Expense = () => {
   return (
-    <section className='w-full p-4 sm:p-0'>
+    <section className='w-full p-4'>
       <ExpensesTable />
     </section>
   );

src/app/expense/realization/edit/page.tsx

@@ -38,8 +38,8 @@ const ExpenseRealizationEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    (expense.data.latest_approval.step_number === 5 ||
+    (expense.data.latest_approval.step_number === 4 ||
-      expense.data.latest_approval.step_number === 6);
+      expense.data.latest_approval.step_number === 5);
 
   if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
     router.back();

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

@@ -24,6 +24,8 @@ const FinanceDetailPage = () => {
     );
   }
 
+  console.log(finance);
+
   // if (!finance || isResponseError(finance)) {
   //   router.replace('/404');
   //   return;

src/app/globals.css

@@ -1,8 +1,6 @@
 @import 'tailwindcss';
 @plugin "daisyui";
-@import '../styles/tailwind.css';
 @import '../styles/daisyui.css';
-@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';
@@ -30,16 +28,16 @@
   --color-base-100: oklch(100% 0 0); /* #ffffff */
   --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
   --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --color-base-content: #18181b;
+  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
-  --color-success: #00d390;
+  --color-success: oklch(62.3% 0.147 149);
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: #fcb700;
+  --color-warning: oklch(82.2% 0.165 91.9);
   --color-warning-content: oklch(0% 0 0); /* #000000 */
-  --color-error: #ff3a3a;
+  --color-error: oklch(61.8% 0.203 27.8);
   --color-error-content: oklch(100% 0 0); /* #fffffff */
 
   --radius-selector: 0rem;
@@ -53,21 +51,17 @@
 }
 
 :root {
-  --color-primary: #0069e0;
+  --color-primary: #1f74bf;
 }
 
 @theme {
   --font-inter: var(--font-inter);
-  --font-roboto: var(--font-roboto);
 
   --container-sm: 40rem;
   --container-md: 48rem;
   --container-lg: 64rem;
   --container-xl: 80rem;
   --container-2xl: 96rem;
-
-  --shadow-button-soft:
-    0 3px 2px -2px var(--color-base-200), 0 4px 3px -2px var(--color-base-200);
 }
 
 html {

src/app/inventory/movement/page.tsx

@@ -2,7 +2,7 @@ import MovementTable from '@/components/pages/inventory/movement/MovementTable';
 
 const Movement = () => {
   return (
-    <section className='w-full p-4 sm:p-0'>
+    <section className='w-full p-4'>
       <MovementTable />
     </section>
   );

src/app/layout.tsx

@@ -1,9 +1,8 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter, Roboto } from 'next/font/google';
+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';
 
@@ -12,12 +11,6 @@ const inter = Inter({
   subsets: ['latin'],
 });
 
-const roboto = Roboto({
-  variable: '--font-roboto',
-  subsets: ['latin'],
-  weight: ['200', '300', '400', '500', '600', '700', '900'],
-});
-
 export const viewport: Viewport = {
   themeColor: '#1f74bf',
   colorScheme: 'light',
@@ -36,15 +29,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en' data-theme='lti'>
-      <body
+      <body className={`${inter.variable} antialiased font-inter`}>
-        className={`${inter.variable} ${roboto.variable} antialiased font-inter`}
-      >
         <RequireAuth>
           <MainDrawer>{children}</MainDrawer>
         </RequireAuth>
 
         <Toaster />
-        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

src/app/marketing/page.tsx

@@ -1,14 +1,9 @@
-import DeliveryOrderFormModal from '@/components/pages/marketing/DeliveryOrderFormModal';
 import MarketingTable from '@/components/pages/marketing/MarketingTable';
-import SalesOrderFormModal from '@/components/pages/marketing/SalesOrderFormModal';
 
 const Marketing = () => {
   return (
-    <div className='w-full'>
+    <div className='w-full p-4'>
       <MarketingTable />
-
-      <SalesOrderFormModal />
-      <DeliveryOrderFormModal />
     </div>
   );
 };

src/app/not-found.tsx

@@ -1,5 +0,0 @@
-import PageNotFound from '@/components/helper/NotFoundPage';
-
-export default function NotFound() {
-  return <PageNotFound />;
-}

src/app/page.tsx

@@ -25,9 +25,5 @@ export default function Home() {
     );
   }
 
-  return (
+  return <>Loading...</>;
-    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
-      <span className='loading loading-spinner loading-lg'></span>
-    </main>
-  );
 }

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

@@ -50,3 +50,5 @@ const ProjectFlockDetailPage = () => {
 };
 
 export default ProjectFlockDetailPage;
+ProjectFlockDetail;
+ProjectFlockDetail;

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-4 sm:p-0'>
+    <section className='w-full p-4'>
       <RecordingTable />
     </section>
   );

src/app/production/transfer-to-laying/add/page.tsx

@@ -0,0 +1,11 @@
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+const AddTransferToLaying = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <TransferToLayingForm />
+    </div>
+  );
+};
+
+export default AddTransferToLaying;

src/app/production/transfer-to-laying/detail/edit/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const TransferToLayingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    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 (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  if (
+    isResponseSuccess(transferToLaying) &&
+    transferToLaying.data.approval.step_number === 2
+  ) {
+    router.replace('/production/transfer-to-laying');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='edit'
+          initialValues={transferToLaying.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;

src/app/production/transfer-to-laying/detail/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const TransferToLayingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    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 (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;

src/app/production/transfer-to-laying/page.tsx

@@ -1,25 +1,9 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
-import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
-import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
-import RequirePermission from '@/components/helper/RequirePermission';
 
 const TransferToLaying = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4'>
       <TransferToLayingsTable />
-
-      <RequirePermission
-        permissions={[
-          'lti.production.transfer_to_laying.create',
-          'lti.production.transfer_to_laying.update',
-        ]}
-      >
-        <TransferToLayingFormModal />
-      </RequirePermission>
-
-      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
-        <TransferToLayingDetailModal />
-      </RequirePermission>
     </section>
   );
 };

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/purchase/page.tsx

@@ -2,7 +2,7 @@ import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
 
 const Purchase = () => {
   return (
-    <section className='w-full p-4 sm:p-0'>
+    <section className='w-full p-4'>
       <PurchaseTable />
     </section>
   );

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/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?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
-  variant?: Variant;
+  color?:
-  color?: Color;
+    | 'neutral'
-  size?: Size;
+    | '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/Breadcrumb.tsx

@@ -1,263 +0,0 @@
-import React, { useId } from 'react';
-import Link from 'next/link';
-import { Icon } from '@iconify/react';
-import { cn, findMenuPath } from '@/lib/helper';
-import { Size } from '@/types/theme';
-import Button from '@/components/Button';
-import { MAIN_DRAWER_LINKS } from '@/config/constant';
-
-interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  icon?: React.ReactNode;
-  isActive?: boolean;
-  isDisabled?: boolean;
-}
-
-interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
-  items: BreadcrumbItem[];
-  size?: Size;
-  maxVisibleItems?: number;
-  showEllipsisDropdown?: boolean;
-}
-
-export function buildBreadcrumbs(pathname: string): BreadcrumbItem[] {
-  const menuPath = findMenuPath(MAIN_DRAWER_LINKS, pathname);
-
-  if (!menuPath) return [];
-
-  return menuPath.map((menu, index) => {
-    const isLast = index === menuPath.length - 1;
-
-    return {
-      label: menu.text,
-      href: isLast ? menu.link : undefined,
-      isActive: isLast,
-      icon: menu.icon ? (
-        <Icon icon={menu.icon} width={16} height={16} />
-      ) : undefined,
-    };
-  });
-}
-
-const EllipsisDropdown = ({
-  hiddenItems,
-}: {
-  hiddenItems: BreadcrumbItem[];
-}) => {
-  const dropdownId = useId();
-  const anchorId = useId();
-
-  return (
-    <li>
-      {/* Ellipsis Button */}
-      <Button
-        popoverTarget={dropdownId}
-        variant='ghost'
-        color='none'
-        style={
-          {
-            anchorName: `--breadcrumb-ellipsis-anchor-${anchorId}`,
-          } as React.CSSProperties
-        }
-      >
-        <Icon icon='material-symbols:more-horiz' width={16} height={16} />
-      </Button>
-
-      {/* Dropdown Menu using popover API */}
-      <ul
-        className='dropdown menu rounded-box bg-base-100 border border-base-300 shadow-lg z-[9999] [&_a:hover]:no-underline [&_a:focus]:no-underline [&&]:no-underline [&&_a]:no-underline [&&]:hover:no-underline [&&]:flex [&&]:items-start [&&]:justify-start w-max'
-        popover='auto'
-        id={dropdownId}
-        style={
-          {
-            positionAnchor: `--breadcrumb-ellipsis-anchor-${anchorId}`,
-          } as React.CSSProperties
-        }
-      >
-        {hiddenItems.map((item, index) => {
-          const itemStyles = cn(
-            '[&]:flex [&]:items-center [&]:justify-start py-1 text-sm',
-            // Disabled state
-            item.isDisabled && 'text-base-content/40 opacity-50',
-            // Active/Last state
-            (item.isActive || item.isDisabled) && 'text-primary',
-            // Regular clickable state
-            !item.isDisabled && 'text-base-content/50'
-          );
-
-          const itemContent = (
-            <div className={itemStyles}>
-              {item.icon && (
-                <span className='inline-flex mr-2'>{item.icon}</span>
-              )}
-              {item.label}
-            </div>
-          );
-
-          return (
-            <li
-              key={`ellipsis-${index}`}
-              className='[&&]:text-left [&&]:block w-full'
-            >
-              {item.href && !item.isDisabled ? (
-                <Link
-                  href={item.href}
-                  className='block !no-underline [&&]:text-left w-full'
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {itemContent}
-                </Link>
-              ) : (
-                <div className='block !no-underline [&&]:cursor-default [&&]:hover:cursor-default [&&]:hover:bg-base-100 [&&]:text-left'>
-                  {itemContent}
-                </div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </li>
-  );
-};
-
-const Breadcrumb = ({
-  items,
-  size = 'md',
-  maxVisibleItems = 3,
-  showEllipsisDropdown = true,
-  className,
-  ...props
-}: BreadcrumbsProps) => {
-  const sizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-  };
-
-  const getItemStyles = (
-    item: BreadcrumbItem,
-    position: 'first' | 'middle' | 'last' = 'middle'
-  ) => {
-    const baseClasses = 'inline-flex items-center gap-2';
-
-    // Disabled state
-    if (item.isDisabled) {
-      return `${baseClasses} text-base-content/40 !cursor-default opacity-50 hover:!no-underline`;
-    }
-
-    // Active/Last state (no underline)
-    if (item.isActive || position === 'last') {
-      return `${baseClasses} text-primary !cursor-pointer hover:!no-underline`;
-    }
-
-    // Regular clickable state
-    return `${baseClasses} text-base-content/60`;
-  };
-
-  const renderItem = (
-    item: BreadcrumbItem,
-    position: 'first' | 'middle' | 'last' = 'middle'
-  ) => {
-    const styles = getItemStyles(item, position);
-
-    // Disabled items
-    if (item.isDisabled) {
-      return (
-        <span className={styles}>
-          {item.icon && item.icon}
-          {item.label}
-        </span>
-      );
-    }
-
-    // Active/Last items
-    if (item.isActive || position === 'last') {
-      if (item.href) {
-        return (
-          <Link href={item.href} className={styles}>
-            {item.icon && (
-              <span className='inline-flex gap-2'>{item.icon}</span>
-            )}
-            {item.label}
-          </Link>
-        );
-      }
-      return (
-        <span className={styles}>
-          {item.icon && item.icon}
-          {item.label}
-        </span>
-      );
-    }
-
-    // Regular items
-    if (item.href) {
-      return (
-        <Link href={item.href} className={styles}>
-          {item.icon && <span className='inline-flex gap-2'>{item.icon}</span>}
-          {item.label}
-        </Link>
-      );
-    }
-
-    return (
-      <span className={styles}>
-        {item.icon && item.icon}
-        {item.label}
-      </span>
-    );
-  };
-
-  const renderBreadcrumbList = () => {
-    // Show all items if within limit
-    if (items.length <= maxVisibleItems) {
-      return items.map((item, index) => {
-        const position =
-          index === 0
-            ? 'first'
-            : index === items.length - 1
-              ? 'last'
-              : 'middle';
-        return <li key={index}>{renderItem(item, position)}</li>;
-      });
-    }
-
-    // Collapsed items indexing when exceeding limit
-    const firstItem = items[0];
-    const lastItem = items[items.length - 1];
-    const visibleMiddleItems = items.slice(1, -1).slice(-(maxVisibleItems - 2));
-    const hiddenItems = items.slice(1, -1).slice(0, -(maxVisibleItems - 2));
-    const showEllipsis = showEllipsisDropdown && hiddenItems.length > 0;
-
-    return (
-      <>
-        <li>{renderItem(firstItem, 'first')}</li>
-
-        {/* Ellipsis for hidden items with dropdown */}
-        {showEllipsis && <EllipsisDropdown hiddenItems={hiddenItems} />}
-
-        {/* Middle items */}
-        {visibleMiddleItems.map((item, index) => (
-          <li key={`middle-${index}`}>{renderItem(item, 'middle')}</li>
-        ))}
-
-        <li>{renderItem(lastItem, 'last')}</li>
-      </>
-    );
-  };
-
-  return (
-    <nav
-      aria-label='Breadcrumb'
-      className={cn('breadcrumbs', sizeClasses[size], className)}
-      {...props}
-    >
-      <ul className='text-sm'>{renderBreadcrumbList()}</ul>
-    </nav>
-  );
-};
-
-export default Breadcrumb;

src/components/Button.tsx

@@ -2,12 +2,11 @@ import react from 'react';
 import Link from 'next/link';
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
-import { UrlObject } from 'url';
 
 export interface ButtonProps extends react.ComponentProps<'button'> {
   variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
   color?: Color;
-  href?: string | UrlObject;
+  href?: string;
   isLoading?: boolean;
   target?: string;
   rel?: string;

src/components/Card.tsx

@@ -22,7 +22,6 @@ export interface CardProps
   onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
-    wrapperContent?: string;
     image?: string;
     body?: string;
     title?: string;
@@ -123,10 +122,6 @@ const Card = ({
     return cn(baseClasses, 'p-6', className?.body);
   };
 
-  const getCollapsibleClasses = () => {
-    return cn('', className?.collapsible);
-  };
-
   const getTitleClasses = () => {
     const sizeClasses = {
       sm: 'text-lg',
@@ -149,19 +144,11 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
-  const getWrapperContentClasses = () => {
-    return cn('space-y-4', className?.wrapperContent);
-  };
-
   const renderCardContent = () => {
     const hasContent = children || actions || footer;
 
     const titleContent = (
-      <div
+      <div className='group flex items-center !justify-between w-full'>
-        className={
-          `group flex items-center justify-between! w-full` + getTitleClasses()
-        }
-      >
         <div className='flex-1'>
           {title && <h2 className={getTitleClasses()}>{title}</h2>}
           {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
@@ -169,7 +156,7 @@ const Card = ({
         {collapsible && (
           <button
             onClick={() => handleCollapsedChange(!isCollapsed)}
-            className={`btn btn-ghost btn-sm btn-circle` + getTitleClasses()}
+            className='btn btn-ghost btn-sm btn-circle'
             aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
           >
             <Icon
@@ -186,7 +173,7 @@ const Card = ({
     );
 
     const cardContent = (
-      <div className={getWrapperContentClasses()}>
+      <div className='space-y-4'>
         {children}
         {actions && <div className={getActionsClasses()}>{actions}</div>}
         {footer && <div className={getFooterClasses()}>{footer}</div>}
@@ -217,7 +204,6 @@ const Card = ({
               titleClassName='w-full cursor-pointer'
               contentClassName='p-0'
               fullWidth={true}
-              className={getCollapsibleClasses()}
             >
               {cardContent}
             </Collapse>

src/components/Drawer.tsx

@@ -15,7 +15,6 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
-  expandedContent?: ReactNode;
 }
 
 type DrawerClassName = {
@@ -24,7 +23,6 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
-  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -38,7 +36,6 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
-  expandedContent,
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -49,24 +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]';
-      }
-      if (className?.drawerSidebarContent) {
-        return '';
-      }
-      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') {
@@ -75,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 sm:min-w-120 sm:w-fit'
         ),
       };
     } else if (variant === 'left') {
@@ -91,7 +76,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full sm:min-w-120 sm:w-fit'
         ),
       };
     }
@@ -153,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',
+            varianClassName?.drawerSidebarContent,
-            variant === 'right' && 'flex-row'
+            className?.drawerContent
           )}
         >
-          {/* Primary Sidebar Content */}
+          {sidebarContent}
-          <div
-            className={cn(
-              varianClassName?.drawerSidebarContent,
-              className?.drawerSidebarContent,
-              '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',
-                className?.drawerExpandedContent
-              )}
-            >
-              <div className='overflow-y-auto flex-1 h-full'>
-                {expandedContent}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

src/components/FloatingActionsButton.tsx

@@ -39,8 +39,8 @@ const FloatingActionsButton = ({
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
     selectedRowIds.length > 0
-      ? 'bottom-[5%] opacity-100'
+      ? 'bottom-[10%] opacity-100'
-      : 'bottom-[-5%] opacity-0';
+      : 'bottom-[-10%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -60,7 +60,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `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'
       )}

src/components/MainDrawer.tsx

@@ -26,34 +26,29 @@ const MainDrawerContent = () => {
   };
 
   return (
-    <div className='w-full flex flex-col'>
+    <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='p-3 flex flex-row items-center gap-4 border-b border-base-content/10'>
+      <div className='flex flex-row items-center gap-4'>
-        <div className='flex flex-row items-center gap-2'>
+        <Image
-          <Image
+          src='/assets/img/lti-logo.png'
-            src='/assets/img/lti-logo.png'
+          alt='MBU Logo'
-            alt='LTI Logo'
+          width={256}
-            width={40}
+          height={256}
-            height={40}
+          className='w-full max-w-16 h-auto'
-            className='w-full max-w-10 h-auto'
+        />
-          />
 
-          <div className='font-roboto'>
+        <h1 className='text-xl font-bold'>LTI ERP</h1>
-            <h1 className='text-sm font-semibold'>LTI ERP</h1>
-            <p className='text-sm text-black/50'>Lumbung Telur Indonesia</p>
-          </div>
-        </div>
 
         <div className='grow flex flex-row justify-end sm:hidden'>
           <Button
             variant='soft'
             color='error'
             onClick={closeMainDrawerHandler}
-            className='p-1 rounded-full'
+            className='rounded-full'
           >
             <Icon
               icon='material-symbols:close-rounded'
-              width={16}
+              width={24}
-              height={16}
+              height={24}
             />
           </Button>
         </div>
@@ -72,39 +67,61 @@ const MainDrawer = ({
   const pathname = usePathname();
   const { permissionCheck } = useAuth();
 
-  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
+  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
-
-  const isPathnameNotFoundPage = formattedPathname === '/404/';
-
-  const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
     permissionCheck(permission)
   );
 
+  const getPageTitle = useCallback(() => {
+    let title = '';
+
+    const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
+      isPathActive(pathname, item.link)
+    );
+
+    const traverseMenuTitle = (menu: typeof activeMenu) => {
+      if (!menu) return;
+
+      const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
+
+      if (!title) {
+        title += menu?.text;
+      } else {
+        title += ' - ' + menu?.text;
+      }
+
+      if (!hasSubmenu || !menu.submenu) return;
+
+      const activeSubmenu = menu.submenu?.find((item) =>
+        isPathActive(pathname, item.link)
+      );
+
+      traverseMenuTitle(activeSubmenu);
+    };
+
+    traverseMenuTitle(activeMenu);
+
+    return title;
+  }, [pathname]);
+
+  const pageTitle = getPageTitle();
+
   const toggleSidebar = () => {
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
-  if (!isPermitted && !isPathnameNotFoundPage) {
+  if (!isPermitted) {
     return <PermissionNotFound />;
   }
 
-  if (isPathnameNotFoundPage) {
-    return children;
-  }
-
   return (
     <Drawer
       open={mainDrawerOpen}
       setOpen={setMainDrawerOpen}
       openOnLarge
       sidebarContent={<MainDrawerContent />}
-      className={{
-        drawerSide: 'border-r border-base-content/10',
-        drawerSidebarContent: 'min-w-[244px] lg:w-[244px]',
-      }}
     >
       <main className='w-full h-full flex flex-col'>
-        <Navbar toggleSidebar={toggleSidebar} />
+        <Navbar title={pageTitle as string} toggleSidebar={toggleSidebar} />
 
         {children}
       </main>

src/components/Modal.tsx

@@ -53,25 +53,15 @@ interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
-  onBackdropClick?: () => void;
-  position?: 'top' | 'middle' | 'bottom' | 'start' | 'end';
   className?: {
     modal?: string;
     modalBox?: string;
   };
 }
 
-const Modal = ({
+const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
-  ref,
-  children,
-  closeOnBackdrop,
-  onBackdropClick,
-  position = 'middle',
-  className,
-}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
-      onBackdropClick?.();
       ref.current?.close();
     }
   };
@@ -79,17 +69,7 @@ const Modal = ({
   return (
     <dialog
       ref={ref}
-      className={cn(
+      className={cn('modal', className?.modal)}
-        'modal',
-        {
-          'modal-top': position === 'top',
-          'modal-middle': position === 'middle',
-          'modal-bottom': position === 'bottom',
-          'modal-start': position === 'start',
-          'modal-end': position === 'end',
-        },
-        className?.modal
-      )}
       onClick={handleBackdropClick}
     >
       <div className={cn('modal-box', className?.modalBox)}>{children}</div>

src/components/Navbar.tsx

@@ -1,28 +1,26 @@
 'use client';
 
 import toast from 'react-hot-toast';
-import { usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 import { Icon } from '@iconify/react';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Breadcrumb, { buildBreadcrumbs } from '@/components/Breadcrumb';
+import Dropdown from '@/components/Dropdown';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
 import { isResponseError } from '@/lib/api-helper';
-import { useUiStore } from '@/stores/ui/ui.store';
 
 interface NavbarProps {
+  title: string;
   toggleSidebar?: () => void;
 }
 
-const Navbar = ({ toggleSidebar }: NavbarProps) => {
+const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
   const { setUser } = useAuth();
   const router = useRouter();
-  const pathname = usePathname();
-  const navbarActions = useUiStore((state) => state.navbarActions);
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
@@ -37,54 +35,42 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
   };
 
   return (
-    <div className='navbar p-3 bg-base-100 border-b border-base-content/10'>
+    <div className='navbar px-4 bg-base-100 shadow-sm'>
       <div className='flex-1'>
         <div className='flex flex-row items-center gap-4'>
           {toggleSidebar && (
-            <Button
+            <Button onClick={toggleSidebar} className='block lg:hidden'>
-              variant='ghost'
+              <Icon
-              color='none'
+                icon='material-symbols:menu-rounded'
-              onClick={toggleSidebar}
+                width={24}
-              className='block lg:hidden p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                height={24}
-            >
+              />
-              <Icon icon='heroicons:bars-3' width={20} height={20} />
             </Button>
           )}
 
-          <Breadcrumb items={buildBreadcrumbs(pathname)} />
+          <span className='font-bold text-xl text-primary'>{title}</span>
         </div>
       </div>
 
-      <div className='flex gap-2 items-center'>
+      <div className='flex gap-2'>
-        {/* Page-specific actions */}
+        <Dropdown
-        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
+          align='end'
-        <PopoverButton
+          direction='bottom'
-          tabIndex={0}
+          trigger={
-          variant='ghost'
+            <div className='btn btn-ghost btn-circle avatar'>
-          color='none'
+              <div className='w-10 rounded-full border flex justify-center items-center'>
-          popoverTarget='accountNavbar'
+                <Icon icon='uil:user' width={40} height={40} />
-          anchorName='--account-navbar'
+              </div>
-          className='p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+            </div>
+          }
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
-          <Icon icon='heroicons:user' width={20} height={20} />
+          <Menu>
-        </PopoverButton>
+            <MenuItem title='Logout' onClick={logoutClickHandler} />
-
+          </Menu>
-        <PopoverContent
+        </Dropdown>
-          id='accountNavbar'
-          anchorName='--account-navbar'
-          position='bottom-start'
-          className='rounded-xl border border-base-content/5 shadow-sm'
-        >
-          <Button
-            onClick={logoutClickHandler}
-            variant='ghost'
-            color='error'
-            className='p-3 justify-start text-sm font-semibold w-full'
-          >
-            <Icon icon='heroicons-outline:logout' width={20} height={20} />
-            Logout
-          </Button>
-        </PopoverContent>
       </div>
     </div>
   );

src/components/Table.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
-  getExpandedRowModel,
   getSortedRowModel,
   TableOptions,
   useReactTable,
@@ -16,7 +15,6 @@ import {
   OnChangeFn,
   Row,
   HeaderContext,
-  ExpandedState,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -33,16 +31,11 @@ interface TableClassNames {
   headerColumnClassName?: string;
   tableBodyClassName?: string;
   bodyRowClassName?: string;
-  selectedBodyRowClassName?: string;
   bodyColumnClassName?: string;
-  bodySubRowClassName?: (depth: number) => string;
-  selectedBodySubRowClassName?: (depth: number) => string;
-  bodySubRowColumnClassName?: (depth: number) => string;
   tableFooterClassName?: string;
   footerRowClassName?: string;
   footerColumnClassName?: string;
   paginationClassName?: string;
-  skeletonCellClassName?: string;
 }
 
 export interface TableProps<TData extends object> {
@@ -66,7 +59,6 @@ export interface TableProps<TData extends object> {
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   renderFooter?: boolean;
   withCheckbox?: boolean;
-  withPagination?: boolean;
   rowOptions?: number[];
   /**
    * Custom row renderer. Should return a complete <tr> element or null.
@@ -74,15 +66,9 @@ export interface TableProps<TData extends object> {
    * Return null to render the default row.
    */
   renderCustomRow?: (row: Row<TData>) => ReactNode | null;
-  getRowCanExpand?: (row: Row<TData>) => boolean;
-  renderSubComponent?: (props: { row: Row<TData> }) => React.ReactElement;
-  expanded?: ExpandedState;
-  getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;
 }
 
-const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
+const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
-  id: index,
-}));
 
 const emptyContentDefaultValue = (
   <div className='w-full p-5 text-center'>
@@ -100,18 +86,11 @@ export const TABLE_DEFAULT_STYLING = {
   tableHeaderClassName: '',
   headerRowClassName: '',
   headerColumnClassName:
-    'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium',
+    'px-4 py-3 border-base-content/10 text-base-content/50',
   tableBodyClassName: '',
-  bodyRowClassName:
+  bodyRowClassName: 'border-t border-base-content/10',
-    'transition-all duration-200 border-t border-base-content/10 bg-transparent',
+  bodyColumnClassName: 'px-4 py-3 text-base-content',
-  selectedBodyRowClassName: 'bg-primary/5',
+  paginationClassName: '',
-  bodyColumnClassName: 'px-4 py-3 text-base-content font-medium',
-  bodySubRowClassName: (depth: number) =>
-    'transition-all duration-200 border-t border-base-content/10 bg-transparent',
-  selectedBodySubRowClassName: (depth: number) => 'bg-primary/5',
-  bodySubRowColumnClassName: (depth: number) =>
-    'px-4 py-3 text-base-content font-medium',
-  paginationClassName: 'px-3',
   tableFooterClassName: 'font-semibold border-base-content/10',
   footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
   footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
@@ -138,13 +117,8 @@ const Table = <TData extends object>({
   enableRowSelection,
   renderFooter = false,
   withCheckbox = false,
-  withPagination = true,
   rowOptions = [10, 20, 50, 100],
   renderCustomRow,
-  getRowCanExpand,
-  renderSubComponent,
-  expanded = {},
-  getSubRows,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -177,14 +151,10 @@ const Table = <TData extends object>({
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: setPagination,
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: getRowCanExpand ?? (getSubRows ? undefined : () => false),
-    getSubRows,
     manualSorting,
     state: {
       pagination,
       globalFilter: fuzzySearchValue,
-      expanded,
     },
     filterFns: {
       fuzzy: fuzzyFilter,
@@ -252,40 +222,14 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div
+    <div className={tableClassNames.containerClassName}>
-      className={cn(
+      <div className={tableClassNames.tableWrapperClassName}>
-        TABLE_DEFAULT_STYLING.containerClassName,
+        <table className={tableClassNames.tableClassName}>
-        tableClassNames.containerClassName,
+          <thead className={tableClassNames.tableHeaderClassName}>
-        {
-          'mb-0': !withPagination,
-        }
-      )}
-    >
-      <div
-        className={cn(
-          TABLE_DEFAULT_STYLING.tableWrapperClassName,
-          tableClassNames.tableWrapperClassName
-        )}
-      >
-        <table
-          className={cn(
-            TABLE_DEFAULT_STYLING.tableClassName,
-            tableClassNames.tableClassName
-          )}
-        >
-          <thead
-            className={cn(
-              TABLE_DEFAULT_STYLING.tableHeaderClassName,
-              tableClassNames.tableHeaderClassName
-            )}
-          >
             {table.getHeaderGroups().map((headerGroup) => (
               <tr
                 key={headerGroup.id}
-                className={cn(
+                className={tableClassNames.headerRowClassName}
-                  TABLE_DEFAULT_STYLING.headerRowClassName,
-                  tableClassNames.headerRowClassName
-                )}
               >
                 {headerGroup.headers.map((header) => {
                   const columnRelativeDepth =
@@ -318,7 +262,6 @@ const Table = <TData extends object>({
                         {
                           'border-b': header.colSpan > 1,
                         },
-                        TABLE_DEFAULT_STYLING.headerColumnClassName,
                         tableClassNames.headerColumnClassName
                       )}
                     >
@@ -368,12 +311,7 @@ const Table = <TData extends object>({
             ))}
           </thead>
 
-          <tbody
+          <tbody className={tableClassNames.tableBodyClassName}>
-            className={cn(
-              TABLE_DEFAULT_STYLING.tableBodyClassName,
-              tableClassNames.tableBodyClassName
-            )}
-          >
             {table.getRowModel().rows.map((row) => {
               const customRowContent = renderCustomRow?.(row);
 
@@ -382,96 +320,36 @@ const Table = <TData extends object>({
               }
 
               return (
-                <Fragment key={row.id}>
+                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
-                  <tr
+                  {row.getVisibleCells().map((cell) => (
-                    data-depth={row.depth}
+                    <td
-                    className={cn(
+                      key={cell.id}
-                      row.depth > 0
+                      className={cn(
-                        ? tableClassNames.bodySubRowClassName(row.depth)
+                        { 'first:w-9 first:pr-0': withCheckbox },
-                        : tableClassNames.bodyRowClassName,
+                        tableClassNames.bodyColumnClassName
-                      {
-                        [tableClassNames.selectedBodyRowClassName!]:
-                          row.getIsSelected() && row.depth === 0,
-                        [tableClassNames.selectedBodySubRowClassName(
-                          row.depth
-                        )!]: row.getIsSelected() && row.depth > 0,
-                      }
-                    )}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <td
-                        key={cell.id}
-                        className={cn(
-                          { 'first:w-9 first:pr-0': withCheckbox },
-                          TABLE_DEFAULT_STYLING.bodyColumnClassName,
-                          row.depth > 0
-                            ? tableClassNames.bodySubRowColumnClassName(
-                                row.depth
-                              )
-                            : tableClassNames.bodyColumnClassName
-                        )}
-                      >
-                        {!isLoading &&
-                          flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-
-                        {isLoading && (
-                          <div
-                            className={cn(
-                              'skeleton w-full h-4',
-                              tableClassNames.skeletonCellClassName
-                            )}
-                          />
-                        )}
-                      </td>
-                    ))}
-                  </tr>
-
-                  {row.getIsExpanded() && (
-                    <>
-                      {renderSubComponent && (
-                        <tr
-                          className={cn(
-                            TABLE_DEFAULT_STYLING.bodySubRowClassName(1),
-                            tableClassNames.bodySubRowClassName(1),
-                            {
-                              [tableClassNames.selectedBodySubRowClassName(1)]:
-                                row.getIsSelected(),
-                            }
-                          )}
-                        >
-                          <td colSpan={row.getVisibleCells().length}>
-                            {renderSubComponent({ row })}
-                          </td>
-                        </tr>
                       )}
-                    </>
+                    >
-                  )}
+                      {!isLoading &&
-                </Fragment>
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+
+                      {isLoading && <div className='skeleton w-full h-4' />}
+                    </td>
+                  ))}
+                </tr>
               );
             })}
           </tbody>
-          <tfoot
+          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
-            className={cn(
-              TABLE_DEFAULT_STYLING.tableFooterClassName,
-              tableClassNames.tableFooterClassName
-            )}
-          >
             {renderFooter && (
-              <tr
+              <tr className={cn(tableClassNames.footerRowClassName)}>
-                className={cn(
-                  TABLE_DEFAULT_STYLING.footerRowClassName,
-                  tableClassNames.footerRowClassName
-                )}
-              >
                 {table.getAllLeafColumns().map((column) => (
                   <td
                     key={column.id}
                     className={cn(
                       { 'first:w-9 first:pr-0': withCheckbox },
-                      TABLE_DEFAULT_STYLING.footerColumnClassName,
                       tableClassNames.footerColumnClassName
                     )}
                   >
@@ -493,33 +371,24 @@ const Table = <TData extends object>({
         !isLoading &&
         emptyContent}
 
-      {data.length > 0 &&
+      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-        table.getRowModel().rows.length > 0 &&
+        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
-        !isLoading &&
+          <Pagination
-        withPagination && (
+            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
-          <div
+            itemsPerPage={table.getState().pagination.pageSize}
-            className={cn(
+            currentPage={
-              'mt-5',
+              isServerSideTable
-              TABLE_DEFAULT_STYLING.paginationClassName,
+                ? page
-              tableClassNames.paginationClassName
+                : table.getState().pagination.pageIndex + 1
-            )}
+            }
-          >
+            onPrevPage={prevPageClickHandler}
-            <Pagination
+            onNextPage={nextPageClickHandler}
-              totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+            onPageChange={pageChangeHandler}
-              itemsPerPage={table.getState().pagination.pageSize}
+            rowOptions={rowOptions}
-              currentPage={
+            onRowChange={onPageSizeChange}
-                isServerSideTable
+          />
-                  ? page
+        </div>
-                  : table.getState().pagination.pageIndex + 1
+      )}
-              }
-              onPrevPage={prevPageClickHandler}
-              onNextPage={nextPageClickHandler}
-              onPageChange={pageChangeHandler}
-              rowOptions={rowOptions}
-              onRowChange={onPageSizeChange}
-            />
-          </div>
-        )}
     </div>
   );
 };

src/components/Tabs.tsx

@@ -25,10 +25,8 @@ export interface TabsProps
         wrapper?: string;
         tab?: string;
         content?: string;
-        tabHeaderWrapper?: string;
       };
   onTabChange?: (tabId: string) => void;
-  sideContent?: ReactNode;
 }
 
 const Tabs = ({
@@ -40,7 +38,6 @@ const Tabs = ({
   activeTabId: controlledActiveId,
   className,
   onTabChange,
-  sideContent,
   ...props
 }: TabsProps) => {
   // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
@@ -62,7 +59,6 @@ const Tabs = ({
     wrapper: wrapperClassName,
     tab: tabClassName,
     content: contentClassName,
-    tabHeaderWrapper: tabHeaderWrapperClassName,
   } = typeof className === 'object'
     ? className
     : { wrapper: className, tab: undefined };
@@ -106,10 +102,6 @@ const Tabs = ({
       tabClassName
     );
 
-  const getSideContentClasses = () => {
-    return cn('flex flex-row', tabHeaderWrapperClassName);
-  };
-
   const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
 
   return (
@@ -120,21 +112,18 @@ const Tabs = ({
         typeof className === 'string' ? className : containerClassName
       )}
     >
-      <div className={getSideContentClasses()}>
+      <div role='tablist' className={getTabsClasses()}>
-        <div role='tablist' className={getTabsClasses()}>
+        {tabs.map(({ id, label, disabled }) => (
-          {tabs.map(({ id, label, disabled }) => (
+          <button
-            <button
+            key={id}
-              key={id}
+            role='tab'
-              role='tab'
+            className={getTabClasses(id === activeTabId, disabled)}
-              className={getTabClasses(id === activeTabId, disabled)}
+            onClick={() => !disabled && handleTabChange(id)}
-              onClick={() => !disabled && handleTabChange(id)}
+            disabled={disabled}
-              disabled={disabled}
+          >
-            >
+            {label}
-              {label}
+          </button>
-            </button>
+        ))}
-          ))}
-        </div>
-        {sideContent && sideContent}
       </div>
 
       {activeContent && (

src/components/helper/ApprovalStepsV2.tsx

@@ -1,203 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-
-import { Icon } from '@iconify/react';
-import { BaseApproval } from '@/types/api/api-general';
-import Button from '@/components/Button';
-
-import { cn, formatDate } from '@/lib/helper';
-
-interface ApprovalStepsV2Props {
-  approvals?: BaseApproval[];
-  steps: {
-    step_number: number;
-    step_name: string;
-  }[];
-  maxVisibleSteps?: number;
-  className?: {
-    wrapper?: string;
-    stepsWrapper?: string;
-    stepsContainer?: string;
-  };
-}
-
-const ApprovalStepsV2 = ({
-  approvals,
-  steps,
-  maxVisibleSteps = 2,
-  className,
-}: ApprovalStepsV2Props) => {
-  const [isSeeAll, setIsSeeAll] = useState(false);
-  const [formattedApprovals, setFormattedApprovals] = useState<
-    (BaseApproval & { isActive: boolean })[]
-  >([]);
-
-  const latestApprovalStepNumber =
-    approvals?.[approvals.length - 1].step_number ?? 0;
-
-  const lastStepNumber = steps[steps.length - 1].step_number;
-
-  const isLatestApprovalStepNumberLessThanLastStepNumber =
-    latestApprovalStepNumber < lastStepNumber;
-
-  const slicedFormattedApprovals = useMemo(() => {
-    return formattedApprovals.slice(0, isSeeAll ? undefined : maxVisibleSteps);
-  }, [formattedApprovals, isSeeAll]);
-
-  const seeMoreClickHandler = () => {
-    setIsSeeAll((prevVal) => !prevVal);
-  };
-
-  useEffect(() => {
-    if (approvals) {
-      const tempFormattedApprovals: (BaseApproval & { isActive: boolean })[] =
-        [];
-
-      approvals.forEach((approval) => {
-        tempFormattedApprovals.push({
-          ...approval,
-          isActive: true,
-        });
-      });
-
-      if (isLatestApprovalStepNumberLessThanLastStepNumber) {
-        const latestApprovalStepNumberIndexInSteps = steps.findIndex(
-          (step) => step.step_number === latestApprovalStepNumber
-        );
-
-        const slicedSteps = steps.slice(
-          latestApprovalStepNumberIndexInSteps + 1
-        );
-
-        slicedSteps.forEach((step) => {
-          tempFormattedApprovals.push({
-            action: 'APPROVED',
-            action_at: new Date().toISOString(),
-            action_by: {
-              id: 0,
-              id_user: 0,
-              email: '',
-              name: '',
-            },
-            step_name: step.step_name,
-            step_number: step.step_number,
-            isActive: false,
-          });
-        });
-      }
-
-      setFormattedApprovals(tempFormattedApprovals);
-    }
-  }, [approvals]);
-
-  return (
-    <div
-      className={cn(
-        'w-full p-4 flex flex-col border-b border-base-content/10',
-        className?.wrapper
-      )}
-    >
-      <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-        Progress Details
-      </h4>
-
-      <div
-        className={cn(
-          'mt-6 mb-8 flex flex-col gap-10',
-          className?.stepsWrapper
-        )}
-      >
-        {slicedFormattedApprovals.map((approval, idx) => {
-          const isApprovalActionCreated = approval.action === 'CREATED';
-          const isApprovalActionUpdated = approval.action === 'UPDATED';
-          const isApprovalActionRejected = approval.action === 'REJECTED';
-          const isApprovalActionApproved = approval.action === 'APPROVED';
-
-          const approvalIcon =
-            isApprovalActionCreated || isApprovalActionUpdated
-              ? 'heroicons:clock-solid'
-              : isApprovalActionRejected
-                ? 'heroicons:x-circle-solid'
-                : isApprovalActionApproved
-                  ? 'heroicons:check-badge-solid'
-                  : 'heroicons:check-badge-solid';
-
-          return (
-            <div key={idx} className='w-full flex flex-row items-stretch gap-3'>
-              <div className='w-fit self-stretch relative'>
-                <div className='w-fit h-fit flex flex-col items-start'>
-                  <Icon
-                    icon={approvalIcon}
-                    width={24}
-                    height={24}
-                    className={cn({
-                      'text-warning':
-                        isApprovalActionCreated || isApprovalActionUpdated,
-                      'text-error': isApprovalActionRejected,
-                      'text-success': isApprovalActionApproved,
-                      'text-base-content/20': !approval.isActive,
-                    })}
-                  />
-
-                  {idx < formattedApprovals.length - 1 && (
-                    <div className='absolute top-6 left-1/2 -translate-x-1/2 w-0 min-h-full h-[calc(100%)] mx-auto my-2 border border-dashed border-base-content/10' />
-                  )}
-                </div>
-              </div>
-
-              <div
-                className={cn('w-full flex flex-col gap-1 text-base-content', {
-                  'text-base-content/20': !approval.isActive,
-                })}
-              >
-                <div className='flex flex-col'>
-                  <span className='text-xs'>{approval.step_name}</span>
-                  <span className='text-sm font-semibold'>
-                    {(isApprovalActionCreated || isApprovalActionUpdated) &&
-                      'Diajukan oleh '}
-                    {isApprovalActionRejected && 'Ditolak oleh '}
-                    {isApprovalActionApproved && 'Disetujui oleh '}
-                    {approval.isActive ? approval.action_by.name : '...'}
-                  </span>
-                </div>
-
-                {approval.isActive && (
-                  <p className='w-full max-w-60 p-3 bg-base-content/5 rounded-xl text-xs text-base-content/50'>
-                    Created at :{' '}
-                    {formatDate(approval.action_at, 'DD-MM-YYYY, HH:mm')}
-                    <br />
-                    Notes : {approval.notes ?? '-'}
-                  </p>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {formattedApprovals.length > maxVisibleSteps && (
-        <Button
-          variant='outline'
-          color='none'
-          onClick={seeMoreClickHandler}
-          className={cn(
-            'px-3 py-2 gap-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-lg transition-all'
-          )}
-        >
-          <Icon
-            icon='heroicons-outline:chevron-double-down'
-            width={20}
-            height={20}
-            className={cn('transition-all duration-300', {
-              '-rotate-180': isSeeAll,
-            })}
-          />
-          See {isSeeAll ? 'Less' : 'More'}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default ApprovalStepsV2;

src/components/helper/ButtonFilter.tsx

@@ -1,48 +0,0 @@
-import Button, { ButtonProps } from '@/components/Button';
-import { getFilledFormikValuesCount } from '@/lib/formik-helper';
-import { cn } from '@/lib/helper';
-import { Icon } from '@iconify/react';
-import { FormikValues } from 'formik';
-
-export type ButtonFilterProps = ButtonProps & {
-  values: FormikValues;
-  onClick: () => void;
-};
-
-// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
-
-const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
-  return (
-    <Button
-      {...props}
-      onClick={onClick}
-      variant='outline'
-      color='none'
-      className={cn(
-        'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
-        'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-        getFilledFormikValuesCount(values) > 0
-          ? 'border-primary-gradient text-primary rounded-lg!'
-          : 'rounded-lg',
-        props.className
-      )}
-    >
-      <Icon
-        icon='heroicons:funnel'
-        width={20}
-        height={20}
-        className={
-          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
-        }
-      />
-      Filter
-      {getFilledFormikValuesCount(values) > 0 && (
-        <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-          {getFilledFormikValuesCount(values)}
-        </span>
-      )}
-    </Button>
-  );
-};
-
-export default ButtonFilter;

src/components/helper/NotFoundPage.tsx

@@ -1,17 +0,0 @@
-import Button from '@/components/Button';
-
-const PageNotFound = () => {
-  return (
-    <div className='w-full h-full flex-1 flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>Halaman Tidak Ditemukan</h2>
-      <p className='text-gray-600 text-center'>
-        Halaman atau data yang anda cari tidak ditemukan.
-      </p>
-      <Button href='/dashboard' className='text-base-100'>
-        Kembali ke Dashboard
-      </Button>
-    </div>
-  );
-};
-
-export default PageNotFound;

src/components/helper/PermissionNotFound.tsx

@@ -1,17 +1,10 @@
-import Button from '@/components/Button';
-
 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'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
-        Hak Akses Tidak Ditemukan
-      </h2>
       <p className='text-gray-600 text-center'>
-        Anda tidak memiliki hak akses untuk mengakses halaman ini.
+        You do not have permission to access this page.
       </p>
-      <Button href='/dashboard' className='text-base-100'>
-        Kembali ke Dashboard
-      </Button>
     </div>
   );
 };

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';
@@ -29,8 +28,8 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
 
-    // refresh every 12 minutes
+    // refresh every 13 minutes
-    refreshInterval: 12 * 60 * 1000,
+    refreshInterval: 13 * 60 * 1000,
   });
 
   useEffect(() => {
@@ -56,27 +55,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();
-    };
-
-    if (user) {
-      refreshUserSession();
-    }
-  }, [user]);
-
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||
     (!userResponse && !userErrorResponse)
@@ -88,7 +66,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>
@@ -96,7 +74,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/StatusBadge.tsx

@@ -1,60 +0,0 @@
-import Badge from '@/components/Badge';
-import { cn } from '@/lib/helper';
-import { Color } from '@/types/theme';
-
-interface StatusBadgeProps {
-  color: Color;
-  text: string;
-  className?: {
-    badge?: string;
-    status?: string;
-  };
-}
-
-const StatusBadge = ({
-  color = 'neutral',
-  text,
-  className,
-}: StatusBadgeProps) => {
-  return (
-    <Badge
-      variant='soft'
-      className={{
-        badge: cn(
-          'px-2 py-1 w-full flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content',
-          {
-            'bg-base-content/5': color === 'neutral',
-            'bg-success/30': color === 'success',
-            'bg-error/20': color === 'error',
-            'bg-primary/20': color === 'info',
-            'bg-[#FF9A20]/12': color === 'warning',
-            'bg-[#1166EF]/12': color === 'primary',
-          },
-          className?.badge
-        ),
-        status: cn(className?.status),
-      }}
-      color={color}
-    >
-      <svg
-        height='12'
-        width='12'
-        xmlns='http://www.w3.org/2000/svg'
-        className={cn({
-          'text-base-content/10': color === 'neutral',
-          'text-[#008000]': color === 'success',
-          'text-error': color === 'error',
-          'text-primary': color === 'info',
-          'text-[#FF9A20]': color === 'warning',
-          'text-[#1166EF]': color === 'primary',
-        })}
-      >
-        <circle r='6' cx='6' cy='6' fill='currentColor' />
-      </svg>
-
-      {text}
-    </Badge>
-  );
-};
-
-export default StatusBadge;

src/components/helper/drawer/DrawerHeader.tsx

@@ -58,7 +58,6 @@ const DrawerHeader = ({
     if (leftIconOnClick) {
       return (
         <button
-          type='button'
           onClick={leftIconOnClick}
           className='hover:text-gray-400 bg-transparent border-none p-0'
         >
@@ -73,12 +72,12 @@ const DrawerHeader = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
+        'flex flex-row justify-between items-center px-4 pt-4',
         className
       )}
     >
       {/* Left Side */}
-      <div className='flex flex-row h-full gap-3 items-center'>
+      <div className='flex flex-row h-full gap-2 items-center'>
         {renderLeftIcon()}
 
         {showDivider && subtitle && (
@@ -86,12 +85,7 @@ const DrawerHeader = ({
         )}
 
         {subtitle && (
-          <div
+          <div className={cn('text-sm text-neutral', subtitleClassName)}>
-            className={cn(
-              'text-sm font-medium text-base-content/50',
-              subtitleClassName
-            )}
-          >
             {subtitle}
           </div>
         )}

src/components/helper/form/FormErrors.tsx

@@ -1,84 +0,0 @@
-import Alert from '@/components/Alert';
-import Button from '@/components/Button';
-import { cn } from '@/lib/helper';
-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,
-  className,
-  onClose,
-  title,
-}: {
-  formErrorList: string[];
-  className?: {
-    alert?: string;
-    button?: string;
-    headerWrapper?: string;
-    headerIcon?: string;
-    headerText?: string;
-    titleWrapper?: string;
-    ul?: string;
-    li?: string;
-  };
-  onClose: () => void;
-  title?: string;
-}) => {
-  if (formErrorList.length === 0) return null;
-
-  return (
-    <Alert
-      color='error'
-      className={cn(
-        'w-full flex flex-col gap-2 px-3 rounded-lg',
-        className?.alert
-      )}
-    >
-      <div
-        className={cn(
-          'flex justify-between items-center gap-2 w-full',
-          className?.headerWrapper
-        )}
-      >
-        <div className={cn('flex items-center gap-2', className?.titleWrapper)}>
-          <Icon
-            icon='material-symbols:error-outline'
-            className={cn(className?.headerIcon)}
-            width={20}
-            height={20}
-          />
-          <span className={cn('font-semibold text-sm', className?.headerText)}>
-            {title || `Terdapat ${formErrorList.length} error pada form:`}
-          </span>
-        </div>
-        <Button
-          onClick={onClose}
-          variant='link'
-          className={cn('ml-auto p-0 w-fit text-white', className?.button)}
-          color='none'
-        >
-          <Icon icon='material-symbols:close' width={20} height={20} />
-        </Button>
-      </div>
-      <ul
-        className={cn(
-          'list-disc list-inside pl-4 space-y-1.5 w-full',
-          className?.ul
-        )}
-      >
-        {formErrorList.map((error, index) => (
-          <li key={index} className={cn('text-sm', className?.li)}>
-            {error}
-          </li>
-        ))}
-      </ul>
-    </Alert>
-  );
-};
-
-export default AlertErrorList;

src/components/helper/pdf/table/PdfTable.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { View, StyleSheet } from '@react-pdf/renderer';
-import { PdfThead, PdfColumn } from './PdfThead';
-import { PdfTbody, PdfTbodyCell } from './PdfTbody';
-import { PdfTfoot, PdfTfootCell } from './PdfTfoot';
-
-const styles = StyleSheet.create({
-  table: {
-    borderWidth: 1,
-    borderColor: '#000000',
-    marginBottom: 15,
-  },
-});
-
-interface PdfTableProps {
-  columns: PdfColumn[];
-  data: PdfTbodyCell[][];
-  footer?: PdfTfootCell[];
-  footerLabel?: string;
-  firstRow?: {
-    valueKey: string;
-    value: number;
-    align?: 'right';
-    color?: string;
-  };
-}
-
-export const PdfTable = ({
-  columns,
-  data,
-  footer,
-  footerLabel = 'Total',
-  firstRow,
-}: PdfTableProps) => {
-  return (
-    <View style={styles.table}>
-      <PdfThead columns={columns} />
-      <PdfTbody columns={columns} rows={data} firstRow={firstRow} />
-      {footer && footer.length > 0 && (
-        <PdfTfoot columns={columns} cells={footer} label={footerLabel} />
-      )}
-    </View>
-  );
-};

src/components/helper/pdf/table/PdfTbody.tsx

@@ -1,219 +0,0 @@
-'use client';
-
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-
-export interface PdfColumn {
-  key: string;
-  header: string;
-  flex: number;
-  align?: 'left' | 'center' | 'right';
-}
-
-export interface PdfTbodyCell {
-  key: string;
-  value: string | number | React.ReactNode;
-  align?: 'left' | 'center' | 'right';
-  color?: string;
-  formatAs?: 'text' | 'date' | 'currency' | 'number';
-  formatDate?: string;
-}
-
-const styles = StyleSheet.create({
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableBorderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'left',
-  },
-  tableCellLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 7,
-    borderRightWidth: 0,
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellCenter: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-  tableCellNo: {
-    flex: 0.5,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-});
-
-interface PdfTbodyProps {
-  columns: PdfColumn[];
-  rows: PdfTbodyCell[][];
-  firstRow?: {
-    valueKey: string;
-    value: number;
-    align?: 'right';
-    color?: string;
-  };
-  formatDate?: (date: string, format: string) => string;
-  formatNumber?: (num: number) => string;
-  formatCurrency?: (num: number) => string;
-}
-
-export const PdfTbody = ({ columns, rows, firstRow }: PdfTbodyProps) => {
-  return (
-    <>
-      {/* First Row */}
-      {firstRow && (
-        <View style={[styles.tableRow, styles.tableBorderBottom]}>
-          {columns.map((column, index) => {
-            const isLastColumn = index === columns.length - 1;
-            const isfirstRowColumn = column.key === firstRow.valueKey;
-            const align = column.align || 'center';
-
-            const cellStyle =
-              column.key === 'no'
-                ? [styles.tableCellNo, { flex: column.flex }]
-                : isfirstRowColumn
-                  ? [
-                      styles.tableCellRight,
-                      {
-                        flex: column.flex,
-                        color: firstRow.color || 'black',
-                        borderRightWidth: isLastColumn ? 0 : 1,
-                      },
-                    ]
-                  : align === 'right'
-                    ? [
-                        styles.tableCellRight,
-                        {
-                          flex: column.flex,
-                          borderRightWidth: isLastColumn ? 0 : 1,
-                        },
-                      ]
-                    : align === 'center'
-                      ? [
-                          styles.tableCellCenter,
-                          {
-                            flex: column.flex,
-                            borderRightWidth: isLastColumn ? 0 : 1,
-                          },
-                        ]
-                      : isLastColumn
-                        ? [
-                            styles.tableCellLast,
-                            {
-                              flex: column.flex,
-                              borderRightWidth: 0,
-                            },
-                          ]
-                        : [styles.tableCell, { flex: column.flex }];
-
-            return (
-              <View key={column.key} style={cellStyle}>
-                <Text>{isfirstRowColumn ? firstRow.value : ''}</Text>
-              </View>
-            );
-          })}
-        </View>
-      )}
-
-      {/* Data Rows */}
-      {rows.map((row, rowIndex) => {
-        const isLastRow = rowIndex === rows.length - 1;
-
-        return (
-          <View
-            key={rowIndex}
-            style={[
-              styles.tableRow,
-              !isLastRow ? styles.tableBorderBottom : {},
-            ]}
-          >
-            {columns.map((column, colIndex) => {
-              const cell = row.find((c) => c.key === column.key);
-              const isLastColumn = colIndex === columns.length - 1;
-              const align = cell?.align || column.align || 'center';
-
-              const cellStyle =
-                column.key === 'no'
-                  ? [styles.tableCellNo, { flex: column.flex }]
-                  : align === 'right'
-                    ? [
-                        styles.tableCellRight,
-                        {
-                          flex: column.flex,
-                          color: cell?.color || 'black',
-                          borderRightWidth: isLastColumn ? 0 : 1,
-                        },
-                      ]
-                    : align === 'center'
-                      ? [
-                          styles.tableCellCenter,
-                          {
-                            flex: column.flex,
-                            color: cell?.color || 'black',
-                            borderRightWidth: isLastColumn ? 0 : 1,
-                          },
-                        ]
-                      : isLastColumn
-                        ? [
-                            styles.tableCellLast,
-                            { flex: column.flex, borderRightWidth: 0 },
-                          ]
-                        : [
-                            styles.tableCell,
-                            {
-                              flex: column.flex,
-                              color: cell?.color || 'black',
-                              borderRightWidth: isLastColumn ? 0 : 1,
-                            },
-                          ];
-
-              return (
-                <View key={column.key} style={cellStyle}>
-                  {cell?.value !== undefined &&
-                  cell?.value !== null &&
-                  cell?.value !== '' ? (
-                    typeof cell.value === 'object' ? (
-                      cell.value
-                    ) : (
-                      <Text>{String(cell.value)}</Text>
-                    )
-                  ) : (
-                    <Text>-</Text>
-                  )}
-                </View>
-              );
-            })}
-          </View>
-        );
-      })}
-    </>
-  );
-};

src/components/helper/pdf/table/PdfTfoot.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-
-export interface PdfColumn {
-  key: string;
-  header: string;
-  flex: number;
-  align?: 'left' | 'center' | 'right';
-}
-
-export interface PdfTfootCell {
-  key: string;
-  value: string | number;
-  align?: 'left' | 'center' | 'right';
-  flex?: number;
-  color?: string;
-}
-
-const styles = StyleSheet.create({
-  tableRow: {
-    flexDirection: 'row',
-  },
-  summaryRow: {
-    backgroundColor: '#F0F0F0',
-    fontWeight: 'bold',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'left',
-  },
-  tableCellLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 7,
-    borderRightWidth: 0,
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellCenter: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-  tableCellNo: {
-    flex: 0.5,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-});
-
-interface PdfTfootProps {
-  columns: PdfColumn[];
-  cells: PdfTfootCell[];
-  label?: string;
-}
-
-export const PdfTfoot = ({
-  columns,
-  cells,
-  label = 'Total',
-}: PdfTfootProps) => {
-  return (
-    <View style={[styles.tableRow, styles.summaryRow]}>
-      {columns.map((column, index) => {
-        const isLastColumn = index === columns.length - 1;
-        const cellData = cells.find((c) => c.key === column.key);
-
-        const cellStyle =
-          column.key === 'no'
-            ? [
-                styles.tableCellNo,
-                { flex: column.flex, borderRightWidth: isLastColumn ? 0 : 1 },
-              ]
-            : cellData?.align === 'right'
-              ? [
-                  styles.tableCellRight,
-                  {
-                    flex: column.flex,
-                    color: cellData?.color || 'black',
-                    borderRightWidth: isLastColumn ? 0 : 1,
-                  },
-                ]
-              : cellData?.align === 'center'
-                ? [
-                    styles.tableCellCenter,
-                    {
-                      flex: column.flex,
-                      color: cellData?.color || 'black',
-                      borderRightWidth: isLastColumn ? 0 : 1,
-                    },
-                  ]
-                : isLastColumn
-                  ? [styles.tableCellLast, { flex: column.flex }]
-                  : [
-                      styles.tableCell,
-                      {
-                        flex: column.flex,
-                        color: cellData?.color || 'black',
-                      },
-                    ];
-
-        return (
-          <View key={column.key} style={cellStyle}>
-            <Text>{column.key === 'no' ? label : cellData?.value || ''}</Text>
-          </View>
-        );
-      })}
-    </View>
-  );
-};

src/components/helper/pdf/table/PdfThead.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-
-export interface PdfColumn {
-  key: string;
-  header: string;
-  flex: number;
-  align?: 'left' | 'center' | 'right';
-}
-
-const styles = StyleSheet.create({
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableHeader: {
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellHeader: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-    textAlign: 'center',
-  },
-  tableCellHeaderRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    textAlign: 'right',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-  },
-});
-
-interface PdfTheadProps {
-  columns: PdfColumn[];
-}
-
-export const PdfThead = ({ columns }: PdfTheadProps) => {
-  return (
-    <View style={[styles.tableRow, styles.tableHeader]}>
-      {columns.map((column, index) => {
-        const align = column.align || 'center';
-        const isLastColumn = index === columns.length - 1;
-
-        const cellStyle =
-          align === 'right'
-            ? [
-                styles.tableCellHeaderRight,
-                {
-                  flex: column.flex,
-                  textAlign: 'right' as const,
-                  borderRightWidth: isLastColumn ? 0 : 1,
-                },
-              ]
-            : [
-                styles.tableCellHeader,
-                {
-                  flex: column.flex,
-                  textAlign: align as 'left' | 'center' | 'right',
-                  borderRightWidth: isLastColumn ? 0 : 1,
-                },
-              ];
-
-        return (
-          <View key={column.key} style={cellStyle}>
-            <Text>{column.header}</Text>
-          </View>
-        );
-      })}
-    </View>
-  );
-};

src/components/helper/pdf/table/index.ts

@@ -1,7 +0,0 @@
-export { PdfTable } from './PdfTable';
-export { PdfThead } from './PdfThead';
-export { PdfTbody } from './PdfTbody';
-export { PdfTfoot } from './PdfTfoot';
-export type { PdfColumn } from './PdfThead';
-export type { PdfTbodyCell } from './PdfTbody';
-export type { PdfTfootCell } from './PdfTfoot';

src/components/helper/skeleton/DataStateSkeleton.tsx

@@ -1,32 +0,0 @@
-import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
-import { Icon } from '@iconify/react';
-
-const DataStateSkeleton = ({
-  icon,
-  title,
-  description,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-}) => {
-  return (
-    <div className='flex flex-col items-center justify-center'>
-      <IconSkeleton
-        className={{
-          outer: 'mb-2.25',
-        }}
-      >
-        {icon}
-      </IconSkeleton>
-      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
-        {title}
-      </h3>
-      <p className='text-base-content/50 text-xs text-center max-w-xs'>
-        {description}
-      </p>
-    </div>
-  );
-};
-
-export default DataStateSkeleton;

src/components/helper/skeleton/IconSkeleton.tsx

@@ -1,33 +0,0 @@
-import { cn } from '@/lib/helper';
-import { ReactNode } from 'react';
-
-const IconSkeleton = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: {
-    outer?: string;
-    inner?: string;
-  };
-}) => {
-  return (
-    <div
-      className={cn(
-        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
-        className?.outer
-      )}
-    >
-      <div
-        className={cn(
-          'w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]',
-          className?.inner
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default IconSkeleton;

src/components/input/DateInput.tsx

@@ -113,15 +113,7 @@ const DateInput = ({
   };
 
   const handleSelectSingle = (selectedDate?: Date) => {
-    if (!selectedDate) {
+    if (!selectedDate) return;
-      setSelected(undefined);
-      setDisplayValue('');
-      const syntheticEvent = {
-        target: { name, value: '' },
-      } as unknown as React.ChangeEvent<HTMLInputElement>;
-      onChange?.(syntheticEvent);
-      return;
-    }
     if (minDate && selectedDate < minDate) {
       setInternalError(`Tanggal tidak boleh sebelum ${min}`);
       return;
@@ -144,15 +136,7 @@ const DateInput = ({
   };
 
   const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
-    if (!range) {
+    if (!range) return;
-      setSelectedRange({});
-      setDisplayValue('');
-      const syntheticEvent = {
-        target: { name, value: { from: '', to: '' } },
-      } as unknown as React.ChangeEvent<HTMLInputElement>;
-      onChange?.(syntheticEvent);
-      return;
-    }
     setSelectedRange(range);
 
     const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
@@ -204,12 +188,17 @@ const DateInput = ({
   const finalErrorMessage = internalError || externalErrorMessage;
 
   return (
-    <div className={cn('w-full flex flex-col text-start', className?.wrapper)}>
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
       {label && (
         <label
           htmlFor={name}
           className={cn(
-            'w-full py-2 text-xs font-semibold leading-5',
+            'w-full text-sm font-normal leading-5',
             { 'text-error': finalIsError },
             className?.label
           )}
@@ -226,7 +215,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-fit bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
+          'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
           {
             'border-error': finalIsError,
             'border-success': externalValid && !finalIsError,
@@ -245,10 +234,7 @@ const DateInput = ({
           disabled={disabled}
           readOnly // ✅ tidak bisa diketik manual
           className={cn(
-            'grow bg-transparent cursor-pointer focus:outline-none text-sm leading-tight',
+            'grow bg-transparent cursor-pointer focus:outline-none',
-            {
-              'cursor-not-allowed': readOnly,
-            },
             className?.input
           )}
         />
@@ -259,10 +245,10 @@ const DateInput = ({
           </div>
         )}
         <Icon
-          icon='heroicons:calendar-date-range'
+          icon='uil:calendar'
-          width={15}
+          width={24}
-          height={15}
+          height={24}
-          className='cursor-pointer text-base-content/20'
+          className='cursor-pointer text-dark'
           onClick={(e) =>
             handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
           }
@@ -270,17 +256,17 @@ const DateInput = ({
       </div>
 
       {!finalIsError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
       {finalIsError && finalErrorMessage && (
-        <p className='w-full mt-1.5 text-xs text-error'>{finalErrorMessage}</p>
+        <p className='w-full text-sm text-error'>{finalErrorMessage}</p>
       )}
 
       <Modal
         ref={calendarModal.ref}
         className={{
           modal: 'rounded',
-          modalBox: `max-w-max flex flex-col`,
+          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
         }}
         closeOnBackdrop
       >
@@ -296,11 +282,7 @@ const DateInput = ({
             endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
             selected={selectedRange as DateRange}
             onSelect={handleSelectRange}
-            footer={
+            footer={<div className='text-center mt-3'>{displayValue}</div>}
-              <div className='text-center py-2 text-base-content/65 font-semibold text-xs'>
-                {displayValue}
-              </div>
-            }
             disabled={
               [
                 minDate ? { before: minDate } : undefined,
@@ -330,26 +312,17 @@ const DateInput = ({
         )}
         <div className='mt-auto flex flex-col gap-2'>
           {isRange && (
-            <small className='text-base-content/65'>
+            <small className='text-secondary'>
-              Tekan dua kali untuk reset tanggal awal
+              Tekan dua kali untuk memilih tanggal awal
             </small>
           )}
 
-          <div className='flex h-full justify-end items-end gap-1.5 mt-3'>
+          <div className='flex h-full justify-end items-end gap-2'>
-            <Button
+            <Button type='button' color='warning' onClick={handleResetDate}>
-              type='button'
-              color='none'
-              className='bg-transparent hover:bg-base-content/10 border-none text-base text-base-content/65 px-3'
-              onClick={handleResetDate}
-            >
               Reset
             </Button>
             {isRange && (
-              <Button
+              <Button type='button' onClick={handleSaveDate}>
-                type='button'
-                className='rounded-lg px-3 py-2 text-white'
-                onClick={handleSaveDate}
-              >
                 Simpan
               </Button>
             )}

src/components/input/DebouncedTextArea.tsx

@@ -7,7 +7,6 @@ import TextArea, { TextAreaProps } from '@/components/input/TextArea';
 
 interface DebouncedTextAreaProps extends TextAreaProps {
   delay?: number;
-  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
@@ -20,11 +19,6 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
   const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
 
-  // Sync internal value with external props.value when it changes (e.g., form reset)
-  useEffect(() => {
-    setInternalValue(props.value);
-  }, [props.value]);
-
   const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
     e
   ) => {
@@ -41,7 +35,6 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   return (
     <TextArea
       {...props}
-      ref={props.ref}
       value={internalValue}
       onChange={internalChangeHandler}
     />

src/components/input/FileInput.tsx

@@ -33,7 +33,6 @@ const FileInput = ({
   isError,
   errorMessage,
   disabled = false,
-  required = false,
   onChange,
   onBlur,
   readOnly = false,
@@ -41,7 +40,7 @@ const FileInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-0 text-start rounded-lg',
+        'w-full flex flex-col gap-2 text-start',
         className?.wrapper
       )}
     >
@@ -49,7 +48,7 @@ const FileInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full py-2 text-xs font-semibold leading-5',
+            'w-full text-sm font-normal leading-5',
             {
               'text-error': isError,
             },
@@ -57,13 +56,6 @@ const FileInput = ({
           )}
         >
           {label}
-          {required && (
-            <>
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
-          )}
         </label>
       )}
 
@@ -77,19 +69,15 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn(
+        className={cn('grow file-input w-full h-12 rounded', className?.input)}
-          'grow file-input w-full h-fit px-3 py-1.5 text-sm font-normal leading-6 rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
-          className?.input
-        )}
         readOnly={readOnly}
       />
 
-      {!isError && bottomLabel && (
+      {bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };

src/components/input/SelectInput.tsx

@@ -9,20 +9,15 @@ import Select, {
   SingleValue,
   components as ReactSelectComponents,
   ControlProps,
-  MenuListProps,
 } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
-import useSWRInfinite from 'swr/infinite';
+import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
-import {
+import { BaseApiResponse } from '@/types/api/api-general';
-  BaseApiResponse,
+import { isResponseSuccess } from '@/lib/api-helper';
-  ErrorApiResponse,
-  SuccessApiResponse,
-} from '@/types/api/api-general';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -40,9 +35,7 @@ interface SelectInputBaseProps<T = OptionType> {
   bottomLabel?: ReactNode;
   options: T[];
   optionComponent?: OptionComponent<T>;
-  components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
-  readOnly?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
   isRtl?: boolean;
@@ -54,9 +47,6 @@ interface SelectInputBaseProps<T = OptionType> {
     wrapper?: string;
     label?: string;
     select?: string;
-    inputPrefix?: string;
-    inputSuffix?: string;
-    inputPrefixSuffixWrapper?: string;
   };
   isError?: boolean;
   errorMessage?: string;
@@ -65,16 +55,10 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
-  inputPrefix?: ReactNode;
-  inputSuffix?: ReactNode;
   menuPortalTarget?: HTMLElement | null;
-  closeMenuOnSelect?: boolean;
-  hideSelectedOptions?: boolean;
-  onMenuScrollToBottom?: ((event: WheelEvent | TouchEvent) => void) | undefined;
 }
 
-export interface SelectInputProps<T = OptionType>
+interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
-  extends SelectInputBaseProps<T> {
   createables?: boolean;
   value?: T | T[] | null;
   onChange?: (val: T | T[] | null) => void;
@@ -89,7 +73,7 @@ const CustomControl = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps } = props;
+  const { children } = props;
 
   const customProps = props.selectProps as unknown as {
     shouldShowAdornment?: boolean;
@@ -101,7 +85,7 @@ const CustomControl = <
 
   return (
     <ReactSelectComponents.Control {...props}>
-      <div className='flex-1 pl-3 gap-1 flex items-center' {...innerProps}>
+      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
         {shouldShowAdornment && startAdornment}
         {children}
       </div>
@@ -109,29 +93,6 @@ const CustomControl = <
   );
 };
 
-const CustomMenuList = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: MenuListProps<Option, IsMulti, Group>
-) => {
-  const { children, selectProps, options } = props;
-  const { isLoading } = selectProps;
-
-  return (
-    <ReactSelectComponents.MenuList {...props}>
-      {children}
-
-      {options.length > 0 && isLoading && (
-        <div className='px-3 py-2 rounded-md text-center text-gray-400'>
-          <span className='loading loading-spinner loading-md' />
-        </div>
-      )}
-    </ReactSelectComponents.MenuList>
-  );
-};
-
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const {
     label,
@@ -140,7 +101,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     onChange,
     options,
     optionComponent,
-    components: customComponents,
     isDisabled,
     isLoading,
     isClearable,
@@ -158,13 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
-    inputPrefix,
-    inputSuffix,
     menuPortalTarget,
-    closeMenuOnSelect,
-    hideSelectedOptions,
-    onMenuScrollToBottom,
-    readOnly,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -174,18 +128,14 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    const mergedComponents = { ...base, IndicatorSeparator: () => null };
+    const customComponents = { ...base, IndicatorSeparator: () => null };
 
     if (startAdornment) {
-      mergedComponents.Control = CustomControl;
+      customComponents.Control = CustomControl;
     }
 
-    if (customComponents) {
+    return customComponents;
-      Object.assign(mergedComponents, customComponents);
+  }, [isAnimated, startAdornment]);
-    }
-
-    return mergedComponents;
-  }, [isAnimated, startAdornment, customComponents]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -213,11 +163,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   };
 
   return (
-    <div className={cn('w-full flex flex-col text-start', className?.wrapper)}>
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
       {label && (
         <span
           className={cn(
-            'w-full py-2 text-xs font-semibold leading-5',
+            'w-full text-sm font-normal leading-5',
             { 'text-error': isError },
             className?.label
           )}
@@ -234,264 +189,87 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         </span>
       )}
 
-      {inputPrefix || inputSuffix ? (
+      <SelectComponent<T, boolean, GroupBase<T>>
-        <div
+        instanceId='select'
-          className={cn(
+        value={value ?? (isMulti ? [] : null)}
-            'relative flex text-sm',
+        onChange={onChange ? handleChange : undefined}
-            className?.inputPrefixSuffixWrapper
+        options={options}
-          )}
+        menuIsOpen={openMenu}
-        >
+        inputValue={internalInputValue}
-          {inputPrefix && (
+        onInputChange={internalInputChangeHandler}
-            <div
+        onMenuClose={() => setInternalInputValue('')}
-              className={cn(
+        isMulti={isMulti}
-                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
+        isDisabled={isDisabled}
-                {
+        isLoading={isLoading}
-                  'bg-gray-100 border-base-content/10': !isDisabled,
+        isClearable={isClearable}
-                  'bg-gray-50 border-base-content/10': isDisabled,
+        isRtl={isRtl}
-                  'border-error': isError,
+        isSearchable={isSearchable}
-                },
+        placeholder={placeholder}
-                className?.inputPrefix
+        className={cn('w-full', className?.select)}
-              )}
+        classNames={{
-            >
+          ...(!startAdornment && {
-              {inputPrefix}
-            </div>
-          )}
-
-          <SelectComponent<T, boolean, GroupBase<T>>
-            instanceId='select'
-            value={value ?? (isMulti ? [] : null)}
-            onChange={onChange ? handleChange : undefined}
-            options={options}
-            menuIsOpen={openMenu}
-            inputValue={internalInputValue}
-            onInputChange={internalInputChangeHandler}
-            onMenuClose={() => setInternalInputValue('')}
-            isMulti={isMulti}
-            isDisabled={isDisabled || readOnly}
-            isLoading={isLoading}
-            isClearable={isClearable}
-            isRtl={isRtl}
-            isSearchable={isSearchable}
-            placeholder={placeholder}
-            closeMenuOnSelect={closeMenuOnSelect}
-            hideSelectedOptions={hideSelectedOptions}
-            className={cn('w-full flex-1', className?.select)}
-            classNames={{
-              control: ({ isFocused, isDisabled }) =>
-                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
-                  'cursor-pointer!': !readOnly && !isDisabled,
-                  'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200':
-                    isFocused && !startAdornment,
-                  'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
-                  'rounded-l-none!': inputPrefix && !startAdornment,
-                  'rounded-r-none!': inputSuffix && !startAdornment,
-                }),
-              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-              placeholder: () =>
-                cn({
-                  'text-gray-400 text-sm leading-tight': !isError,
-                  'text-red-300!': isError,
-                }),
-              singleValue: () =>
-                cn({
-                  'm-0! text-gray-900 text-sm leading-tight': !isError,
-                  'text-error!': isError,
-                  'text-gray-900!': readOnly,
-                }),
-              input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
-              indicatorsContainer: () =>
-                cn('flex items-center gap-1 pr-3 py-2'),
-              dropdownIndicator: ({ isFocused }) =>
-                cn('p-0! rounded hover:bg-gray-100', {
-                  'text-gray-900': isFocused,
-                  'text-gray-500': !isFocused,
-                  'text-error!': isError,
-                }),
-              clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
-              menu: () =>
-                cn(
-                  'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
-                ),
-              menuList: () => cn('p-0! max-h-60 overflow-auto'),
-              option: ({ isFocused, isSelected }) =>
-                cn('px-3 py-2 rounded-md cursor-pointer!', {
-                  'bg-indigo-600 text-white': isFocused,
-                  'bg-blue-500!': isSelected,
-                  'text-gray-700': !isFocused && !isSelected,
-                }),
-              multiValue: ({ getValue, index }) => {
-                const selectedValues = getValue() as T[];
-                return cn(
-                  'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
-                  selectedValues[index]?.className
-                );
-              },
-              multiValueRemove: () => cn('p-0! w-3 h-3'),
-              multiValueLabel: ({ getValue, index }) => {
-                const selectedValues = getValue() as T[];
-                return cn(
-                  'p-0! text-base-content! text-xs!',
-                  selectedValues[index]?.labelClassName
-                );
-              },
-            }}
-            components={{
-              ...components,
-              ...(optionComponent ? { Option: optionComponent } : {}),
-              MenuList: CustomMenuList,
-            }}
-            {...(startAdornment && {
-              shouldShowAdornment,
-              startAdornment,
-            })}
-            menuPortalTarget={
-              typeof document !== 'undefined'
-                ? (menuPortalTarget ?? document.body)
-                : undefined
-            }
-            styles={{
-              menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-              multiValue(base) {
-                return {
-                  ...base,
-                  borderRadius: '8px',
-                };
-              },
-            }}
-            onMenuScrollToBottom={onMenuScrollToBottom}
-          />
-
-          {inputSuffix && (
-            <div
-              className={cn(
-                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
-                {
-                  'bg-gray-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
-                  'border-error': isError,
-                },
-                className?.inputSuffix
-              )}
-            >
-              {inputSuffix}
-            </div>
-          )}
-        </div>
-      ) : (
-        <SelectComponent<T, boolean, GroupBase<T>>
-          instanceId='select'
-          value={value ?? (isMulti ? [] : null)}
-          onChange={onChange ? handleChange : undefined}
-          options={options}
-          menuIsOpen={openMenu}
-          inputValue={internalInputValue}
-          onInputChange={internalInputChangeHandler}
-          onMenuClose={() => setInternalInputValue('')}
-          isMulti={isMulti}
-          isDisabled={isDisabled || readOnly}
-          isLoading={isLoading}
-          isClearable={isClearable}
-          isRtl={isRtl}
-          isSearchable={isSearchable}
-          placeholder={placeholder}
-          closeMenuOnSelect={closeMenuOnSelect}
-          hideSelectedOptions={hideSelectedOptions}
-          className={cn('w-full', className?.select)}
-          classNames={{
             control: ({ isFocused, isDisabled }) =>
               cn(
-                'w-full border bg-white transition-shadow',
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-                // Gunakan rounded-lg untuk semua kasus
-                'rounded-lg!',
                 {
-                  'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200':
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                    isFocused && !startAdornment,
+                  'border-gray-300': !isError && !isFocused,
-                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
                 }
               ),
-            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
+            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
-            placeholder: () =>
+          }),
-              cn({
+          placeholder: () =>
-                'text-gray-400 text-sm leading-tight': !isError,
+            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
-                'text-red-300!': isError,
+          singleValue: () =>
-              }),
+            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-            singleValue: () =>
+          input: () => cn('text-gray-900'),
-              cn({
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
-                'm-0! text-gray-900 text-sm leading-tight': !isError,
+          dropdownIndicator: ({ isFocused }) =>
-                'text-error!': isError,
+            cn('p-1 rounded hover:bg-gray-100', {
-                'text-gray-900!': readOnly,
+              'text-gray-900': isFocused,
-              }),
+              'text-gray-500': !isFocused,
-            input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+              'text-error!': isError,
-            indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
+            }),
-            dropdownIndicator: ({ isFocused }) =>
+          menu: () =>
-              cn('p-0! rounded hover:bg-gray-100', {
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
-                'text-gray-900': isFocused,
+          menuList: () => cn('p-2! max-h-60 overflow-auto'),
-                'text-gray-500': !isFocused,
+          option: ({ isFocused, isSelected }) =>
-                'text-error!': isError,
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
-              }),
+              'bg-indigo-600 text-white': isFocused,
-            clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
+              'bg-blue-500!': isSelected,
-            menu: () =>
+              'text-gray-700': !isFocused && !isSelected,
-              cn(
+            }),
-                'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
+          multiValue: ({ getValue, index }) => {
-              ),
+            const selectedValues = getValue() as T[];
-            menuList: () => cn('p-0! max-h-60 overflow-auto'),
+            return cn(
-            option: ({ isFocused, isSelected }) =>
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
-              cn('px-3 py-2 rounded-md cursor-pointer!', {
+              selectedValues[index]?.className
-                'bg-indigo-600 text-white': isFocused,
+            );
-                'bg-blue-500!': isSelected,
+          },
-                'text-gray-700': !isFocused && !isSelected,
+          multiValueLabel: ({ getValue, index }) => {
-              }),
+            const selectedValues = getValue() as T[];
-            multiValue: ({ getValue, index }) => {
+            return cn('text-indigo-700', selectedValues[index]?.labelClassName);
-              const selectedValues = getValue() as T[];
+          },
-              return cn(
+        }}
-                'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
+        components={{
-                selectedValues[index]?.className
+          ...components,
-              );
+          ...(optionComponent ? { Option: optionComponent } : {}),
-            },
+        }}
-            multiValueRemove: () => cn('p-0! w-3 h-3'),
+        {...(startAdornment && {
-            multiValueLabel: ({ getValue, index }) => {
+          shouldShowAdornment,
-              const selectedValues = getValue() as T[];
+          startAdornment,
-              return cn(
+        })}
-                'p-0! text-base-content! text-xs!',
+        menuPortalTarget={
-                selectedValues[index]?.labelClassName
+          typeof document !== 'undefined'
-              );
+            ? (menuPortalTarget ?? document.body)
-            },
+            : undefined
-          }}
+        }
-          components={{
+        styles={{
-            ...components,
+          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-            ...(optionComponent ? { Option: optionComponent } : {}),
+        }}
-            MenuList: CustomMenuList,
+      />
-          }}
-          {...(startAdornment && {
-            shouldShowAdornment,
-            startAdornment,
-          })}
-          menuPortalTarget={
-            typeof document !== 'undefined'
-              ? (menuPortalTarget ?? document.body)
-              : undefined
-          }
-          styles={{
-            menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-            multiValue(base) {
-              return {
-                ...base,
-                borderRadius: '8px',
-              };
-            },
-          }}
-          onMenuScrollToBottom={onMenuScrollToBottom}
-        />
-      )}
 
       {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
@@ -502,7 +280,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 };
 
 const useSelect = <T,>(
-  basePath: string | null,
+  basePath: string,
   valueKey: keyof T | string,
   labelKey: keyof T | string,
   searchKey: string = 'search',
@@ -510,96 +288,34 @@ const useSelect = <T,>(
 ) => {
   const [inputValue, setInputValue] = useState('');
 
-  const pageKey = 'page';
+  const optionsUrlParams = useMemo(() => {
-  const limitKey = 'limit';
+    return new URLSearchParams({
-  const limit = params?.['limit'] ?? 10;
-
-  const getKey = (
-    pageIndex: number,
-    previousPageData?: BaseApiResponse<T[]>
-  ) => {
-    // stop when backend says no more pages
-    if (previousPageData && isResponseSuccess(previousPageData)) {
-      const meta = previousPageData.meta;
-      if (meta && meta.page >= meta.total_pages) return null;
-    }
-
-    const qs = new URLSearchParams({
-      ...(params ?? {}),
       [searchKey]: inputValue ?? '',
-      [pageKey]: String(pageIndex + 1),
+      ...params,
-      [limitKey]: String(limit),
     }).toString();
+  }, [inputValue, searchKey, params]);
 
-    return basePath ? `${basePath}?${qs}` : null;
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
-  };
 
-  const {
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
-    data: pages,
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
-    isLoading,
+  });
-    isValidating,
-    size,
-    setSize,
-  } = useSWRInfinite<BaseApiResponse<T[]>>(getKey, (url) =>
-    httpClientFetcher<BaseApiResponse<T[]>>(url)
-  );
 
-  const options = useMemo(() => {
+  const options = isResponseSuccess(data)
-    if (!pages) return [];
+    ? data.data.map((item) => {
-
+        return {
-    return pages.flatMap((page) =>
+          value: getByPath<T, number>(item, valueKey as string),
-      isResponseSuccess(page)
+          label: getByPath<T, string>(item, labelKey as string),
-        ? page.data.map((item) => ({
+        };
-            value: getByPath<T, number>(item, valueKey as string),
+      })
-            label: getByPath<T, string>(item, labelKey as string),
+    : [];
-          }))
-        : []
-    );
-  }, [pages, valueKey, labelKey]);
-
-  const lastPage = pages?.[pages.length - 1];
-  const hasMore =
-    !!lastPage &&
-    isResponseSuccess(lastPage) &&
-    !!lastPage.meta &&
-    lastPage.meta.page < lastPage.meta.total_pages;
-
-  const loadMore = () => {
-    if (!hasMore) return;
-    setSize(size + 1);
-  };
-
-  let formattedSuccessRawData: SuccessApiResponse<T[]> | undefined = undefined;
-  let formattedErrorRawData: ErrorApiResponse | undefined = undefined;
-
-  const latestPagesIndex = pages?.length ? pages.length - 1 : 0;
-
-  if (isResponseSuccess(pages?.[latestPagesIndex])) {
-    formattedSuccessRawData = {
-      ...pages?.[latestPagesIndex],
-      data:
-        pages?.flatMap((page) => (isResponseSuccess(page) ? page.data : [])) ??
-        [],
-    };
-  }
-
-  if (isResponseError(pages?.[latestPagesIndex])) {
-    formattedErrorRawData = pages?.[latestPagesIndex];
-  }
 
   return {
     inputValue,
     setInputValue,
-
     options,
-    rawData: isResponseSuccess(pages?.[latestPagesIndex])
+    isLoadingOptions: isLoading,
-      ? formattedSuccessRawData
+    rawData: data,
-      : formattedErrorRawData,
-
-    isLoadingOptions: isLoading || isValidating,
-    isLoadingMore: isValidating && size > 1,
-    hasMore,
-    loadMore,
   };
 };
 

src/components/input/SelectInputCheckbox.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import {
-  OptionProps,
-  GroupBase,
-  components as ReactSelectComponents,
-} from 'react-select';
-import SelectInput, { OptionType, SelectInputProps } from './SelectInput';
-import { cn } from '@/lib/helper';
-
-interface SelectInputCheckboxProps<T = OptionType>
-  extends Omit<
-    SelectInputProps<T>,
-    'closeMenuOnSelect' | 'hideSelectedOptions' | 'optionComponent'
-  > {
-  closeMenuOnSelect?: boolean;
-  hideSelectedOptions?: boolean;
-}
-
-const CheckboxOption = <
-  T extends OptionType,
-  IsMulti extends boolean,
-  Group extends GroupBase<T>,
->(
-  props: OptionProps<T, IsMulti, Group>
-) => {
-  const { isSelected, label, innerRef, innerProps, className, isFocused } =
-    props;
-
-  return (
-    <div
-      ref={innerRef}
-      {...innerProps}
-      className={cn(
-        'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
-        {
-          'bg-primary/5': isFocused,
-        },
-        className
-      )}
-    >
-      <input
-        type='checkbox'
-        checked={isSelected}
-        onChange={() => null}
-        className='checkbox checkbox-sm rounded-md checkbox-primary pointer-events-none border-base-content/10'
-      />
-
-      <label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
-        {label}
-      </label>
-    </div>
-  );
-};
-
-const SelectInputCheckbox = <T extends OptionType>(
-  props: SelectInputCheckboxProps<T>
-) => {
-  const {
-    closeMenuOnSelect = false,
-    hideSelectedOptions = false,
-    isMulti = true,
-    className,
-    ...restProps
-  } = props;
-
-  const customComponents = useMemo(() => {
-    return {
-      Option: CheckboxOption as typeof ReactSelectComponents.Option,
-    };
-  }, []);
-
-  return (
-    <SelectInput<T>
-      {...restProps}
-      isMulti={isMulti}
-      closeMenuOnSelect={closeMenuOnSelect}
-      hideSelectedOptions={hideSelectedOptions}
-      className={{
-        ...className,
-        select: cn(className?.select, 'select-checkbox'),
-      }}
-      components={customComponents}
-    />
-  );
-};
-
-export default SelectInputCheckbox;

src/components/input/SelectInputRadio.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import {
-  OptionProps,
-  GroupBase,
-  components as ReactSelectComponents,
-} from 'react-select';
-import SelectInput, { OptionType, SelectInputProps } from './SelectInput';
-import { cn } from '@/lib/helper';
-
-interface SelectInputRadioProps<T = OptionType>
-  extends Omit<SelectInputProps<T>, 'closeMenuOnSelect' | 'optionComponent'> {
-  closeMenuOnSelect?: boolean;
-}
-
-const RadioOption = <
-  T extends OptionType,
-  IsMulti extends boolean,
-  Group extends GroupBase<T>,
->(
-  props: OptionProps<T, IsMulti, Group>
-) => {
-  const { isSelected, label, innerRef, innerProps, className, isFocused } =
-    props;
-
-  return (
-    <div
-      ref={innerRef}
-      {...innerProps}
-      className={cn(
-        'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
-        {
-          'bg-primary/5': isFocused,
-        },
-        className
-      )}
-    >
-      <input
-        type='radio'
-        checked={isSelected}
-        onChange={() => null}
-        className='radio radio-md radio-primary pointer-events-none'
-      />
-
-      <label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
-        {label}
-      </label>
-    </div>
-  );
-};
-
-const SelectInputRadio = <T extends OptionType>(
-  props: SelectInputRadioProps<T>
-) => {
-  const { closeMenuOnSelect = true, className, ...restProps } = props;
-
-  const customComponents = useMemo(() => {
-    return {
-      Option: RadioOption as typeof ReactSelectComponents.Option,
-    };
-  }, []);
-
-  return (
-    <SelectInput<T>
-      {...restProps}
-      closeMenuOnSelect={closeMenuOnSelect}
-      className={{
-        ...className,
-        select: cn(className?.select, 'select-radio'),
-      }}
-      components={customComponents}
-    />
-  );
-};
-
-export default SelectInputRadio;

src/components/input/TextArea.tsx

@@ -28,7 +28,6 @@ export interface TextAreaProps {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   rows?: number;
-  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const TextArea = ({
@@ -50,12 +49,11 @@ const TextArea = ({
   readOnly = false,
   isLoading = false,
   rows = 3,
-  ref,
 }: TextAreaProps) => {
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-0 text-start',
+        'w-full flex flex-col gap-2 text-start',
         className?.wrapper
       )}
     >
@@ -63,7 +61,7 @@ const TextArea = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full py-2 text-xs font-semibold leading-5',
+            'w-full text-sm font-normal leading-5',
             {
               'text-error': isError,
             },
@@ -85,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-3 py-2.5 text-sm text-base-content font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
+          'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -101,7 +99,6 @@ const TextArea = ({
         onBlur={onBlur}
         disabled={disabled}
         readOnly={readOnly}
-        ref={ref}
       />
 
       {(isLoading || endAdornment) && (
@@ -113,11 +110,9 @@ const TextArea = ({
       )}
 
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };

src/components/input/TextInput.tsx

@@ -21,9 +21,6 @@ export interface TextInputProps {
     label?: string;
     inputWrapper?: string;
     input?: string;
-    inputPrefix?: string;
-    inputSuffix?: string;
-    inputPrefixSuffixWrapper?: string;
   };
   isError?: boolean;
   isValid?: boolean;
@@ -65,7 +62,7 @@ const TextInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-0 text-start rounded-lg',
+        'w-full flex flex-col gap-2 text-start',
         className?.wrapper
       )}
     >
@@ -73,7 +70,7 @@ const TextInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full py-2 text-xs font-semibold leading-5',
+            'w-full text-sm font-normal leading-5',
             {
               'text-error': isError,
             },
@@ -93,23 +90,15 @@ const TextInput = ({
       )}
 
       {inputPrefix || inputSuffix ? (
-        <div
+        <div className='relative flex'>
-          className={cn(
-            'relative flex text-sm',
-            className?.inputPrefixSuffixWrapper
-          )}
-        >
           {inputPrefix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
+                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-gray-50 border-gray-200': disabled,
-                  'border-error': isError,
+                }
-                  'border-success!': isValid,
-                },
-                className?.inputPrefix
               )}
             >
               {inputPrefix}
@@ -118,7 +107,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -165,14 +154,11 @@ const TextInput = ({
           {inputSuffix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
+                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
                 {
-                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-gray-50 border-gray-200': disabled,
-                  'border-error': isError,
+                }
-                  'border-success!': isValid,
-                },
-                className?.inputSuffix
               )}
             >
               {inputSuffix}
@@ -182,7 +168,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -216,10 +202,10 @@ const TextInput = ({
       )}
 
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
       {isError && errorMessage && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
       )}
     </div>
   );

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,78 +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',
-    innerRingClassName: 'bg-info',
-    middleRingClassName: 'bg-info/12',
-    outerRingClassName: 'border-info/12 bg-info/8',
-  },
-  success: {
-    icon: 'heroicons:check',
-    iconClassName: 'text-white',
-    innerRingClassName: 'bg-success',
-    middleRingClassName: 'bg-success/12',
-    outerRingClassName: 'border-success/12 bg-success/8',
-  },
-  error: {
-    icon: 'heroicons:exclamation-triangle',
-    iconClassName: 'text-error-content',
-    innerRingClassName: 'bg-error',
-    middleRingClassName: 'bg-error/12',
-    outerRingClassName: 'border-error/12 bg-error/8',
-  },
-} as const;
-
-const ConfirmationModalIcon = ({
-  type,
-  size = 16,
-}: {
-  type: 'info' | 'success' | 'error';
-  size?: number;
-}) => {
-  const config = iconConfig[type];
-
-  return (
-    <div
-      className={cn('rounded-full border p-[5px]', config.outerRingClassName)}
-    >
-      <div className={cn('rounded-full p-2', config.middleRingClassName)}>
-        <div
-          className={cn(
-            'rounded-full p-1 flex items-center justify-center',
-            config.innerRingClassName
-          )}
-        >
-          <Icon
-            icon={config.icon}
-            width={size}
-            height={size}
-            className={config.iconClassName}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
 const ConfirmationModal = ({
   ref,
   type = 'info',
   text,
-  subtitleText,
   closeOnBackdrop,
   primaryButton,
   secondaryButton,
   className,
   children,
-  iconSize = 16,
-  iconPosition = 'center',
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
 
@@ -117,84 +53,57 @@ const ConfirmationModal = ({
   };
 
   return (
-    <Modal
+    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
-      ref={ref}
+      <div className='w-full flex flex-col gap-4'>
-      closeOnBackdrop={closeOnBackdrop}
-      className={{
-        ...className,
-        modalBox: cn(
-          'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
-          className?.modalBox
-        ),
-      }}
-    >
-      <div
-        className={cn(
-          'flex flex-col gap-4',
-          children && 'sticky top-0 bg-inherit z-10'
-        )}
-      >
-        {iconPosition === 'center' ? (
-          <>
-            <div className='w-fit mx-auto'>
-              <ConfirmationModalIcon type={type} size={iconSize} />
-            </div>
-
-            <p className='text-center font-medium'>
-              {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
-            </p>
-
-            {subtitleText && (
-              <p className='text-center text-sm text-gray-400'>
-                {subtitleText}
-              </p>
-            )}
-          </>
-        ) : (
-          <div
-            className={cn('flex flex-row items-center gap-3', {
-              'flex-row': iconPosition === 'left',
-              'flex-row-reverse': iconPosition === 'right',
-            })}
-          >
-            <div className='w-fit'>
-              <ConfirmationModalIcon type={type} size={iconSize} />
-            </div>
-
-            <div className='flex flex-col gap-1'>
-              <p className='text-sm font-semibold'>
-                {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
-              </p>
-
-              {subtitleText && (
-                <p className='text-xs text-base-content/50'>{subtitleText}</p>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {children && (
-        <div className='w-full flex-1 overflow-y-auto'>{children}</div>
-      )}
-
-      {(secondaryButton || primaryButton) && (
         <div
           className={cn(
-            'w-full grid gap-3',
+            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
-            children && 'sticky bottom-0 bg-inherit z-10',
             {
-              'grid-cols-2': secondaryButton && primaryButton,
+              'bg-error': type === 'error',
-              'grid-cols-1':
+              'bg-info': type === 'info',
-                (secondaryButton && !primaryButton) ||
+              'bg-success': type === 'success',
-                (!secondaryButton && primaryButton),
             }
           )}
         >
+          {type === 'info' && (
+            <Icon
+              icon='material-symbols:info-outline-rounded'
+              width={64}
+              height={64}
+              className='text-info-content'
+            />
+          )}
+
+          {type === 'success' && (
+            <Icon
+              icon='qlementine-icons:success-12'
+              width={64}
+              height={64}
+              className='text-success-content'
+            />
+          )}
+
+          {type === 'error' && (
+            <Icon
+              icon='solar:danger-triangle-linear'
+              width={64}
+              height={64}
+              className='text-error-content'
+            />
+          )}
+        </div>
+
+        <p className='text-center font-medium'>
+          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+        </p>
+
+        {children && <div className='w-full'>{children}</div>}
+
+        <div className='w-full flex flex-row gap-2'>
           {secondaryButton && secondaryButton.text && (
             <Button
               {...secondaryButton}
-              variant='outline'
+              variant='ghost'
               color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
               disabled={
@@ -202,17 +111,8 @@ const ConfirmationModal = ({
                   ? secondaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-              onClick={(e) => {
+              onClick={closeModalHandler}
-                if (secondaryButton?.onClick) {
+              className='grow'
-                  secondaryButton.onClick(e);
-                } else {
-                  closeModalHandler();
-                }
-              }}
-              className={cn(
-                'p-2 rounded-xl text-sm',
-                secondaryButton?.className
-              )}
             >
               {secondaryButton?.text ?? 'Tidak'}
             </Button>
@@ -233,13 +133,13 @@ const ConfirmationModal = ({
                   ? primaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
+              className='grow'
             >
               {primaryButton?.text ?? 'Ya'}
             </Button>
           )}
         </div>
-      )}
+      </div>
     </Modal>
   );
 };

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -13,7 +13,6 @@ interface ConfirmationModalWithNotesProps
   extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
   rows?: number;
   placeholder?: string;
-  onClose?: () => void;
 
   primaryButton?: {
     text?: string;
@@ -33,8 +32,6 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
   className,
   rows = 3,
   placeholder = 'Catatan...',
-  onClose,
-  ...props
 }) => {
   const randomId = useId();
   const [notes, setNotes] = useState('');
@@ -43,11 +40,6 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
     setNotes(e.target.value);
   };
 
-  const closeModalHandler = () => {
-    onClose?.();
-    ref.current?.close();
-  };
-
   return (
     <ConfirmationModal
       ref={ref}
@@ -56,34 +48,13 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       closeOnBackdrop={closeOnBackdrop}
       primaryButton={{
         ...primaryButton,
-        onClick: (e) => {
+        onClick: () => {
-          if (primaryButton && primaryButton?.onClick) {
+          primaryButton?.onClick?.(notes);
-            primaryButton?.onClick?.(notes);
-          } else {
-            closeModalHandler();
-          }
-
           setNotes('');
         },
       }}
-      secondaryButton={
+      secondaryButton={secondaryButton}
-        secondaryButton
-          ? {
-              text: secondaryButton?.text ?? 'Tidak',
-              onClick: (e) => {
-                if (secondaryButton && secondaryButton?.onClick) {
-                  secondaryButton.onClick?.(e);
-                } else {
-                  closeModalHandler();
-                }
-
-                setNotes('');
-              },
-            }
-          : undefined
-      }
       className={className}
-      {...props}
     >
       <TextArea
         name={randomId}

src/components/molecules/SidebarMenu.tsx

@@ -39,15 +39,16 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
     <li>
       <Link
         href={item.link}
-        className={cn('px-3 py-1.5', {
+        className={cn(
-          'text-base-content/60': !isItemActive,
+          {
-          'menu-active border-[1.5px] border-solid border-base-300':
+            'menu-active border-2 border-solid border-base-300': isItemActive,
-            isItemActive,
+          },
-        })}
+          'px-3 py-1.5'
+        )}
       >
         {item.icon && <Icon icon={item.icon} width={20} height={20} />}
 
-        <span className='text-sm'>{item.text}</span>
+        <span className='text-base'>{item.text}</span>
       </Link>
     </li>
   );
@@ -61,13 +62,12 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
       <details open={isItemActive}>
         <summary
           className={cn({
-            'text-base-content/60': !isItemActive,
             'text-primary': isItemActive,
           })}
         >
           {item.icon && <Icon icon={item.icon} width={20} height={20} />}
 
-          <span className='text-sm'>{item.text}</span>
+          <span className='text-base'>{item.text}</span>
         </summary>
 
         <ul>
@@ -88,7 +88,7 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
-    <Menu className='p-3'>
+    <Menu>
       {menu.map((menuItem, menuIdx) => {
         return (
           <SidebarMenuItem

src/components/pages/ApprovalSteps.tsx

@@ -309,10 +309,9 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit?: number | string;
+    limit: number;
     search?: string;
     group_step_number?: boolean;
-    order_by_date?: 'ASC' | 'DESC';
   };
 }) => {
   // Membuat URL Parameters
@@ -320,8 +319,6 @@ const useApprovalSteps = ({
     page: params?.page?.toString() || '',
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
-    group_step_number: params?.group_step_number?.toString() || '',
-    order_by_date: params?.order_by_date || '',
   }).toString();
 
   // fetching data approvals

src/components/pages/closing/ClosingDetail.tsx

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

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -3,82 +3,124 @@ 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 { HppItem, ProfitLossItem } from '@/types/api/closing';
+import {
-import { useSearchParams } from 'next/navigation';
+  DataSummarySubTotal,
-import { useMemo } from 'react';
+  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 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 searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
   const { data: finance, isLoading } = useSWR(
-    `/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
+    `/closing/finance/${projectFlockId}`,
-    () =>
+    () => ClosingApi.getFinance(projectFlockId)
-      ClosingApi.getFinance(
-        projectFlockId,
-        kandangId ? Number(kandangId) : undefined
-      )
   );
 
-  const hppTableData: HppItem[] = useMemo(() => {
+  const hppTableData: HppTableRow[] = isResponseSuccess(finance)
-    if (isResponseSuccess(finance)) {
+    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
-      const customItems = {
+        // Group header row
-        label: 'HPP dan Pengeluaran',
+        {
-        code: 'custom_row',
+          group_name: hpp.group_name,
-      } as HppItem;
+          group_index: groupIndex,
-      const purchases = finance.data.hpp.items.filter(
+          isGroupHeader: true as const,
-        (item) => item.category === 'purchase'
+        },
-      );
+        // Data rows
-      const totalBudgeting = {
+        ...hpp.data.map((item) => ({
-        label: 'HPP dan Bahan Baku',
+          group_name: hpp.group_name,
-        code: 'custom_row',
+          group_index: groupIndex,
-      } as HppItem;
+          type: item.type,
-      const overheads = finance.data.hpp.items.filter(
+          budgeting: item.budgeting,
-        (item) => item.category === 'overhead'
+          realization: item.realization,
-      );
+          isGroupHeader: false as const,
-      return [customItems, ...purchases, totalBudgeting, ...overheads];
+        })),
-    }
+      ])
-    return [];
+    : [];
-  }, [finance]);
 
-  const profitLossTableData: ProfitLossItem[] = useMemo(() => {
+  const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
-    if (isResponseSuccess(finance)) {
+    ? [
-      const incomes = finance.data.profit_loss.items.filter(
+        // Pembelian group
-        (item) => item.type === 'income'
+        ...finance.data.profit_loss.data.pembelian.map((item) => ({
-      );
+          label: 'Pembelian',
-      const purchases = finance.data.profit_loss.items.filter(
+          group_name: 'Pembelian',
-        (item) => item.type === 'purchase'
+          group_index: 1,
-      );
+          type: item.type,
-      const overheads = finance.data.profit_loss.items.filter(
+          rp_per_bird: item.rp_per_bird,
-        (item) => item.type === 'overhead'
+          rp_per_kg: item.rp_per_kg,
-      );
+          amount: item.amount,
-      const grossProfit = {
+          isGroupHeader: false as const,
-        label: 'LABA RUGI BRUTO',
+        })),
-        code: 'custom_row',
+        {
-        type: 'gross_profit',
+          label: finance.data.profit_loss.data.summary.gross_profit.label,
-        rp_per_bird:
+          group_name: 'Penjualan',
-          finance.data.profit_loss.summary.gross_profit.rp_per_bird ?? 0,
+          group_index: 0,
-        rp_per_kg: finance.data.profit_loss.summary.gross_profit.rp_per_kg ?? 0,
+          isGroupHeader: true as const,
-        amount: finance.data.profit_loss.summary.gross_profit.amount ?? 0,
+          type: finance.data.profit_loss.data.summary.gross_profit.label,
-      } as ProfitLossItem;
+          rp_per_bird:
-      const subtotal = {
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
-        label: 'Subtotal',
+          rp_per_kg:
-        code: 'custom_row',
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
-        type: 'subtotal',
+          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
-        rp_per_bird:
+        },
-          finance.data.profit_loss.summary.sub_total.rp_per_bird ?? 0,
+        // Penjualan group
-        rp_per_kg: finance.data.profit_loss.summary.sub_total.rp_per_kg ?? 0,
+        ...finance.data.profit_loss.data.penjualan.map((item) => ({
-        amount: finance.data.profit_loss.summary.sub_total.amount ?? 0,
+          label: 'Penjualan',
-      } as ProfitLossItem;
+          group_name: 'Penjualan',
-      return [...incomes, ...purchases, grossProfit, ...overheads, subtotal];
+          group_index: 0,
-    }
+          type: item.type,
-    return [];
+          rp_per_bird: item.rp_per_bird,
-  }, [finance]);
+          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'>
@@ -91,21 +133,35 @@ const ClosingFinanceTable = ({
         >
           <div className='grid grid-cols-2 gap-6'>
             <div className='flex flex-col gap-1'>
-              <div>Laba Rugi Brutto</div>
+              <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.summary.gross_profit.amount
+                      finance.data.profit_loss.data.summary.gross_profit.amount
                     )
                   : '-'}
               </div>
             </div>
             <div className='flex flex-col gap-1'>
-              <div>Laba Rugi Netto</div>
+              <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.summary.net_profit.amount
+                      finance.data.profit_loss.data.summary.net_profit.amount
                     )
                   : '-'}
               </div>
@@ -113,7 +169,11 @@ const ClosingFinanceTable = ({
           </div>
         </Card>
         <Card
-          title='HPP Purchases'
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.hpp_purchases.title
+              : 'HPP Purchases'
+          }
           variant='bordered'
           collapsible
           className={{
@@ -121,18 +181,17 @@ const ClosingFinanceTable = ({
           }}
         >
           <div className='mt-6 p-0 mb-0'>
-            <Table<HppItem>
+            <Table<HppTableRow>
               data={hppTableData}
-              isLoading={isLoading}
               columns={[
                 {
                   header: 'No.',
                   enableSorting: false,
                   accessorFn: (item, index) => {
-                    if (item.code === 'custom_row') return '-';
+                    if (item.isGroupHeader) return '-';
                     const dataRowsBefore = hppTableData
                       .slice(0, index)
-                      .filter((row) => row.code !== 'custom_row').length;
+                      .filter((row) => !row.isGroupHeader).length;
                     return dataRowsBefore + 1;
                   },
                   footer: (props) => {
@@ -140,9 +199,9 @@ const ClosingFinanceTable = ({
                   },
                 },
                 {
-                  header: 'Jenis',
+                  header: 'Type',
                   enableSorting: false,
-                  accessorFn: (item) => formatTitleCase(item.label || '-'),
+                  accessorFn: (item) => formatTitleCase(item.type || '-'),
                 },
                 {
                   header: 'Budgeting',
@@ -158,8 +217,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.budgeting
+                              finance.data.hpp_purchases.summary_hpp.budgeting
-                                ?.rp_per_bird || 0
+                                .rp_per_bird || 0
                             )
                           : '-';
                       },
@@ -174,8 +233,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.budgeting?.rp_per_kg ||
+                              finance.data.hpp_purchases.summary_hpp.budgeting
-                                0
+                                .rp_per_kg || 0
                             )
                           : '-';
                       },
@@ -190,7 +249,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.budgeting?.amount || 0
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .amount || 0
                             )
                           : '-';
                       },
@@ -211,8 +271,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.realization
+                              finance.data.hpp_purchases.summary_hpp.realization
-                                ?.rp_per_bird || 0
+                                .rp_per_bird || 0
                             )
                           : '-';
                       },
@@ -227,8 +287,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.realization
+                              finance.data.hpp_purchases.summary_hpp.realization
-                                ?.rp_per_kg || 0
+                                .rp_per_kg || 0
                             )
                           : '-';
                       },
@@ -243,7 +303,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp.summary?.realization?.amount || 0
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .amount || 0
                             )
                           : '-';
                       },
@@ -253,7 +314,7 @@ const ClosingFinanceTable = ({
               ]}
               renderCustomRow={(row) => {
                 const rowData = row.original;
-                if (rowData.code === 'custom_row') {
+                if (rowData.isGroupHeader) {
                   return (
                     <tr
                       key={row.id}
@@ -267,7 +328,7 @@ const ClosingFinanceTable = ({
                         className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                       >
                         <div className='font-bold'>
-                          {formatTitleCase(rowData.label ?? '-')}
+                          {formatTitleCase(rowData.group_name ?? '-')}
                         </div>
                       </td>
                     </tr>
@@ -280,7 +341,11 @@ const ClosingFinanceTable = ({
           </div>
         </Card>
         <Card
-          title='Profit/Loss'
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.profit_loss.title
+              : 'Profit/Loss'
+          }
           variant='bordered'
           collapsible
           className={{
@@ -288,32 +353,38 @@ const ClosingFinanceTable = ({
           }}
         >
           <div className='mt-6 p-0 mb-0'>
-            <Table<ProfitLossItem>
+            <Table<ProfitLossTableRow>
               data={profitLossTableData}
-              isLoading={isLoading}
               columns={[
                 {
                   header: 'Jenis',
                   enableSorting: false,
-                  accessorFn: (item) => item.label,
+                  accessorFn: (item) => item.type,
                   cell: (item) => (
                     <div className=''>
-                      {formatTitleCase(item.row.original.label || '-')}
+                      {formatTitleCase(item.row.original.type || '-')}
                     </div>
                   ),
-                  footer: () => (
+                  footer: (item) => (
-                    <div className='font-bold uppercase'>LABA RUGI NETTO</div>
+                    <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: () => (
+                  footer: (item) => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.summary.net_profit
+                            finance.data.profit_loss.data.summary.net_profit
                               .rp_per_bird || 0
                           )
                         : formatCurrency(0)}
@@ -324,11 +395,11 @@ const ClosingFinanceTable = ({
                   header: 'Rp/Kg',
                   enableSorting: false,
                   accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
-                  footer: () => (
+                  footer: (item) => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.summary.net_profit
+                            finance.data.profit_loss.data.summary.net_profit
                               .rp_per_kg || 0
                           )
                         : formatCurrency(0)}
@@ -339,11 +410,11 @@ const ClosingFinanceTable = ({
                   header: 'Jumlah (Rp)',
                   enableSorting: false,
                   accessorFn: (item) => formatCurrency(item.amount || 0),
-                  footer: () => (
+                  footer: (item) => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.summary.net_profit
+                            finance.data.profit_loss.data.summary.net_profit
                               .amount || 0
                           )
                         : formatCurrency(0)}
@@ -353,30 +424,55 @@ const ClosingFinanceTable = ({
               ]}
               renderCustomRow={(row) => {
                 const rowData = row.original;
-                if (rowData.code === 'custom_row') {
+                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.footerRowClassName}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
                     >
-                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                      <td
-                        <div className='font-bold ps-6 uppercase'>
+                        colSpan={4}
-                          {formatTitleCase(rowData.label ?? '-')}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                        </div>
+                      >
-                      </td>
-                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
                         <div className='font-bold'>
-                          {formatCurrency(rowData.rp_per_bird ?? 0)}
+                          {formatTitleCase(rowData.group_name ?? '-')}
-                        </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>

src/components/pages/closing/ClosingGeneralInformationTable.tsx

@@ -1,30 +1,12 @@
-import { formatNumber } from '@/lib/helper';
 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'>
@@ -35,9 +17,7 @@ const ClosingGeneralInformationTable = ({
                 <tr>
                   <td>Lokasi</td>
                   <td>:</td>
-                  <td>
+                  <td>{initialValue?.location_name}</td>
-                    {initialValue?.location_name ?? projectData?.location?.name}
-                  </td>
                 </tr>
                 <tr>
                   <td>Periode</td>
@@ -45,22 +25,14 @@ const ClosingGeneralInformationTable = ({
                   <td>{initialValue?.period}</td>
                 </tr>
                 <tr>
-                  <td>Project Flock</td>
+                  <td>Kategori</td>
                   <td>:</td>
-                  <td>
+                  <td>{initialValue?.project_category}</td>
-                    {initialValue?.project_flock?.name ??
-                      projectData?.flock_name}
-                  </td>
                 </tr>
                 <tr>
                   <td>Populasi</td>
                   <td>:</td>
-                  <td>
+                  <td>{initialValue?.population} Ekor</td>
-                    {!kandangData
-                      ? formatNumber(initialValue?.population || 0)
-                      : formatNumber(chickinPopulation || 0)}{' '}
-                    Ekor
-                  </td>
                 </tr>
                 <tr>
                   <td>Jenis Project</td>
@@ -68,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>
+                  <td>{initialValue?.active_house_count} Kandang</td>
-                    {!kandangData
-                      ? `${initialValue?.active_house_count} Kandang`
-                      : kandangData?.kandang?.name}
-                  </td>
                 </tr>
                 <tr className='table-row @sm:hidden'>
                   <td>Status Pembayaran Penjualan</td>
@@ -101,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>
+                  <td>{initialValue?.active_house_count} Kandang</td>
-                    {!kandangData
-                      ? `${initialValue?.active_house_count} Kandang`
-                      : kandangData?.kandang?.name}
-                  </td>
                 </tr>
                 <tr>
                   <td>Status Pembayaran Penjualan</td>

src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
-
-import { cn, formatNumber } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ClosingApi } from '@/services/api/closing';
-import { ClosingIncomingSapronakSummary } from '@/types/api/closing';
-
-interface ClosingIncomingSapronaksSummaryTableProps {
-  projectFlockId: number;
-}
-
-const ClosingIncomingSapronaksSummaryTable = ({
-  projectFlockId,
-}: ClosingIncomingSapronaksSummaryTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
-  const {
-    state: tableFilterState,
-    updateFilter,
-    setPage,
-    setPageSize,
-    toQueryString: getTableFilterQueryString,
-  } = useTableFilter({
-    initial: {
-      search: '',
-      nameSort: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-      nameSort: 'sort_name',
-    },
-  });
-
-  const {
-    data: incomingSapronakSummaries,
-    isLoading: isLoadingIncomingSapronakSummaries,
-  } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/sapronak/summary${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
-    ClosingApi.getAllIncomingSapronakSummaryFetcher,
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  const [open, setOpen] = useState(true);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-
-  const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronakSummary>[] =
-    [
-      {
-        header: '#',
-        cell: (props) => props.row.index + 1,
-      },
-      {
-        accessorKey: 'category',
-        header: 'Kategori',
-      },
-      {
-        accessorKey: 'total_qty',
-        header: 'Total Kuantitas',
-        cell: (props) =>
-          `${formatNumber(props.row.original.total_qty)} ${props.row.original.uom.name}`,
-      },
-    ];
-
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '');
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(incomingSapronakSummaries)
-          ? incomingSapronakSummaries.data.length > 0
-          : false
-      );
-    }
-  }, [incomingSapronakSummaries, isResponseSuccess]);
-
-  return (
-    <Card
-      className={{
-        wrapper: 'w-full',
-        body: 'p-4 shadow',
-      }}
-    >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Ringkasan Sapronak Masuk</div>
-
-            <Icon
-              icon='material-symbols:keyboard-arrow-down'
-              width={24}
-              height={24}
-              className={cn('text-primary transition-transform', {
-                '-rotate-180': open,
-              })}
-            />
-          </div>
-        }
-        className='w-full!'
-        titleClassName='w-full p-0!'
-      >
-        <div className='w-full p-0'>
-          <Table<ClosingIncomingSapronakSummary>
-            data={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.data
-                : []
-            }
-            columns={incomingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingIncomingSapronakSummaries}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(incomingSapronakSummaries) &&
-                  incomingSapronakSummaries?.data?.length === 0,
-              }),
-            }}
-          />
-        </div>
-      </Collapse>
-    </Card>
-  );
-};
-
-export default ClosingIncomingSapronaksSummaryTable;

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
@@ -24,9 +23,6 @@ interface ClosingIncomingSapronaksTableProps {
 const ClosingIncomingSapronaksTable = ({
   projectFlockId,
 }: ClosingIncomingSapronaksTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -47,8 +43,11 @@ const ClosingIncomingSapronaksTable = ({
 
   const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
     useSWR(
-      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming`,
-      ClosingApi.getAllIncomingSapronakFetcher
+      ClosingApi.getAllIncomingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
     );
 
   const [open, setOpen] = useState(true);

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

@@ -1,174 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
-
-import { cn, formatNumber } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ClosingApi } from '@/services/api/closing';
-import { ClosingOutgoingSapronakSummary } from '@/types/api/closing';
-
-interface ClosingOutgoingSapronaksSummaryTableProps {
-  projectFlockId: number;
-}
-
-const ClosingOutgoingSapronaksSummaryTable = ({
-  projectFlockId,
-}: ClosingOutgoingSapronaksSummaryTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
-  const {
-    state: tableFilterState,
-    updateFilter,
-    setPage,
-    setPageSize,
-    toQueryString: getTableFilterQueryString,
-  } = useTableFilter({
-    initial: {
-      search: '',
-      nameSort: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-      nameSort: 'sort_name',
-    },
-  });
-
-  const {
-    data: outgoingSapronakSummaries,
-    isLoading: isLoadingOutgoingSapronakSummaries,
-  } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/sapronak/summary${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
-    ClosingApi.getAllIncomingSapronakSummaryFetcher,
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  const [open, setOpen] = useState(true);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-
-  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronakSummary>[] =
-    [
-      {
-        header: '#',
-        cell: (props) => props.row.index + 1,
-      },
-      {
-        accessorKey: 'category',
-        header: 'Kategori',
-      },
-      {
-        accessorKey: 'total_qty',
-        header: 'Total Kuantitas',
-        cell: (props) =>
-          `${formatNumber(props.row.original.total_qty)} ${props.row.original.uom.name}`,
-      },
-    ];
-
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '');
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
-  useEffect(() => {
-    if (!open) {
-      setOpen(
-        isResponseSuccess(outgoingSapronakSummaries)
-          ? outgoingSapronakSummaries.data.length > 0
-          : false
-      );
-    }
-  }, [outgoingSapronakSummaries, isResponseSuccess]);
-
-  return (
-    <Card
-      className={{
-        wrapper: 'w-full',
-        body: 'p-4 shadow',
-      }}
-    >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Ringkasan Sapronak Keluar</div>
-
-            <Icon
-              icon='material-symbols:keyboard-arrow-down'
-              width={24}
-              height={24}
-              className={cn('text-primary transition-transform', {
-                '-rotate-180': open,
-              })}
-            />
-          </div>
-        }
-        className='w-full!'
-        titleClassName='w-full p-0!'
-      >
-        <div className='w-full p-0'>
-          <Table<ClosingOutgoingSapronakSummary>
-            data={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.data
-                : []
-            }
-            columns={outgoingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingOutgoingSapronakSummaries}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(outgoingSapronakSummaries) &&
-                  outgoingSapronakSummaries?.data?.length === 0,
-              }),
-            }}
-          />
-        </div>
-      </Collapse>
-    </Card>
-  );
-};
-
-export default ClosingOutgoingSapronaksSummaryTable;

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
@@ -24,9 +23,6 @@ interface ClosingOutgoingSapronaksTableProps {
 const ClosingOutgoingSapronaksTable = ({
   projectFlockId,
 }: ClosingOutgoingSapronaksTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -47,8 +43,11 @@ const ClosingOutgoingSapronaksTable = ({
 
   const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
     useSWR(
-      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing`,
-      ClosingApi.getAllOutgoingSapronakFetcher
+      ClosingApi.getAllOutgoingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
     );
 
   const [open, setOpen] = useState(true);

src/components/pages/closing/ClosingOverheadTabContent.tsx

@@ -1,26 +1,16 @@
 import ClosingOverheadTable from '@/components/pages/closing/ClosingOverheadTable';
-import { ClosingGeneralInformation } from '@/types/api/closing';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 interface ClosingOverheadTabContentProps {
   projectFlockId: number;
-  generalInformation?: ClosingGeneralInformation;
-  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingOverheadTabContent = ({
   projectFlockId,
-  generalInformation,
-  kandangData,
 }: ClosingOverheadTabContentProps) => {
   return (
     <div className='flex flex-col gap-4'>
       {projectFlockId && (
-        <ClosingOverheadTable
+        <ClosingOverheadTable projectFlockId={projectFlockId} />
-          projectFlockId={projectFlockId}
-          generalInformation={generalInformation}
-          kandangData={kandangData}
-        />
       )}
     </div>
   );

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -3,32 +3,20 @@ 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 {
+import { Overhead, OverheadTotal } from '@/types/api/closing';
-  ClosingGeneralInformation,
-  Overhead,
-  OverheadTotal,
-} from '@/types/api/closing';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
-import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import useSWR from 'swr';
 
 interface ClosingOverheadTableProps {
+  type?: 'detail';
   projectFlockId: number;
-  generalInformation?: ClosingGeneralInformation;
-  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingOverheadTable = ({
+  type,
   projectFlockId,
-  generalInformation,
-  kandangData,
 }: ClosingOverheadTableProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
   const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
     `${ClosingApi.basePath}/${projectFlockId}/overhead`,
     () => ClosingApi.getOverhead(projectFlockId),
@@ -37,174 +25,104 @@ const ClosingOverheadTable = ({
     }
   );
 
-  const { data: overheadKandang, isLoading: isLoadingOverheadKandang } = useSWR(
-    kandangId
-      ? `${ClosingApi.basePath}/${projectFlockId}/${kandangId}/overhead`
-      : undefined,
-    () =>
-      ClosingApi.getOverhead(
-        projectFlockId,
-        kandangId ? Number(kandangId) : undefined
-      ),
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  const chickinPopulation = useMemo(() => {
-    if (kandangData) {
-      return kandangData?.chickins?.reduce(
-        (acc, chickin) => acc + chickin.usage_qty,
-        0
-      );
-    }
-    return 0;
-  }, [kandangData]);
-
-  const kandangTotal = useMemo(() => {
-    if (!isResponseSuccess(overhead)) {
-      return 0;
-    }
-    const total =
-      ((chickinPopulation ?? 0) * overhead.data.total.actual_total_amount) /
-      (generalInformation?.population ?? 0);
-    return total;
-  }, [overhead, chickinPopulation, generalInformation]);
-
   // Helper function to create columns with footer support
-  const createColumns = (
+  const createColumns = (total?: OverheadTotal): ColumnDef<Overhead>[] => [
-    total?: OverheadTotal,
+    // Group untuk kolom tanpa footer
-    kandangId?: number
+    {
-  ): ColumnDef<Overhead>[] => {
+      header: 'Nama Item',
-    const flockColumn: ColumnDef<Overhead>[] = [
+      accessorFn: (props) => props.item_name,
-      {
+      footer: 'Total Pengeluaran Overhead',
-        header: 'Budget Pengajuan',
+    },
-        footer: '',
+    {
-        columns: [
+      header: 'Satuan',
-          {
+      accessorFn: (props) => props.uom_name,
-            id: 'budget_quantity',
+    },
-            header: 'Jumlah',
+    {
-            accessorFn: (props) => formatNumber(props.budget_quantity),
+      header: 'Budget Pengajuan',
-            footer: total ? () => formatNumber(total.budget_quantity) : '',
+      footer: '',
-          },
+      columns: [
-          {
+        {
-            id: 'budget_unit_price',
+          id: 'budget_quantity',
-            header: 'Harga Satuan',
+          header: 'Jumlah',
-            accessorFn: (props) => formatCurrency(props.budget_unit_price),
+          accessorFn: (props) =>
-            footer: '',
+            props.budget_quantity ? formatNumber(props.budget_quantity) : '-',
-          },
+          footer: total ? () => formatNumber(total.budget_quantity) : '',
-          {
+        },
-            id: 'budget_total_amount',
+        {
-            header: 'Total',
+          id: 'budget_unit_price',
-            accessorFn: (props) => formatCurrency(props.budget_total_amount),
+          header: 'Harga Satuan',
-            footer: total
+          accessorFn: (props) =>
-              ? () => formatCurrency(total.budget_total_amount)
+            props.budget_unit_price
-              : '0',
+              ? formatCurrency(props.budget_unit_price)
-          },
+              : '-',
-        ],
+          footer: '',
-      },
+        },
-      {
+        {
-        header: 'Realisasi',
+          id: 'budget_total_amount',
-        footer: '',
+          header: 'Total',
-        columns: [
+          accessorFn: (props) =>
-          {
+            props.budget_total_amount
-            id: 'actual_date',
+              ? formatCurrency(props.budget_total_amount)
-            header: 'Tanggal',
+              : '-',
-            accessorFn: (props) =>
+          footer: total ? () => formatCurrency(total.budget_total_amount) : '',
-              formatDate(props.actual_date, 'DD MMM, YYYY'),
+        },
-            footer: '',
+      ],
-          },
+    },
-          {
+    {
-            id: 'actual_quantity',
+      header: 'Realisasi',
-            header: 'Jumlah',
+      footer: '',
-            accessorFn: (props) => formatNumber(props.actual_quantity),
+      columns: [
-            footer: total ? () => formatNumber(total.actual_quantity) : '0',
+        {
-          },
+          id: 'actual_date',
-          {
+          header: 'Tanggal',
-            id: 'actual_unit_price',
+          accessorFn: (props) =>
-            header: 'Harga Satuan',
+            props.actual_date
-            accessorFn: (props) => formatCurrency(props.actual_unit_price),
+              ? formatDate(props.actual_date, 'DD MMM, YYYY')
-            footer: '',
+              : '-',
-          },
+          footer: '',
-          {
+        },
-            id: 'actual_total_amount',
+        {
-            header: 'Total',
+          id: 'actual_quantity',
-            accessorFn: (props) => formatCurrency(props.actual_total_amount),
+          header: 'Jumlah',
-            footer: total
+          accessorFn: (props) =>
-              ? () => formatCurrency(total.actual_total_amount)
+            props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
-              : '0',
+          footer: total ? () => formatNumber(total.actual_quantity) : '',
-          },
+        },
-        ],
+        {
-      },
+          id: 'actual_unit_price',
-    ];
+          header: 'Harga Satuan',
-
+          accessorFn: (props) =>
-    const kandangColumn: ColumnDef<Overhead>[] = [
+            props.actual_unit_price
-      {
+              ? formatCurrency(props.actual_unit_price)
-        id: 'actual_date',
+              : '-',
-        header: 'Tanggal',
+          footer: '',
-        accessorFn: (props) => formatDate(props.actual_date, 'DD MMM, YYYY'),
+        },
-        footer: '',
+        {
-      },
+          id: 'actual_total_amount',
-      {
+          header: 'Total',
-        id: 'actual_quantity',
+          accessorFn: (props) =>
-        header: 'Jumlah',
+            props.actual_total_amount
-        accessorFn: (props) => formatNumber(props.actual_quantity),
+              ? formatCurrency(props.actual_total_amount)
-        footer: total ? () => formatNumber(total.actual_quantity) : '',
+              : '-',
-      },
+          footer: total ? () => formatCurrency(total.actual_total_amount) : '',
-      {
+        },
-        id: 'actual_unit_price',
+      ],
-        header: 'Harga Satuan',
+    },
-        accessorFn: (props) => formatCurrency(props.actual_unit_price),
+    {
-        footer: '',
+      id: 'cost_per_bird',
-      },
+      header: 'Rp/Ekor',
-      {
+      accessorFn: (props) =>
-        id: 'actual_total_amount',
+        props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
-        header: 'Total',
+      footer: total ? () => formatCurrency(total.cost_per_bird) : '',
-        accessorFn: (props) => formatCurrency(props.actual_total_amount),
+    },
-        footer: total ? () => formatCurrency(total.actual_total_amount) : '',
+  ];
-      },
-    ];
-
-    const finalColumns: ColumnDef<Overhead>[] = [
-      // Group untuk kolom tanpa footer
-      {
-        header: 'No',
-        accessorFn: (_, index) => index,
-        cell: (props) => props.row.index + 1,
-      },
-      {
-        header: 'Nama Item',
-        accessorFn: (props) => props.item_name,
-        footer: 'Total Pengeluaran Overhead',
-      },
-      {
-        header: 'Satuan',
-        accessorFn: (props) => props.uom_name,
-      },
-      ...(kandangId ? kandangColumn : flockColumn),
-      {
-        id: 'cost_per_bird',
-        header: 'Rp/Ekor',
-        accessorFn: (props) => formatCurrency(props.cost_per_bird),
-        footer: total ? () => formatCurrency(total.cost_per_bird) : '',
-      },
-    ];
-    return finalColumns;
-  };
 
   const columns = useMemo(
     () =>
       isResponseSuccess(overhead)
-        ? createColumns(
+        ? createColumns(overhead.data?.total)
-            kandangId
-              ? isResponseSuccess(overheadKandang)
-                ? overheadKandang.data?.total
-                : undefined
-              : overhead.data?.total,
-            kandangId ? Number(kandangId) : undefined
-          )
         : createColumns(),
-    [overhead, kandangId, overheadKandang]
+    [overhead]
   );
 
   return (
@@ -220,13 +138,7 @@ const ClosingOverheadTable = ({
       >
         <Table<Overhead>
           data={
-            kandangId
+            isResponseSuccess(overhead) ? (overhead.data?.overheads ?? []) : []
-              ? isResponseSuccess(overheadKandang)
-                ? (overheadKandang.data?.overheads ?? [])
-                : []
-              : isResponseSuccess(overhead)
-                ? (overhead.data?.overheads ?? [])
-                : []
           }
           columns={columns}
           className={{
@@ -236,67 +148,12 @@ const ClosingOverheadTable = ({
               'whitespace-nowrap'
             ),
           }}
-          isLoading={isLoadingOverhead}
           renderFooter={
             isResponseSuccess(overhead)
               ? overhead.data?.overheads.length > 0
               : false
           }
         />
-        {kandangId && (
-          <Card
-            className={{
-              wrapper: 'w-full',
-              body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
-            }}
-          >
-            <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
-              <div className='flex flex-row items-center justify-between'>
-                <h2 className='text-base font-bold'>Pembelian Kandang </h2>
-              </div>
-              <div className='flex flex-col items-center justify-center'>
-                <Icon icon='heroicons:equals' className='inline' />
-              </div>
-              <div className='flex flex-col flex-1 gap-1.5'>
-                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                  Populasi Akhir KANDANG{' '}
-                  <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
-                  Di FARM
-                </div>
-                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                  Populasi Akhir Proyek
-                </div>
-              </div>
-              <div className='flex flex-col items-center justify-center'>
-                <Icon icon='heroicons:equals' className='inline' />
-              </div>
-              <div className='flex flex-col flex-1 gap-1.5'>
-                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                  {formatNumber(chickinPopulation ?? 0)}
-                  <Icon icon='heroicons:x-mark' className='inline' />
-                  {formatCurrency(
-                    isResponseSuccess(overhead)
-                      ? overhead.data?.total.actual_total_amount
-                      : 0
-                  )}
-                </div>
-                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                  {formatNumber(generalInformation?.population ?? 0)}
-                </div>
-              </div>
-              <div className='flex flex-col items-center justify-center'>
-                <Icon icon='heroicons:equals' className='inline' />
-              </div>
-              <div className='flex flex-row items-center justify-between'>
-                <h2 className='text-base font-bold'>
-                  {formatNumber(kandangTotal || 0)}
-                </h2>
-              </div>
-            </div>
-          </Card>
-        )}
       </Card>
     </>
   );

src/components/pages/closing/ClosingProductionDataTabContent.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -13,12 +12,9 @@ interface ClosingProductionDataTabContentProps {
 const ClosingProductionDataTabContent = ({
   projectFlockId,
 }: ClosingProductionDataTabContentProps) => {
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
   const { data: productionData, isLoading } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/production-data?kandang_id=${kandangId ? `${kandangId}` : ''}`,
+    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
-    () => ClosingApi.getProductionData(projectFlockId, Number(kandangId))
+    () => ClosingApi.getProductionData(projectFlockId)
   );
 
   if (isLoading) {
@@ -100,6 +96,11 @@ const ClosingProductionDataTabContent = ({
                 value={formatNumber(purchase.feed_used)}
                 unit='Kg'
               />
+              <DataRow
+                label='Pakan Terpakai per Ekor'
+                value={formatNumber(purchase.feed_used_per_head)}
+                unit='Kg'
+              />
             </div>
           </section>
 
@@ -123,12 +124,14 @@ const ClosingProductionDataTabContent = ({
                 />
                 <DataRow
                   label='Bobot Rata-Rata'
-                  value={formatNumber(sales.chicken.avg_weight)}
+                  value={formatNumber(sales.chicken.average_weight)}
                   unit='Kg/Ekor'
                 />
                 <DataRow
                   label='Harga Jual Rata-Rata'
-                  value={formatNumber(sales.chicken.avg_selling_price)}
+                  value={formatNumber(
+                    sales.chicken.chicken_average_selling_price
+                  )}
                   unit='Rupiah'
                 />
               </div>
@@ -145,17 +148,17 @@ const ClosingProductionDataTabContent = ({
                     />
                     <DataRow
                       label='Telur (Kg)'
-                      value={formatNumber(sales.egg.egg_mass)}
+                      value={formatNumber(sales.egg.egg_mass_kg)}
                       unit='Kg'
                     />
                     <DataRow
                       label='Berat Telur Rata-Rata'
-                      value={formatNumber(sales.egg.avg_egg_weight)}
+                      value={formatNumber(sales.egg.average_egg_weight_kg)}
                       unit='Kg'
                     />
                     <DataRow
                       label='Harga Jual Telur Rata-Rata'
-                      value={formatNumber(sales.egg.avg_selling_price)}
+                      value={formatNumber(sales.egg.egg_average_selling_price)}
                       unit='Rupiah'
                     />
                   </div>
@@ -188,37 +191,17 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='Mortalitas Std'
-                value={formatNumber(performance.mor_std)}
+                value={formatNumber(performance.mortality_std)}
                 unitClassName='hidden'
               />
               <DataRow
                 label='Mortalitas Act'
-                value={formatNumber(performance.mor_act)}
+                value={formatNumber(performance.mortality_act)}
                 unitClassName='hidden'
               />
               <DataRow
                 label='DEFF Mortalitas'
-                value={formatNumber(performance.mor_diff)}
+                value={formatNumber(performance.deff_mortality)}
-                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
@@ -233,70 +216,14 @@ const ClosingProductionDataTabContent = ({
               />
               <DataRow
                 label='DEFF FCR'
-                value={formatNumber(performance.fcr_diff)}
+                value={formatNumber(performance.deff_fcr)}
                 unitClassName='hidden'
               />
-
+              <DataRow
-              {/* Laying Specific Fields */}
+                label='AWG'
-              {performance.hen_day_act !== undefined && (
+                value={formatNumber(performance.awg)}
-                <>
+                unit='Gr/Hari'
-                  <DataRow
+              />
-                    label='Hen Day Std'
-                    value={formatNumber(performance.hen_day_std!)}
-                    unit='%'
-                  />
-                  <DataRow
-                    label='Hen Day Act'
-                    value={formatNumber(performance.hen_day_act)}
-                    unit='%'
-                  />
-                </>
-              )}
-
-              {performance.egg_mass !== undefined && (
-                <>
-                  <DataRow
-                    label='Egg Mass Std'
-                    value={formatNumber(performance.egg_mass_std!)}
-                    unit='Kg'
-                  />
-                  <DataRow
-                    label='Egg Mass Act'
-                    value={formatNumber(performance.egg_mass)}
-                    unit='Kg'
-                  />
-                </>
-              )}
-
-              {performance.egg_weight !== undefined && (
-                <>
-                  <DataRow
-                    label='Egg Weight Std'
-                    value={formatNumber(performance.egg_weight_std!)}
-                    unit='Gr'
-                  />
-                  <DataRow
-                    label='Egg Weight Act'
-                    value={formatNumber(performance.egg_weight)}
-                    unit='Gr'
-                  />
-                </>
-              )}
-
-              {performance.hen_housed_act !== undefined && (
-                <>
-                  <DataRow
-                    label='Hen Housed Std'
-                    value={formatNumber(performance.hen_housed_std!)}
-                    unit='%'
-                  />
-                  <DataRow
-                    label='Hen Housed Act'
-                    value={formatNumber(performance.hen_housed_act)}
-                    unit='%'
-                  />
-                </>
-              )}
             </div>
           </section>
         </div>

src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx

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

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

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

src/components/pages/closing/ClosingSapronakTabContent.tsx

@@ -2,8 +2,6 @@
 
 import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
 import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
-import ClosingIncomingSapronaksSummaryTable from '@/components/pages/closing/ClosingIncomingSapronaksSummaryTable';
-import ClosingOutgoingSapronaksSummaryTable from './ClosingOutgoingSapronaksSummaryTable';
 
 interface ClosingSapronakTableProps {
   projectFlockId?: number;
@@ -18,15 +16,7 @@ const ClosingSapronakTabContent = ({
         <>
           <ClosingIncomingSapronaksTable projectFlockId={projectFlockId} />
 
-          <ClosingIncomingSapronaksSummaryTable
-            projectFlockId={projectFlockId}
-          />
-
           <ClosingOutgoingSapronaksTable projectFlockId={projectFlockId} />
-
-          <ClosingOutgoingSapronaksSummaryTable
-            projectFlockId={projectFlockId}
-          />
         </>
       )}
     </div>

src/components/pages/closing/ClosingsTable.tsx

@@ -104,10 +104,6 @@ const ClosingsTable = () => {
       header: '#',
       cell: (props) => props.row.index + 1,
     },
-    {
-      accessorKey: 'project_name',
-      header: 'Flock',
-    },
     {
       accessorKey: 'location_name',
       header: 'Lokasi',
@@ -130,6 +126,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',
@@ -167,7 +185,6 @@ const ClosingsTable = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
-    loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
@@ -233,7 +250,6 @@ const ClosingsTable = () => {
                 value={selectedLocation}
                 onChange={locationChangeHandler}
                 onInputChange={setLocationInputValue}
-                onMenuScrollToBottom={loadMoreLocations}
                 isClearable
                 className={{
                   wrapper: 'col-span-12 sm:col-span-6',

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

@@ -13,6 +13,7 @@ interface HppExpeditionReportTableProps {
 }
 
 const HppExpeditionReportTable = ({
+  type = 'detail',
   initialValues,
 }: HppExpeditionReportTableProps) => {
   const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {

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

@@ -4,12 +4,9 @@ import React, { useMemo } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
-import {
+import { BaseClosingSales, BaseSales } from '@/types/api/closing';
-  BaseClosingSales,
-  BaseSales,
-  ClosingSalesSummary,
-} from '@/types/api/closing';
 import { Product } from '@/types/api/master-data/product';
 import { Customer } from '@/types/api/master-data/customer';
 import { Kandang } from '@/types/api/master-data/kandang';
@@ -19,25 +16,22 @@ interface SalesReportTableProps {
   initialValues?: BaseClosingSales;
 }
 
-const SalesReportTable = ({ initialValues }: SalesReportTableProps) => {
+const SalesReportTable = ({
+  type = 'detail',
+  initialValues,
+}: SalesReportTableProps) => {
   const salesData: BaseSales[] = useMemo(() => {
     return initialValues?.sales || [];
   }, [initialValues]);
 
-  const summary: ClosingSalesSummary | undefined = useMemo(() => {
-    return initialValues?.summary;
-  }, [initialValues]);
-
   const totals = useMemo(() => {
     if (salesData.length === 0) {
       return {
         totalQuantity: 0,
         totalWeight: 0,
         avgWeight: 0,
-        avgSalesPrice: 0,
+        avgPricePartner: 0,
-        totalSalesPrice: 0,
+        totalPartner: 0,
-        avgActualPrice: 0,
-        totalActualPrice: 0,
       };
     }
 
@@ -51,46 +45,26 @@ const SalesReportTable = ({ initialValues }: SalesReportTableProps) => {
     );
     const avgWeight = totalQuantity > 0 ? totalWeight / totalQuantity : 0;
 
-    const totalSalesPrice = salesData.reduce(
+    const validPriceItems = salesData.filter(
-      (sum, item) => sum + (item.total_sales_price || 0),
+      (item) => item.price != null && item.price > 0
-      0
     );
-
+    const avgPricePartner =
-    const validSalesPriceItems = salesData.filter(
+      validPriceItems.length > 0
-      (item) => item.sales_price != null && item.sales_price > 0
+        ? validPriceItems.reduce((sum, item) => sum + item.price, 0) /
-    );
+          validPriceItems.length
-    const avgSalesPrice =
-      validSalesPriceItems.length > 0
-        ? validSalesPriceItems.reduce(
-            (sum, item) => sum + item.sales_price,
-            0
-          ) / validSalesPriceItems.length
         : 0;
 
-    const totalActualPrice = salesData.reduce(
+    const totalPartner = salesData.reduce(
-      (sum, item) => sum + (item.total_actual_price || 0),
+      (sum, item) => sum + (item.total_price || 0),
       0
     );
 
-    const validActualPriceItems = salesData.filter(
-      (item) => item.actual_price != null && item.actual_price > 0
-    );
-    const avgActualPrice =
-      validActualPriceItems.length > 0
-        ? validActualPriceItems.reduce(
-            (sum, item) => sum + item.actual_price,
-            0
-          ) / validActualPriceItems.length
-        : 0;
-
     return {
       totalQuantity,
       totalWeight,
       avgWeight,
-      avgSalesPrice,
+      avgPricePartner,
-      totalSalesPrice,
+      totalPartner,
-      avgActualPrice,
-      totalActualPrice,
     };
   }, [salesData]);
 
@@ -112,11 +86,7 @@ const SalesReportTable = ({ initialValues }: SalesReportTableProps) => {
         id: 'age',
         accessorKey: 'age',
         header: 'Umur',
-        cell: (props) => {
+        cell: (props) => props.getValue() || '-',
-          const age = props.row.original.age;
-          const week = props.row.original.week;
-          return age && week ? `${age} hari (${week} minggu)` : '-';
-        },
       },
       {
         id: 'do_number',
@@ -191,68 +161,50 @@ const SalesReportTable = ({ initialValues }: SalesReportTableProps) => {
         ),
       },
       {
-        id: 'sales_price',
+        id: 'price_partner',
-        accessorKey: 'sales_price',
+        accessorKey: 'price',
-        header: 'Harga Sales (Rp)',
+        header: 'Harga Mitra (Rp)',
         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'>
-            {summary
+            {formatCurrency(totals.avgPricePartner)}
-              ? formatCurrency(summary.avg_sales_price)
-              : formatCurrency(totals.avgSalesPrice)}
           </div>
         ),
       },
       {
-        id: 'total_sales_price',
+        id: 'total_mitra',
-        accessorKey: 'total_sales_price',
+        accessorKey: 'total_price',
-        header: 'Total Sales (Rp)',
+        header: 'Total Mitra (Rp)',
         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'>
-            {summary
+            {formatCurrency(totals.totalPartner)}
-              ? formatCurrency(summary.total_sales_price)
-              : formatCurrency(totals.totalSalesPrice)}
           </div>
         ),
       },
       {
-        id: 'actual_price',
+        id: 'price_act',
-        accessorKey: 'actual_price',
+        accessorKey: 'price',
         header: 'Harga Act (Rp)',
         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'>
-            {summary
-              ? formatCurrency(summary.avg_actual_price)
-              : formatCurrency(totals.avgActualPrice)}
-          </div>
-        ),
       },
       {
-        id: 'total_actual_price',
+        id: 'total_act',
-        accessorKey: 'total_actual_price',
+        accessorKey: 'total_price',
         header: 'Total Act (Rp)',
         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'>
-            {summary
-              ? formatCurrency(summary.total_actual_price)
-              : formatCurrency(totals.totalActualPrice)}
-          </div>
-        ),
       },
       {
         id: 'kandang',
@@ -263,31 +215,31 @@ const SalesReportTable = ({ initialValues }: SalesReportTableProps) => {
           return kandang?.name || '-';
         },
       },
-      // {
+      {
-      //   id: 'payment_status',
+        id: 'payment_status',
-      //   accessorKey: 'payment_status',
+        accessorKey: 'payment_status',
-      //   header: 'Status Pembayaran',
+        header: 'Status Pembayaran',
-      //   cell: (props) => {
+        cell: (props) => {
-      //     const status = props.getValue() as string;
+          const status = props.getValue() as string;
-      //     const getStatusColor = (status: string) => {
+          const getStatusColor = (status: string) => {
-      //       if (!status) return 'neutral';
+            if (!status) return 'neutral';
-      //       switch (status.toLowerCase()) {
+            switch (status.toLowerCase()) {
-      //         case 'paid':
+              case 'paid':
-      //           return 'success';
+                return 'success';
-      //         case 'tempo':
+              case 'tempo':
-      //           return 'warning';
+                return 'warning';
-      //         default:
+              default:
-      //           return 'neutral';
+                return 'neutral';
-      //       }
+            }
-      //     };
+          };
 
-      //     return (
+          return (
-      //       <Badge variant='soft' size='sm' color={getStatusColor(status)}>
+            <Badge variant='soft' size='sm' color={getStatusColor(status)}>
-      //         {status || '-'}
+              {status || '-'}
-      //       </Badge>
+            </Badge>
-      //     );
+          );
-      //   },
+        },
-      // },
+      },
     ],
     []
   );

src/components/pages/dashboard/DashboardProduction.tsx

@@ -1,768 +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 { OptionType, useSelect } from '@/components/input/SelectInput';
-import { useState, useEffect, useRef, useCallback } 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 { generateDashboardPDF } from '@/components/pages/dashboard/export/DashboardPDF';
-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 DashboardExportCharts, {
-  DashboardExportChartsRef,
-} from '@/components/pages/dashboard/export/DashboardExportCharts';
-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';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import Dropdown from '@/components/Dropdown';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
-import { useDashboardStore } from '@/stores/dashboard';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
-import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
-import { useUiStore } from '@/stores/ui/ui.store';
-import { cn } from '@/lib/helper';
-import DashboardExportStats, {
-  DashboardExportStatsRef,
-} from '@/components/pages/dashboard/export/DashboardExportStats';
-
-// 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();
-
-  // ===== DASHBOARD STORE =====
-  const { filterValues, setFilterValues, resetFilterValues } =
-    useDashboardStore();
-
-  // ===== UI STORE (for navbar actions) =====
-  const setNavbarActions = useUiStore((state) => state.setNavbarActions);
-  const clearNavbarActions = useUiStore((state) => state.clearNavbarActions);
-
-  const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
-    (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
-  );
-  const [endpointUrl, setEndpointUrl] = useState('/dashboards');
-  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>(
-    normalizeToArray(filterValues.location)
-  );
-  const [exporting, setExporting] = useState(false);
-  const allChartsRef = useRef<DashboardExportChartsRef>(null);
-  const allStatsRef = useRef<DashboardExportStatsRef>(null);
-
-  // ===== FETCH DATA =====
-  const {
-    data: dashboardProductionResponse,
-    isLoading: isLoadingDashboardProductionData,
-    mutate: refreshDashboardProductionData,
-  } = useSWR(endpointUrl, () =>
-    DashboardApi.getDashboardProductionFetcher(endpointUrl)
-  );
-
-  const dashboardProductionData = isResponseSuccess(dashboardProductionResponse)
-    ? dashboardProductionResponse.data
-    : undefined;
-
-  // ===== SELECT =====
-  const {
-    setInputValue: setInputValueFlock,
-    options: flockOptions,
-    isLoadingOptions: isLoadingFlockOptions,
-    loadMore: loadMoreFlock,
-  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
-    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
-  });
-  const {
-    setInputValue: setInputValueLocation,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocationOptions,
-    loadMore: loadMoreLocation,
-  } = useSelect(LocationApi.basePath, 'id', 'name');
-  const {
-    setInputValue: setInputValueKandang,
-    options: kandangOptions,
-    isLoadingOptions: isLoadingKandangOptions,
-    loadMore: loadMoreKandang,
-  } = useSelect(KandangApi.basePath, 'id', 'name', '', {
-    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: filterValues.startDate ?? '',
-      endDate: filterValues.endDate ?? '',
-      flock: filterValues.flock ?? ([] as OptionType[]),
-      location: filterValues.location ?? ([] as OptionType[]),
-      kandang: filterValues.kandang ?? ([] as OptionType[]),
-      analysisMode: filterValues.analysisMode ?? analysisMode,
-      comparisonType: filterValues.comparisonType ?? '',
-      locationIds: filterValues.locationIds ?? [],
-      flockIds: filterValues.flockIds ?? [],
-      kandangIds: filterValues.kandangIds ?? [],
-    } as DashboardFilterType,
-    enableReinitialize: true,
-    validationSchema: getDashboardFilterSchema(analysisMode),
-    onSubmit: (values) => {
-      // Save filter values to store
-      setFilterValues(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 = useCallback(() => {
-    formik.resetForm();
-    resetFilterValues(); // Clear stored filter values
-    setAnalysisMode('OVERVIEW');
-    setEndpointUrl('/dashboards');
-    setSelectedLocationIds([]);
-  }, [resetFilterValues, filterValues, selectedLocationIds]);
-
-  const handleApplyFilter = (values: DashboardFilter) => {
-    // 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()}`);
-    filterModal.closeModal();
-    refreshDashboardProductionData();
-  };
-
-  // ===== Load filter from store on mount =====
-  useEffect(() => {
-    if (!filterValues) return;
-    handleApplyFilter({
-      start_date: filterValues.startDate,
-      end_date: filterValues.endDate,
-      analysis_mode: filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON',
-      location_ids: normalizeToArray(filterValues.location),
-      flock_ids: normalizeToArray(filterValues.flock),
-      kandang_ids: normalizeToArray(filterValues.kandang),
-      comparison_type: filterValues.comparisonType,
-    });
-  }, [filterValues]);
-
-  // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
-
-  // ===== Export PDF =====
-  const handleExportPDF = async () => {
-    await generateDashboardPDF({
-      filterValues: formik.values,
-      allStatsRef,
-      allChartsRef,
-      setExporting,
-    });
-  };
-
-  // ===== Register Navbar Actions =====
-  const openFilterModalRef = useRef(filterModal.openModal);
-  openFilterModalRef.current = filterModal.openModal;
-
-  useEffect(() => {
-    setNavbarActions(
-      <div className='hidden sm:flex flex-row justify-end gap-3 '>
-        <ButtonFilter
-          values={{
-            ...formik.values,
-            analysisMode: undefined,
-          }}
-          variant='outline'
-          onClick={() => openFilterModalRef.current()}
-        />
-        <Dropdown
-          trigger={
-            <Button
-              variant='outline'
-              color='none'
-              className={cn(
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
-            >
-              <Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
-              </div>
-            </Button>
-          }
-          className={{
-            content: 'w-full mt-1 p-0',
-          }}
-        >
-          <Menu
-            className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
-          >
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={handleExportPDF}
-            />
-          </Menu>
-        </Dropdown>
-      </div>
-    );
-  }, [formik.values, exporting, setNavbarActions]);
-
-  // Cleanup only on unmount
-  useEffect(() => {
-    return () => {
-      clearNavbarActions();
-    };
-  }, [clearNavbarActions]);
-
-  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-3 space-y-3'>
-        <div className='flex sm:hidden flex-row justify-end gap-3 '>
-          <ButtonFilter
-            values={{
-              ...formik.values,
-              analysisMode: undefined,
-            }}
-            variant='outline'
-            onClick={() => openFilterModalRef.current()}
-          />
-          <Dropdown
-            trigger={
-              <Button
-                variant='outline'
-                color='none'
-                className={cn(
-                  'p-2 rounded-lg font-semibold text-sm gap-1.5',
-                  'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-                )}
-              >
-                <Icon
-                  width={20}
-                  height={20}
-                  icon='heroicons:cloud-arrow-down'
-                />
-                Export
-                <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                  <Icon width={14} height={14} icon='heroicons:chevron-down' />
-                </div>
-              </Button>
-            }
-            className={{
-              content:
-                'w-full mt-1 p-0 shadow-button-soft border border-base-content/10 rounded-lg',
-            }}
-          >
-            <Menu
-              className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
-            >
-              <MenuItem
-                className='text-sm p-3'
-                title='PDF'
-                onClick={handleExportPDF}
-              />
-            </Menu>
-          </Dropdown>
-        </div>
-        {/* Dashboard Stats */}
-        <div>
-          <DashboardStats
-            data={dashboardProductionData?.statistics_data ?? []}
-          />
-        </div>
-
-        {/* Use DashboardLineChart component or skeleton */}
-        <div>
-          {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}
-              selectedKandang={
-                analysisMode === 'OVERVIEW'
-                  ? (formik.values.kandang as OptionType)
-                  : undefined
-              }
-            />
-          ) : (
-            <DashboardLineChartSkeleton
-              meta={
-                isResponseSuccess(dashboardProductionResponse)
-                  ? (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  : undefined
-              }
-            />
-          )}
-        </div>
-
-        {/* Hidden container for all charts (used for PDF export in OVERVIEW mode) */}
-        {dashboardProductionData && (
-          <>
-            {/* Export Stats Charts */}
-            <div
-              style={{
-                position: 'absolute',
-                left: '-9999px',
-                top: 0,
-                width: '1200px', // Fixed width for consistent PDF rendering
-              }}
-            >
-              <DashboardExportStats
-                ref={allStatsRef}
-                data={dashboardProductionData?.statistics_data ?? []}
-              />
-            </div>
-
-            {/* Export ALL Charts */}
-            <div
-              style={{
-                position: 'absolute',
-                left: '-9999px',
-                top: 0,
-                width: '1200px', // Fixed width for consistent PDF rendering
-              }}
-            >
-              <DashboardExportCharts
-                ref={allChartsRef}
-                data={dashboardProductionData}
-                analysisMode={
-                  isResponseSuccess(dashboardProductionResponse)
-                    ? dashboardProductionResponse.meta
-                      ? (
-                          dashboardProductionResponse.meta as unknown as DashboardMeta
-                        ).filters?.analysis_mode
-                      : analysisMode
-                    : analysisMode
-                }
-              />
-            </div>
-          </>
-        )}
-      </section>
-
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem]',
-        }}
-      >
-        <div className='flex flex-col'>
-          {/* Modal Header */}
-          <div className='flex items-center justify-between p-4 border-b border-base-content/10'>
-            <div className='flex items-center gap-2 text-primary'>
-              <Icon icon='heroicons:funnel' width={20} height={20} />
-              <h3 className='font-medium text-sm'>Filter Data</h3>
-            </div>
-            <Button
-              variant='link'
-              onClick={() => filterModal.closeModal()}
-              className='text-gray-500 hover:text-gray-700'
-            >
-              <Icon icon='heroicons:x-mark' width={20} height={20} />
-            </Button>
-          </div>
-
-          <form
-            className='flex flex-col'
-            onSubmit={handleFormSubmit}
-            onReset={handleResetFilter}
-          >
-            <div className='flex flex-col p-4 gap-1.5'>
-              {/* Rentang Waktu */}
-              <div>
-                <label className='flex text-xs items-center gap-2 py-2 font-semibold'>
-                  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}
-                    isError={
-                      Boolean(formik.errors.startDate) &&
-                      Boolean(formik.touched.startDate)
-                    }
-                  />
-                  <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
-                  <DateInput
-                    name='endDate'
-                    placeholder='Tanggal Akhir'
-                    value={formik.values.endDate}
-                    errorMessage={formik.errors.endDate}
-                    onChange={formik.handleChange}
-                    isError={
-                      Boolean(formik.errors.endDate) &&
-                      Boolean(formik.touched.endDate)
-                    }
-                  />
-                </div>
-              </div>
-
-              {/* Analysis Mode */}
-              <div>
-                <label className='block py-2 text-xs font-semibold'>
-                  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 flex flex-row items-center font-medium text-base-content/50',
-                    radioWrapper: 'w-full grid grid-cols-2 gap-0 p-0',
-                  }}
-                >
-                  <RadioGroupItem
-                    color='primary'
-                    value='OVERVIEW'
-                    label='Performance Overview'
-                    className='w-full p-3'
-                  />
-                  <RadioGroupItem
-                    color='primary'
-                    value='COMPARISON'
-                    label='Performance Comparison'
-                    className='w-full p-3'
-                  />
-                </RadioGroup>
-              </div>
-
-              {formik.values.analysisMode === 'COMPARISON' && (
-                <SelectInputRadio
-                  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)
-                  }
-                  className={{
-                    select: 'rounded-lg text-sm border-base-content/10',
-                  }}
-                />
-              )}
-
-              {/* Location */}
-              {comparisonTypeOptions.find(
-                (option) => option.value === formik.values.comparisonType
-              )?.value === 'FARM' ? (
-                <SelectInputCheckbox
-                  label='Farm'
-                  value={
-                    formik.values.location as
-                      | { value: number; label: string }
-                      | { value: number; label: string }[]
-                      | null
-                      | undefined
-                  }
-                  onInputChange={setInputValueLocation}
-                  onMenuScrollToBottom={loadMoreLocation}
-                  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}
-                  isError={
-                    Boolean(formik.errors.location) &&
-                    Boolean(formik.touched.location)
-                  }
-                  className={{
-                    select: 'rounded-lg text-sm border-base-content/10',
-                  }}
-                />
-              ) : (
-                <SelectInputRadio
-                  label='Farm'
-                  value={
-                    formik.values.location as
-                      | { value: number; label: string }
-                      | { value: number; label: string }[]
-                      | null
-                      | undefined
-                  }
-                  onInputChange={setInputValueLocation}
-                  onMenuScrollToBottom={loadMoreLocation}
-                  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}
-                  isError={
-                    Boolean(formik.errors.location) &&
-                    Boolean(formik.touched.location)
-                  }
-                  className={{
-                    select: 'rounded-lg text-sm border-base-content/10',
-                  }}
-                />
-              )}
-
-              {/* Flock */}
-              {!(
-                formik.values.analysisMode === 'COMPARISON' &&
-                !(
-                  formik.values.comparisonType === 'FLOCK' ||
-                  formik.values.comparisonType === 'KANDANG'
-                )
-              ) && (
-                <>
-                  {comparisonTypeOptions.find(
-                    (option) => option.value === formik.values.comparisonType
-                  )?.value === 'FLOCK' ? (
-                    <SelectInputCheckbox
-                      label='Flock'
-                      value={
-                        formik.values.flock as
-                          | { value: number; label: string }
-                          | { value: number; label: string }[]
-                          | null
-                          | undefined
-                      }
-                      onChange={(selected) =>
-                        formik.setFieldValue('flock', selected)
-                      }
-                      errorMessage={formik.errors.flock as string}
-                      onInputChange={setInputValueFlock}
-                      onMenuScrollToBottom={loadMoreFlock}
-                      options={flockOptions}
-                      isLoading={isLoadingFlockOptions}
-                      isError={
-                        Boolean(formik.errors.flock) &&
-                        Boolean(formik.touched.flock)
-                      }
-                      className={{
-                        select: 'rounded-lg text-sm border-base-content/10',
-                      }}
-                    />
-                  ) : (
-                    <SelectInputRadio
-                      label='Flock'
-                      value={
-                        formik.values.flock as
-                          | { value: number; label: string }
-                          | { value: number; label: string }[]
-                          | null
-                          | undefined
-                      }
-                      onChange={(selected) =>
-                        formik.setFieldValue('flock', selected)
-                      }
-                      errorMessage={formik.errors.flock as string}
-                      onInputChange={setInputValueFlock}
-                      onMenuScrollToBottom={loadMoreFlock}
-                      options={flockOptions}
-                      isLoading={isLoadingFlockOptions}
-                      isError={
-                        Boolean(formik.errors.flock) &&
-                        Boolean(formik.touched.flock)
-                      }
-                      className={{
-                        select: 'rounded-lg text-sm border-base-content/10',
-                      }}
-                    />
-                  )}
-                </>
-              )}
-
-              {/* Kandang */}
-              {!(
-                formik.values.analysisMode === 'COMPARISON' &&
-                !(formik.values.comparisonType === 'KANDANG')
-              ) && (
-                <>
-                  {comparisonTypeOptions.find(
-                    (option) => option.value === formik.values.comparisonType
-                  )?.value === 'KANDANG' ? (
-                    <SelectInputCheckbox
-                      label='Kandang'
-                      value={
-                        formik.values.kandang as
-                          | { value: number; label: string }
-                          | { value: number; label: string }[]
-                          | null
-                          | undefined
-                      }
-                      onChange={(selected) =>
-                        formik.setFieldValue('kandang', selected)
-                      }
-                      errorMessage={formik.errors.kandang as string}
-                      onInputChange={setInputValueKandang}
-                      onMenuScrollToBottom={loadMoreKandang}
-                      options={kandangOptions}
-                      isLoading={isLoadingKandangOptions}
-                      isError={
-                        Boolean(formik.errors.kandang) &&
-                        Boolean(formik.touched.kandang)
-                      }
-                      className={{
-                        select: 'rounded-lg text-sm border-base-content/10',
-                      }}
-                    />
-                  ) : (
-                    <SelectInputRadio
-                      label='Kandang'
-                      value={
-                        formik.values.kandang as
-                          | { value: number; label: string }
-                          | { value: number; label: string }[]
-                          | null
-                          | undefined
-                      }
-                      onChange={(selected) =>
-                        formik.setFieldValue('kandang', selected)
-                      }
-                      errorMessage={formik.errors.kandang as string}
-                      onInputChange={setInputValueKandang}
-                      onMenuScrollToBottom={loadMoreKandang}
-                      options={kandangOptions}
-                      isLoading={isLoadingKandangOptions}
-                      isError={
-                        Boolean(formik.errors.kandang) &&
-                        Boolean(formik.touched.kandang)
-                      }
-                      className={{
-                        select: 'rounded-lg text-sm border-base-content/10',
-                      }}
-                    />
-                  )}
-                </>
-              )}
-
-              {formErrorList.length > 0 && (
-                <div className='w-full'>
-                  <AlertErrorList
-                    formErrorList={formErrorList}
-                    onClose={close}
-                  />
-                </div>
-              )}
-            </div>
-
-            {/* Action Buttons */}
-            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
-              <Button
-                type='reset'
-                variant='soft'
-                className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
-              >
-                Reset Filter
-              </Button>
-              <Button
-                type='submit'
-                className='min-w-40 text-sm p-3 text-white rounded-lg'
-              >
-                Apply Filter
-              </Button>
-            </div>
-          </form>
-        </div>
-      </Modal>
-    </>
-  );
-};
-
-export default DashboardProduction;

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

@@ -1,753 +0,0 @@
-import Button from '@/components/Button';
-import Card from '@/components/Card';
-import Dropdown from '@/components/Dropdown';
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import { OptionType } from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
-import { formatNumber } from '@/lib/helper';
-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;
-  selectedKandang?: OptionType;
-};
-
-// Type guard to check if charts is DashboardOverviewCharts
-function isOverviewCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
-): charts is DashboardOverviewCharts {
-  if (!charts) return false;
-  return (
-    'deplesi' in charts ||
-    'body_weight' in charts ||
-    'fcr' in charts ||
-    'performance' in charts ||
-    'quality_control' in charts
-  );
-}
-
-// Type guard to check if charts is DashboardComparisonCharts
-function isComparisonCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
-): charts is DashboardComparisonCharts {
-  if (!charts) return false;
-  return 'farm' 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: '#F52419',
-  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,
-  selectedKandang,
-}: 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.farm || 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 p-0',
-        body: 'p-4',
-      }}
-      variant='bordered'
-    >
-      <div className='flex flex-col sm:flex-row justify-between items-start gap-4 mb-3'>
-        <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'
-            className={{
-              content: 'mt-1 min-w-full',
-            }}
-            trigger={
-              <Button
-                variant='outline'
-                color='none'
-                className='py-2.5 pl-3 pr-2 text-base-content/50 rounded-lg text-sm border-base-content/10 shadow-button-soft'
-                onClick={() => setOpen(!open)}
-              >
-                {chartTypeLabels[chartData]}{' '}
-                <div className='w-6 h-5 flex items-center justify-center border-l border-base-content/10'>
-                  <Icon icon='heroicons:chevron-down' width={14} height={14} />
-                </div>
-              </Button>
-            }
-            controlled={open}
-          >
-            <Menu className='p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg'>
-              <MenuItem
-                title='Body weight'
-                className='text-sm padding-3 whitespace-nowrap'
-                onClick={() => {
-                  setChartData('body_weight');
-                  setOpen(!open);
-                }}
-              />
-              <MenuItem
-                title='Performance'
-                className='text-sm padding-3 whitespace-nowrap'
-                onClick={() => {
-                  setChartData('performance');
-                  setOpen(!open);
-                }}
-              />
-              <MenuItem
-                title='FCR'
-                className='text-sm padding-3 whitespace-nowrap'
-                onClick={() => {
-                  setChartData('fcr');
-                  setOpen(!open);
-                }}
-              />
-              <MenuItem
-                title='Quality Control'
-                className='text-sm padding-3 whitespace-nowrap'
-                onClick={() => {
-                  setChartData('quality_control');
-                  setOpen(!open);
-                }}
-              />
-              <MenuItem
-                title='Deplesi'
-                className='text-sm padding-3 whitespace-nowrap'
-                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.farm || 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}-${index}`}
-                onClick={() => {
-                  const newVisible = new Set(visibleSeries);
-                  if (isVisible) {
-                    newVisible.delete(series.id);
-                  } else {
-                    newVisible.add(series.id);
-                  }
-                  setVisibleSeries(newVisible);
-                }}
-                variant='outline'
-                color='none'
-                className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${
-                  isVisible
-                    ? 'border-base-content/10 hover:bg-base-content/4'
-                    : 'border-base-content/10 bg-base-content/4'
-                }`}
-              >
-                <div
-                  className={`w-5 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={`font-semibold text-sm ${isVisible ? 'text-base-content/50' : 'text-base-content/50'}`}
-                >
-                  {series.label}
-                </span>
-                <Icon
-                  icon='heroicons:eye'
-                  width={16}
-                  height={16}
-                  className='text-base-content/40'
-                />
-              </Button>
-            );
-          });
-        })()}
-      </div>
-
-      {/* Chart Container with Empty State Overlay */}
-      <div className='relative'>
-        {/* 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.farm ||
-                    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: 12,
-                fill: '#18181B',
-                opacity: 0.5,
-                fontWeight: 600,
-              }}
-              tickLine={false}
-              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
-              label={{
-                value: 'Weeks',
-                position: 'insideBottom',
-                offset: -5,
-                style: {
-                  fontSize: 12,
-                  fill: '#18181B',
-                  opacity: 0.2,
-                  fontWeight: 600,
-                },
-              }}
-            />
-            <YAxis
-              tick={{
-                fontSize: 12,
-                fill: '#18181B',
-                opacity: 0.5,
-                fontWeight: 600,
-              }}
-              label={
-                (chartData === 'body_weight' || chartData === 'performance') &&
-                analysisMode === 'OVERVIEW'
-                  ? {
-                      value:
-                        chartData === 'body_weight'
-                          ? 'Body Weight'
-                          : 'Percentage',
-                      position: 'insideLeft',
-                      angle: -90,
-                      offset: 5,
-                      style: {
-                        fontSize: 12,
-                        fill: '#18181B',
-                        opacity: 0.2,
-                        fontWeight: 600,
-                      },
-                    }
-                  : analysisMode === 'COMPARISON'
-                    ? {
-                        value: 'Percentage',
-                        position: 'insideLeft',
-                        angle: -90,
-                        offset: 5,
-                        style: {
-                          fontSize: 12,
-                          fill: '#18181B',
-                          opacity: 0.2,
-                          fontWeight: 600,
-                        },
-                      }
-                    : undefined
-              }
-              tickLine={false}
-              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
-              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.farm ||
-                    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 dataset: DashboardChartsDataset[] = [];
-
-                if (
-                  analysisMode === 'OVERVIEW' &&
-                  isOverviewCharts(data.charts)
-                ) {
-                  dataset = data.charts[chartData]?.dataset || [];
-                } else if (
-                  analysisMode === 'COMPARISON' &&
-                  isComparisonCharts(data.charts)
-                ) {
-                  const comparisonChart =
-                    data.charts.farm ||
-                    data.charts.flock ||
-                    data.charts.kandang;
-                  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);
-
-                // Handle edge case where min equals max
-                if (minValue === maxValue) {
-                  const value = Math.round(minValue);
-                  const padding = Math.max(10, Math.abs(value) * 0.2);
-                  return [
-                    Math.floor(value - padding),
-                    Math.floor(value - padding / 2),
-                    value,
-                    Math.ceil(value + padding / 2),
-                    Math.ceil(value + padding),
-                  ];
-                }
-
-                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;
-
-                // Use Set to ensure unique values
-                const tickSet = new Set([
-                  domainMin,
-                  Math.round(domainMin + step),
-                  Math.round(domainMin + step * 2),
-                  Math.round(domainMin + step * 3),
-                  domainMax,
-                ]);
-
-                return Array.from(tickSet).sort((a, b) => a - b);
-              })()}
-              tickFormatter={(value) => formatNumber(Number(value))}
-            />
-            <Tooltip
-              contentStyle={{
-                backgroundColor: '#1f2937',
-                border: 'none',
-                borderRadius: '8px',
-                padding: '12px 12px',
-                color: 'white',
-              }}
-              labelStyle={{ color: 'white', marginBottom: '4px' }}
-              itemStyle={{ color: 'white', fontSize: '12px' }}
-              labelFormatter={(value) => `Week ${value}`}
-              content={(props) => {
-                return (
-                  <div className='flex flex-col gap-1.5 rounded-lg bg-neutral-950 p-4  text-white'>
-                    <p className='text-white/50 text-xs font-semibold text-start'>
-                      {analysisMode === 'OVERVIEW'
-                        ? selectedKandang
-                          ? selectedKandang.label || 'Overview Performance'
-                          : 'Overview Performance'
-                        : 'Comparison Performance'}
-                    </p>
-                    <ul className='flex flex-col gap-1'>
-                      {props.payload.map((item, index) => {
-                        if (item.name.startsWith('STD. ')) return null;
-                        // 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.farm ||
-                            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 === item.name
-                        );
-                        const color = series?.id
-                          ? getLineColor(series.id, index, analysisMode)
-                          : '#9ca3af';
-                        const unit = series?.unit;
-
-                        return (
-                          <li
-                            key={`${item.name}-${index}`}
-                            className='flex w-full justify-between items-center flex-row gap-y-1.5 gap-x-3 p-0'
-                          >
-                            <span className='flex flex-row gap-1.5 items-center'>
-                              <div
-                                className='h-5 w-5 m-0 rounded'
-                                style={{
-                                  backgroundColor: color,
-                                }}
-                              ></div>
-                              <div className='m-0'>
-                                {formatNumber(item.value)}
-                                {unit}
-                              </div>
-                            </span>
-                            <span className='m-0'>{item.name}</span>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                    <p className='text-white/50 text-xs text-start'>
-                      Week {props.label}
-                    </p>
-                  </div>
-                );
-              }}
-              formatter={(
-                value: number | undefined,
-                name: string | undefined
-              ) => {
-                if (
-                  value === undefined ||
-                  name === undefined ||
-                  name.startsWith('STD. ')
-                )
-                  return [undefined, undefined];
-
-                // 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.farm ||
-                    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 id = series?.id || '';
-
-                return [value, id];
-              }}
-            />
-            {/* 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.farm || data.charts.flock || data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-              }
-
-              return seriesData.map((series, originalIndex) => {
-                // Skip rendering if series is not visible
-                if (!visibleSeries.has(series.id)) {
-                  return null;
-                }
-
-                const isStandard = series.id
-                  .toString()
-                  .toLowerCase()
-                  .includes('std');
-                const dataKey = series.id.toString();
-
-                return (
-                  <Line
-                    key={`${series.id}--${originalIndex}`}
-                    type='monotone'
-                    dataKey={dataKey}
-                    name={series.label}
-                    stroke={getLineColor(
-                      series.id,
-                      originalIndex,
-                      analysisMode
-                    )}
-                    opacity={isStandard ? 0.5 : 1}
-                    strokeWidth={2}
-                    strokeDasharray={isStandard ? '5 5' : undefined}
-                    dot={
-                      isStandard
-                        ? false
-                        : {
-                            r: 3,
-                            fill: '#fff',
-                            stroke: getLineColor(
-                              series.id,
-                              originalIndex,
-                              analysisMode
-                            ),
-                            strokeWidth: 2,
-                          }
-                    }
-                    activeDot={isStandard ? undefined : { r: 5 }}
-                  />
-                );
-              });
-            })()}
-          </LineChart>
-        </ResponsiveContainer>
-
-        {/* Empty State Overlay */}
-        {(() => {
-          // Get current dataset
-          let dataset: DashboardChartsDataset[] = [];
-
-          if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
-            dataset = data.charts[chartData]?.dataset || [];
-          } else if (
-            analysisMode === 'COMPARISON' &&
-            isComparisonCharts(data.charts)
-          ) {
-            const comparisonChart =
-              data.charts.farm || data.charts.flock || data.charts.kandang;
-            dataset = comparisonChart?.dataset || [];
-          }
-
-          // Show empty state if dataset is empty
-          if (dataset.length === 0) {
-            return (
-              <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
-                {/* Chart icon */}
-                <DataStateSkeleton
-                  icon={
-                    <Icon
-                      icon='heroicons:chart-bar'
-                      className='text-white'
-                      width={20}
-                      height={20}
-                    />
-                  }
-                  title='Data Not Yet Available'
-                  description='Please change your filters to get the data.'
-                />
-              </div>
-            );
-          }
-          return null;
-        })()}
-      </div>
-    </Card>
-  );
-};
-
-export default DashboardLineChart;

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

@@ -1,177 +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 Telur',
-    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-[#008000]' : 'text-[#FF3A3A]',
-      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-base-content/50'>
-            {suffix}
-          </span>
-        )}
-      </>
-    );
-  };
-
-  return (
-    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-3'>
-      {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-xl border border-base-content/10',
-                body: 'p-0',
-                wrapperContent:
-                  'h-full flex flex-col items-between justify-between',
-                footer: 'mt-0!',
-              }}
-              variant='bordered'
-              footer={
-                <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
-                  <div className='text-base-content/50 font-semibold text-xs'>
-                    From last month
-                  </div>
-                  <div className='text-base-content/50 font-semibold text-xs'>
-                    Filter Required
-                  </div>
-                </div>
-              }
-            >
-              <div className='flex flex-row items-center gap-3 px-4 py-4'>
-                <Alert
-                  variant='soft'
-                  className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
-                >
-                  <Icon
-                    icon={config.icon}
-                    width={24}
-                    height={24}
-                    className='text-base-content/50'
-                  />
-                </Alert>
-                <div>
-                  <h3 className='text-base-content/50 font-semibold text-sm'>
-                    {config.key}
-                  </h3>
-                  <p className='text-xl font-semibold text-base-content/50'>
-                    ********
-                  </p>
-                </div>
-              </div>
-            </Card>
-          );
-        }
-
-        const trend = getTrendDisplay(cardData.percent_last_month);
-
-        return (
-          <Card
-            key={config.key}
-            className={{
-              wrapper: 'w-full rounded-xl border border-base-content/10',
-              body: 'p-0',
-              wrapperContent:
-                'h-full flex flex-col items-between justify-between',
-              footer: 'mt-0!',
-            }}
-            variant='bordered'
-            footer={
-              <div className='flex flex-row justify-between px-4 pb-4'>
-                <div className='text-base-content/50 font-semibold text-xs'>
-                  From last month
-                </div>
-                <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
-                >
-                  <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 bg-[${config.alertColor}]/12 flex items-center justify-center`}
-              >
-                <Icon icon={config.icon} width={24} height={24} />
-              </Alert>
-              <div className='space-y-1'>
-                <h3 className='text-base-content/50 font-semibold text-sm'>
-                  {cardData.label}
-                </h3>
-                <p className='text-xl font-semibold'>
-                  {formatValue(cardData.value, config.prefix, config.suffix)}
-                </p>
-              </div>
-            </div>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};
-
-export default DashboardStats;

src/components/pages/dashboard/export/DashboardExportCharts.tsx

@@ -1,344 +0,0 @@
-import Card from '@/components/Card';
-import {
-  Dashboard,
-  DashboardOverviewCharts,
-  DashboardComparisonCharts,
-  DashboardChartsSeries,
-  DashboardChartsDataset,
-} from '@/types/api/dashboard/dashboard';
-import { Icon } from '@iconify/react';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import {
-  CartesianGrid,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-type DashboardExportChartsProps = {
-  data: Dashboard;
-  analysisMode: string;
-};
-
-export type DashboardExportChartsRef = {
-  getChartRefs: () => {
-    key: string;
-    ref: HTMLDivElement | null;
-    label: string;
-  }[];
-};
-
-// Type guard to check if charts is DashboardOverviewCharts
-function isOverviewCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
-): charts is DashboardOverviewCharts {
-  if (!charts) return false;
-  return (
-    'deplesi' in charts ||
-    'body_weight' in charts ||
-    'fcr' in charts ||
-    'performance' in charts ||
-    'quality_control' in charts
-  );
-}
-
-// Type guard to check if charts is DashboardComparisonCharts
-function isComparisonCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
-): charts is DashboardComparisonCharts {
-  if (!charts) return false;
-  return 'farm' 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: '#F52419',
-  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): string => {
-  const predefinedColor = lineColors[seriesId];
-  if (predefinedColor) {
-    return predefinedColor;
-  }
-  return defaultLineColors[index % defaultLineColors.length];
-};
-
-// 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',
-};
-
-const DashboardExportCharts = forwardRef<
-  DashboardExportChartsRef,
-  DashboardExportChartsProps
->(({ data, analysisMode }, ref) => {
-  // Create refs for charts - use string keys for flexibility
-  const chartRefs = useRef<{
-    [key: string]: HTMLDivElement | null;
-  }>({});
-
-  // Determine chart keys and labels based on analysis mode
-  const getChartConfig = () => {
-    if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
-      const overviewKeys: (keyof DashboardOverviewCharts)[] = [
-        'body_weight',
-        'performance',
-        'fcr',
-        'quality_control',
-        'deplesi',
-      ];
-      return overviewKeys.map((key) => ({
-        key,
-        label: chartTypeLabels[key],
-        chartData: (data.charts as DashboardOverviewCharts)[key],
-      }));
-    } else if (
-      analysisMode === 'COMPARISON' &&
-      isComparisonCharts(data.charts)
-    ) {
-      // For comparison mode, find which comparison type has data
-      const comparisonKey = data.charts.farm
-        ? 'farm'
-        : data.charts.flock
-          ? 'flock'
-          : 'kandang';
-
-      const comparisonLabels: Record<string, string> = {
-        farm: 'Farm Comparison',
-        flock: 'Flock Comparison',
-        kandang: 'Kandang Comparison',
-      };
-
-      return [
-        {
-          key: comparisonKey,
-          label: comparisonLabels[comparisonKey],
-          chartData: data.charts[comparisonKey],
-        },
-      ];
-    }
-    return [];
-  };
-
-  const chartConfig = getChartConfig();
-
-  // Expose method to get all chart refs
-  useImperativeHandle(ref, () => ({
-    getChartRefs: () => {
-      return chartConfig
-        .map(({ key, label }) => ({
-          key,
-          ref: chartRefs.current[key] || null,
-          label,
-        }))
-        .filter((item) => item.ref !== null);
-    },
-  }));
-
-  return (
-    <div className='space-y-6'>
-      {chartConfig.map(({ key, label, chartData }) => {
-        if (
-          !chartData ||
-          !chartData.dataset ||
-          chartData.dataset.length === 0
-        ) {
-          return null;
-        }
-
-        const seriesData: DashboardChartsSeries[] = chartData.series || [];
-        const dataset: DashboardChartsDataset[] = chartData.dataset || [];
-
-        return (
-          <div
-            key={key}
-            ref={(el: HTMLDivElement | null) => {
-              chartRefs.current[key] = el;
-            }}
-          >
-            <Card
-              className={{
-                wrapper: 'w-full rounded-lg p-0',
-                body: 'p-4',
-              }}
-              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'>
-                  {label}{' '}
-                  <Icon
-                    icon='heroicons:information-circle'
-                    width={20}
-                    height={20}
-                    className='inline text-neutral-500'
-                  />
-                </div>
-              </div>
-
-              {/* Legend */}
-              <div className='flex flex-wrap gap-3 mb-6'>
-                {seriesData.map((series, index) => {
-                  const isStandard = series.id
-                    .toString()
-                    .toLowerCase()
-                    .includes('std');
-
-                  return (
-                    <div
-                      key={series.id}
-                      className='flex items-center gap-2 px-3 py-2 rounded-lg border border-neutral-400 bg-neutral-50'
-                    >
-                      <div
-                        className={`w-6 h-0.5 ${
-                          isStandard ? 'border-t-2 border-dashed' : ''
-                        }`}
-                        style={{
-                          backgroundColor: isStandard
-                            ? 'transparent'
-                            : getLineColor(series.id, index),
-                          borderColor: isStandard
-                            ? getLineColor(series.id, index)
-                            : 'transparent',
-                        }}
-                      ></div>
-                      <span className='text-sm text-neutral-900 font-medium'>
-                        {series.label}
-                      </span>
-                      <Icon
-                        icon='heroicons:information-circle'
-                        width={16}
-                        height={16}
-                        className='text-neutral-400'
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* Chart */}
-              <ResponsiveContainer width='100%' height={350}>
-                <LineChart
-                  data={dataset}
-                  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={(() => {
-                      const allValues: number[] = [];
-                      dataset.forEach((item: DashboardChartsDataset) => {
-                        seriesData.forEach((series) => {
-                          const value = item[series.id];
-                          if (typeof value === 'number') {
-                            allValues.push(value);
-                          }
-                        });
-                      });
-
-                      if (allValues.length === 0) return [0, 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);
-
-                      return [domainMin, domainMax];
-                    })()}
-                  />
-                  {seriesData.map((series, index) => {
-                    const isStandard = series.id
-                      .toString()
-                      .toLowerCase()
-                      .includes('std');
-                    const dataKey = series.id.toString();
-
-                    return (
-                      <Line
-                        key={series.id}
-                        type='monotone'
-                        dataKey={dataKey}
-                        name={series.label}
-                        stroke={getLineColor(series.id, index)}
-                        opacity={isStandard ? 0.5 : 1}
-                        strokeWidth={2}
-                        strokeDasharray={isStandard ? '5 5' : undefined}
-                        dot={
-                          isStandard
-                            ? false
-                            : {
-                                r: 3,
-                                fill: '#fff',
-                                stroke: getLineColor(series.id, index),
-                                strokeWidth: 2,
-                              }
-                        }
-                        activeDot={isStandard ? undefined : { r: 5 }}
-                      />
-                    );
-                  })}
-                </LineChart>
-              </ResponsiveContainer>
-            </Card>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
-
-DashboardExportCharts.displayName = 'DashboardExportCharts';
-
-export default DashboardExportCharts;

src/components/pages/dashboard/export/DashboardExportStats.tsx

@@ -1,197 +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';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-interface DashboardStatsProps {
-  data: DashboardStatisticsData[];
-}
-export type DashboardExportStatsRef = {
-  getStatsRefs: () => {
-    key: string;
-    ref: HTMLDivElement | null;
-    label: string;
-  }[];
-  getContainerRef: () => HTMLDivElement | null;
-};
-
-// 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 DashboardExportStats = forwardRef<
-  DashboardExportStatsRef,
-  DashboardStatsProps
->(({ data }, ref) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  // 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-[#008000]' : 'text-[#FF3A3A]',
-      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-base-content/50'>
-            {suffix}
-          </span>
-        )}
-      </>
-    );
-  };
-
-  // Expose container ref through imperative handle
-  useImperativeHandle(ref, () => ({
-    getStatsRefs: () => [],
-    getContainerRef: () => containerRef.current,
-  }));
-
-  return (
-    <div ref={containerRef} className='grid grid-cols-4 gap-3'>
-      {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',
-                wrapperContent:
-                  'h-full flex flex-col items-between justify-between',
-                footer: 'mt-0!',
-              }}
-              variant='bordered'
-              footer={
-                <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
-                  <div className='text-base-content/50 font-semibold text-xs'>
-                    From last month
-                  </div>
-                  <div className='text-base-content/50 font-semibold text-xs'>
-                    Filter Required
-                  </div>
-                </div>
-              }
-            >
-              <div className='flex flex-row items-center gap-3 px-4 pt-4'>
-                <Alert
-                  variant='soft'
-                  className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
-                >
-                  <Icon
-                    icon={config.icon}
-                    width={24}
-                    height={24}
-                    className='text-base-content/50'
-                  />
-                </Alert>
-                <div>
-                  <h3 className='text-base-content/50 font-semibold text-sm'>
-                    {config.key}
-                  </h3>
-                  <p className='text-xl font-semibold text-base-content/50'>
-                    ********
-                  </p>
-                </div>
-              </div>
-            </Card>
-          );
-        }
-
-        const trend = getTrendDisplay(cardData.percent_last_month);
-
-        return (
-          <Card
-            key={config.key}
-            className={{
-              wrapper: 'w-full rounded-lg border border-base-content/10',
-              body: 'p-0',
-              wrapperContent:
-                'h-full flex flex-col items-between justify-between',
-              footer: 'mt-0!',
-            }}
-            variant='bordered'
-            footer={
-              <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
-                <div className='text-base-content/50 font-semibold text-xs'>
-                  From last month
-                </div>
-                <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
-                >
-                  <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-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
-              >
-                <Icon icon={config.icon} width={24} height={24} />
-              </Alert>
-              <div>
-                <h3 className='text-base-content/50 font-semibold text-sm'>
-                  {cardData.label}
-                </h3>
-                <p className='text-xl font-semibold'>
-                  {formatValue(cardData.value, config.prefix, config.suffix)}
-                </p>
-              </div>
-            </div>
-          </Card>
-        );
-      })}
-    </div>
-  );
-});
-
-DashboardExportStats.displayName = 'DashboardExportStats';
-
-export default DashboardExportStats;

src/components/pages/dashboard/export/DashboardPDF.ts

@@ -1,266 +0,0 @@
-import jsPDF from 'jspdf';
-import { toPng } from 'html-to-image';
-import toast from 'react-hot-toast';
-import { formatDate } from '@/lib/helper';
-import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
-import { DashboardExportChartsRef } from '@/components/pages/dashboard/export/DashboardExportCharts';
-import { DashboardExportStatsRef } from '@/components/pages/dashboard/export/DashboardExportStats';
-
-interface DashboardPDFExportParams {
-  filterValues: DashboardFilterType;
-  allStatsRef: React.RefObject<DashboardExportStatsRef | null>;
-  allChartsRef: React.RefObject<DashboardExportChartsRef | null>;
-  setExporting: (value: boolean) => void;
-}
-
-export const generateDashboardPDF = async ({
-  filterValues,
-  allStatsRef,
-  allChartsRef,
-  setExporting,
-}: DashboardPDFExportParams): Promise<void> => {
-  try {
-    setExporting(true);
-    toast.loading('Generating PDF...', { id: 'export-pdf' });
-
-    // Wait for DOM to update
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    const pdf = new jsPDF('p', 'mm', 'a4');
-    const pageWidth = pdf.internal.pageSize.getWidth();
-    const pageHeight = pdf.internal.pageSize.getHeight();
-    const margin = 10;
-    let yPosition = margin;
-
-    // Add title
-    pdf.setFontSize(16);
-    pdf.setFont('helvetica', 'bold');
-    pdf.text('Dashboard Produksi', margin, yPosition);
-    yPosition += 10;
-
-    // Add filter information (horizontal layout)
-    pdf.setFontSize(6);
-    pdf.setFont('helvetica', 'normal');
-
-    const filterItems: string[] = [];
-
-    // Period
-    if (filterValues.startDate || filterValues.endDate) {
-      const periodText = `Periode: ${
-        filterValues.startDate
-          ? formatDate(filterValues.startDate, 'DD MMM YYYY')
-          : '-'
-      } s.d ${
-        filterValues.endDate
-          ? formatDate(filterValues.endDate, 'DD MMM YYYY')
-          : '-'
-      }`;
-      filterItems.push(periodText);
-    }
-
-    // Analysis Mode
-    const analysisModeText = `Analysis Mode: ${
-      filterValues.analysisMode === 'OVERVIEW'
-        ? 'Performance Overview'
-        : 'Performance Comparison'
-    }`;
-    filterItems.push(analysisModeText);
-
-    // Comparison Type (only for COMPARISON mode)
-    if (
-      filterValues.analysisMode === 'COMPARISON' &&
-      filterValues.comparisonType
-    ) {
-      const comparisonTypeLabel =
-        filterValues.comparisonType === 'FARM'
-          ? 'Farm'
-          : filterValues.comparisonType === 'FLOCK'
-            ? 'Flock'
-            : filterValues.comparisonType === 'KANDANG'
-              ? 'Kandang'
-              : filterValues.comparisonType;
-      filterItems.push(`Compared By: ${comparisonTypeLabel}`);
-    }
-
-    // Farm
-    if (filterValues.location) {
-      const locationText = Array.isArray(filterValues.location)
-        ? filterValues.location.map((loc) => loc.label).join(', ')
-        : filterValues.location.label;
-      filterItems.push(`Farm: ${locationText || '-'}`);
-    }
-
-    // Flock
-    if (
-      filterValues.flock &&
-      (Array.isArray(filterValues.flock)
-        ? filterValues.flock.length > 0
-        : filterValues.flock)
-    ) {
-      const flockText = Array.isArray(filterValues.flock)
-        ? filterValues.flock.map((f) => f.label).join(', ')
-        : filterValues.flock.label;
-      filterItems.push(`Flock: ${flockText || '-'}`);
-    }
-
-    // Kandang
-    if (
-      filterValues.kandang &&
-      (Array.isArray(filterValues.kandang)
-        ? filterValues.kandang.length > 0
-        : filterValues.kandang)
-    ) {
-      const kandangText = Array.isArray(filterValues.kandang)
-        ? filterValues.kandang.map((k) => k.label).join(', ')
-        : filterValues.kandang.label;
-      filterItems.push(`Kandang: ${kandangText || '-'}`);
-    }
-
-    // Generated timestamp
-    filterItems.push(`Dicetak: ${formatDate(new Date(), 'DD MMM YYYY HH:mm')}`);
-
-    // Render filter items horizontally with word wrap and gray background
-    const maxWidth = pageWidth - 2 * margin;
-    let currentLine = '';
-    const lines: string[] = [];
-
-    // First pass: calculate all lines
-    filterItems.forEach((item, index) => {
-      const separator = index > 0 ? ' | ' : '';
-      const testLine = currentLine + separator + item;
-      const testWidth = pdf.getTextWidth(testLine);
-
-      if (testWidth > maxWidth && currentLine !== '') {
-        lines.push(currentLine);
-        currentLine = item;
-      } else {
-        currentLine = testLine;
-      }
-    });
-
-    // Add last line
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-
-    // Calculate background dimensions
-    const lineHeight = 3;
-    const padding = 1;
-    const backgroundHeight = lines.length * lineHeight + padding * 2;
-
-    // Draw gray background
-    pdf.setFillColor(240, 240, 240); // Light gray (RGB: 240, 240, 240)
-    pdf.rect(
-      margin - padding,
-      yPosition - padding - 2,
-      pageWidth - 2 * margin + padding * 2,
-      backgroundHeight,
-      'F'
-    );
-
-    // Render text on top of background
-    lines.forEach((line, index) => {
-      pdf.text(line, margin, yPosition);
-      if (index < lines.length - 1) {
-        yPosition += lineHeight;
-      }
-    });
-
-    yPosition += 10;
-
-    // Capture and add stats if available
-    if (allStatsRef.current) {
-      const statsContainer = allStatsRef.current.getContainerRef();
-      if (statsContainer) {
-        const statsImage = await toPng(statsContainer, {
-          quality: 1,
-          pixelRatio: 2,
-        });
-        const statsImgProps = pdf.getImageProperties(statsImage);
-        const statsWidth = pageWidth - 2 * margin;
-        const statsHeight =
-          (statsImgProps.height * statsWidth) / statsImgProps.width;
-
-        // Check if we need a new page
-        if (yPosition + statsHeight > pageHeight - margin) {
-          pdf.addPage();
-          yPosition = margin;
-        }
-
-        pdf.addImage(
-          statsImage,
-          'PNG',
-          margin,
-          yPosition,
-          statsWidth,
-          statsHeight
-        );
-        yPosition += statsHeight + 10;
-      }
-    }
-
-    if (allChartsRef.current) {
-      // Get all individual chart refs
-      const chartRefs = allChartsRef.current.getChartRefs();
-
-      // Capture each chart separately and add to PDF
-      for (let i = 0; i < chartRefs.length; i++) {
-        const { ref: chartElement, label } = chartRefs[i];
-
-        if (chartElement) {
-          // Add chart title
-          pdf.setFontSize(12);
-          pdf.setFont('helvetica', 'bold');
-
-          const chartImage = await toPng(chartElement, {
-            quality: 1,
-            pixelRatio: 2,
-          });
-          const chartImgProps = pdf.getImageProperties(chartImage);
-          const chartWidth = pageWidth - 2 * margin;
-          const chartHeight =
-            (chartImgProps.height * chartWidth) / chartImgProps.width;
-
-          // Calculate total height needed (title + spacing + chart)
-          const titleHeight = 10;
-          const totalHeight = titleHeight + chartHeight;
-
-          // Check if chart fits on current page
-          if (yPosition + totalHeight > pageHeight - margin) {
-            pdf.addPage();
-            yPosition = margin;
-          }
-
-          // Add title
-          pdf.text(label, margin, yPosition);
-          yPosition += titleHeight;
-
-          // Add chart image
-          pdf.addImage(
-            chartImage,
-            'PNG',
-            margin,
-            yPosition,
-            chartWidth,
-            chartHeight
-          );
-
-          // Update yPosition for next chart (add spacing between charts)
-          yPosition += chartHeight + 10;
-        }
-      }
-    }
-
-    // Save the PDF
-    const fileName = `dashboard-production-${new Date().toISOString().split('T')[0]}.pdf`;
-    pdf.save(fileName);
-
-    toast.success('PDF exported successfully!', { id: 'export-pdf' });
-  } catch (error) {
-    toast.error('Failed to export PDF. Please try again.', {
-      id: 'export-pdf',
-    });
-  } finally {
-    setExporting(false);
-  }
-};

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[];
-  locationIds: 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(),
-    }),
-    locationIds: 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(),
-    }),
-    locationIds: 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>;