refactor(FE): Disable invoice download feature

[FIX/FE] Transfer to Laying

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

.gitlab-ci.yml

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

.husky/pre-commit

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

package.json

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

src/app/closing/detail/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/dashboard/page.tsx

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

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

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

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

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

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

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

src/app/finance/add/page.tsx

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

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

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

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

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

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

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

src/app/finance/detail/page.tsx

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

src/app/finance/page.tsx

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

src/app/globals.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/tailwind.css';
 @import '../styles/daisyui.css';
+@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';
@@ -28,16 +30,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: oklch(18.6% 0.024 257.7); /* #1f2937 */
+  --color-base-content: #18181b;
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
-  --color-success: oklch(62.3% 0.147 149);
+  --color-success: #00d390;
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning: #fcb700;
   --color-warning-content: oklch(0% 0 0); /* #000000 */
-  --color-error: oklch(61.8% 0.203 27.8);
+  --color-error: #ff3a3a;
   --color-error-content: oklch(100% 0 0); /* #fffffff */
 
   --radius-selector: 0rem;
@@ -51,17 +53,21 @@
 }
 
 :root {
-  --color-primary: #1f74bf;
+  --color-primary: #0069e0;
 }
 
 @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'>
+    <section className='w-full p-4 sm:p-0'>
       <MovementTable />
     </section>
   );

src/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Roboto } 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';
 
@@ -11,6 +12,12 @@ 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',
@@ -29,12 +36,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en' data-theme='lti'>
-      <body className={`${inter.variable} antialiased font-inter`}>
+      <body
+        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,9 +1,14 @@
+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 p-4'>
+    <div className='w-full'>
       <MarketingTable />
+
+      <SalesOrderFormModal />
+      <DeliveryOrderFormModal />
     </div>
   );
 };

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

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

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

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

src/app/master-data/production-standard/detail/layout.tsx

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

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

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

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

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

src/app/not-found.tsx

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

src/app/page.tsx

@@ -25,5 +25,9 @@ export default function Home() {
     );
   }
 
-  return <>Loading...</>;
+  return (
+    <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/chickin/add/page.tsx

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

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

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

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

@@ -50,5 +50,3 @@ 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'>
+    <section className='w-full p-4 sm:p-0'>
       <RecordingTable />
     </section>
   );

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

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

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

@@ -1,56 +0,0 @@
-'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,9 +1,25 @@
 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 p-4'>
+    <section className='w-full'>
       <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

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

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

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

src/app/production/uniformity/layout.tsx

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

src/app/production/uniformity/page.tsx

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

src/app/purchase/page.tsx

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

src/app/report/finance/page.tsx

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

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

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

src/components/Badge.tsx

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

src/components/Breadcrumb.tsx

@@ -0,0 +1,263 @@
+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,11 +2,12 @@ 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;
+  href?: string | UrlObject;
   isLoading?: boolean;
   target?: string;
   rel?: string;

src/components/Card.tsx

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

src/components/Drawer.tsx

@@ -15,6 +15,7 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
+  expandedContent?: ReactNode;
 }
 
 type DrawerClassName = {
@@ -23,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -36,6 +38,7 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
+  expandedContent,
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -46,12 +49,24 @@ 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,
-          'w-full max-w-[300px] lg:w-[300px]'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'right') {
@@ -60,11 +75,11 @@ const Drawer = ({
         drawer: cn(baseClassNames.drawer, 'drawer-end'),
         drawerSide: cn(
           baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
+          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -76,7 +91,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     }
@@ -138,14 +153,37 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content */}
+        {/* Sidebar Content - Full height container */}
         <div
           className={cn(
-            varianClassName?.drawerSidebarContent,
+            'flex h-screen bg-base-100 overflow-hidden',
-            className?.drawerContent
+            variant === 'right' && 'flex-row'
           )}
         >
-          {sidebarContent}
+          {/* Primary Sidebar Content */}
+          <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-[10%] opacity-100'
+      ? 'bottom-[5%] opacity-100'
-      : 'bottom-[-10%] opacity-0';
+      : 'bottom-[-5%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -60,7 +60,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
         'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
         'bg-slate-950 backdrop-blur-md'
       )}

src/components/MainDrawer.tsx

@@ -26,29 +26,34 @@ const MainDrawerContent = () => {
   };
 
   return (
-    <div className='w-full p-4 flex flex-col gap-4'>
+    <div className='w-full flex flex-col'>
-      <div className='flex flex-row items-center gap-4'>
+      <div className='p-3 flex flex-row items-center gap-4 border-b border-base-content/10'>
-        <Image
+        <div className='flex flex-row items-center gap-2'>
-          src='/assets/img/lti-logo.png'
+          <Image
-          alt='MBU Logo'
+            src='/assets/img/lti-logo.png'
-          width={256}
+            alt='LTI Logo'
-          height={256}
+            width={40}
-          className='w-full max-w-16 h-auto'
+            height={40}
-        />
+            className='w-full max-w-10 h-auto'
+          />
 
-        <h1 className='text-xl font-bold'>LTI ERP</h1>
+          <div className='font-roboto'>
+            <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='rounded-full'
+            className='p-1 rounded-full'
           >
             <Icon
               icon='material-symbols:close-rounded'
-              width={24}
+              width={16}
-              height={24}
+              height={16}
             />
           </Button>
         </div>
@@ -67,61 +72,39 @@ const MainDrawer = ({
   const pathname = usePathname();
   const { permissionCheck } = useAuth();
 
-  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
+
+  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) {
+  if (!isPermitted && !isPathnameNotFoundPage) {
     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 title={pageTitle as string} toggleSidebar={toggleSidebar} />
+        <Navbar toggleSidebar={toggleSidebar} />
 
         {children}
       </main>

src/components/Modal.tsx

@@ -53,15 +53,25 @@ 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 = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  children,
+  closeOnBackdrop,
+  onBackdropClick,
+  position = 'middle',
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
+      onBackdropClick?.();
       ref.current?.close();
     }
   };
@@ -69,7 +79,17 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
-      className={cn('modal', className?.modal)}
+      className={cn(
+        '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,26 +1,28 @@
 'use client';
 
 import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
+import { usePathname, 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 Dropdown from '@/components/Dropdown';
+import Breadcrumb, { buildBreadcrumbs } from '@/components/Breadcrumb';
+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 = ({ title, toggleSidebar }: NavbarProps) => {
+const Navbar = ({ 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();
@@ -35,42 +37,54 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
   };
 
   return (
-    <div className='navbar px-4 bg-base-100 shadow-sm'>
+    <div className='navbar p-3 bg-base-100 border-b border-base-content/10'>
       <div className='flex-1'>
         <div className='flex flex-row items-center gap-4'>
           {toggleSidebar && (
-            <Button onClick={toggleSidebar} className='block lg:hidden'>
+            <Button
-              <Icon
+              variant='ghost'
-                icon='material-symbols:menu-rounded'
+              color='none'
-                width={24}
+              onClick={toggleSidebar}
-                height={24}
+              className='block lg:hidden p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-              />
+            >
+              <Icon icon='heroicons:bars-3' width={20} height={20} />
             </Button>
           )}
 
-          <span className='font-bold text-xl text-primary'>{title}</span>
+          <Breadcrumb items={buildBreadcrumbs(pathname)} />
         </div>
       </div>
 
-      <div className='flex gap-2'>
+      <div className='flex gap-2 items-center'>
-        <Dropdown
+        {/* Page-specific actions */}
-          align='end'
+        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
-          direction='bottom'
+        <PopoverButton
-          trigger={
+          tabIndex={0}
-            <div className='btn btn-ghost btn-circle avatar'>
+          variant='ghost'
-              <div className='w-10 rounded-full border flex justify-center items-center'>
+          color='none'
-                <Icon icon='uil:user' width={40} height={40} />
+          popoverTarget='accountNavbar'
-              </div>
+          anchorName='--account-navbar'
-            </div>
+          className='p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-          }
-          className={{
-            content: 'w-52 mt-3',
-          }}
         >
-          <Menu>
+          <Icon icon='heroicons:user' width={20} height={20} />
-            <MenuItem title='Logout' onClick={logoutClickHandler} />
+        </PopoverButton>
-          </Menu>
+
-        </Dropdown>
+        <PopoverContent
+          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,11 +1,12 @@
 'use client';
 
-import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react';
 import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
+  getExpandedRowModel,
   getSortedRowModel,
   TableOptions,
   useReactTable,
@@ -15,6 +16,7 @@ import {
   OnChangeFn,
   Row,
   HeaderContext,
+  ExpandedState,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -31,11 +33,16 @@ 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> {
@@ -59,6 +66,7 @@ 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.
@@ -66,9 +74,15 @@ 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 = [{}, {}, {}, {}, {}];
+const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
+  id: index,
+}));
 
 const emptyContentDefaultValue = (
   <div className='w-full p-5 text-center'>
@@ -86,11 +100,18 @@ export const TABLE_DEFAULT_STYLING = {
   tableHeaderClassName: '',
   headerRowClassName: '',
   headerColumnClassName:
-    'px-4 py-3 border-base-content/10 text-base-content/50',
+    'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium',
   tableBodyClassName: '',
-  bodyRowClassName: 'border-t border-base-content/10',
+  bodyRowClassName:
-  bodyColumnClassName: 'px-4 py-3 text-base-content',
+    'transition-all duration-200 border-t border-base-content/10 bg-transparent',
-  paginationClassName: '',
+  selectedBodyRowClassName: 'bg-primary/5',
+  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',
@@ -117,8 +138,13 @@ 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 &&
@@ -151,10 +177,14 @@ 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,
@@ -222,14 +252,40 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div className={tableClassNames.containerClassName}>
+    <div
-      <div className={tableClassNames.tableWrapperClassName}>
+      className={cn(
-        <table className={tableClassNames.tableClassName}>
+        TABLE_DEFAULT_STYLING.containerClassName,
-          <thead className={tableClassNames.tableHeaderClassName}>
+        tableClassNames.containerClassName,
+        {
+          '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={tableClassNames.headerRowClassName}
+                className={cn(
+                  TABLE_DEFAULT_STYLING.headerRowClassName,
+                  tableClassNames.headerRowClassName
+                )}
               >
                 {headerGroup.headers.map((header) => {
                   const columnRelativeDepth =
@@ -262,6 +318,7 @@ const Table = <TData extends object>({
                         {
                           'border-b': header.colSpan > 1,
                         },
+                        TABLE_DEFAULT_STYLING.headerColumnClassName,
                         tableClassNames.headerColumnClassName
                       )}
                     >
@@ -311,7 +368,12 @@ const Table = <TData extends object>({
             ))}
           </thead>
 
-          <tbody className={tableClassNames.tableBodyClassName}>
+          <tbody
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableBodyClassName,
+              tableClassNames.tableBodyClassName
+            )}
+          >
             {table.getRowModel().rows.map((row) => {
               const customRowContent = renderCustomRow?.(row);
 
@@ -320,36 +382,96 @@ const Table = <TData extends object>({
               }
 
               return (
-                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                <Fragment key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
+                  <tr
-                    <td
+                    data-depth={row.depth}
-                      key={cell.id}
+                    className={cn(
-                      className={cn(
+                      row.depth > 0
-                        { 'first:w-9 first:pr-0': withCheckbox },
+                        ? tableClassNames.bodySubRowClassName(row.depth)
-                        tableClassNames.bodyColumnClassName
+                        : tableClassNames.bodyRowClassName,
-                      )}
+                      {
-                    >
+                        [tableClassNames.selectedBodyRowClassName!]:
-                      {!isLoading &&
+                          row.getIsSelected() && row.depth === 0,
-                        flexRender(
+                        [tableClassNames.selectedBodySubRowClassName(
-                          cell.column.columnDef.cell,
+                          row.depth
-                          cell.getContext()
+                        )!]: 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='skeleton w-full h-4' />}
+                        {isLoading && (
-                    </td>
+                          <div
-                  ))}
+                            className={cn(
-                </tr>
+                              '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>
+                      )}
+                    </>
+                  )}
+                </Fragment>
               );
             })}
           </tbody>
-          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
+          <tfoot
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableFooterClassName,
+              tableClassNames.tableFooterClassName
+            )}
+          >
             {renderFooter && (
-              <tr className={cn(tableClassNames.footerRowClassName)}>
+              <tr
+                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
                     )}
                   >
@@ -371,24 +493,33 @@ const Table = <TData extends object>({
         !isLoading &&
         emptyContent}
 
-      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
+      {data.length > 0 &&
-        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
+        table.getRowModel().rows.length > 0 &&
-          <Pagination
+        !isLoading &&
-            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+        withPagination && (
-            itemsPerPage={table.getState().pagination.pageSize}
+          <div
-            currentPage={
+            className={cn(
-              isServerSideTable
+              'mt-5',
-                ? page
+              TABLE_DEFAULT_STYLING.paginationClassName,
-                : table.getState().pagination.pageIndex + 1
+              tableClassNames.paginationClassName
-            }
+            )}
-            onPrevPage={prevPageClickHandler}
+          >
-            onNextPage={nextPageClickHandler}
+            <Pagination
-            onPageChange={pageChangeHandler}
+              totalItems={isServerSideTable ? totalItems : table.getRowCount()}
-            rowOptions={rowOptions}
+              itemsPerPage={table.getState().pagination.pageSize}
-            onRowChange={onPageSizeChange}
+              currentPage={
-          />
+                isServerSideTable
-        </div>
+                  ? page
-      )}
+                  : table.getState().pagination.pageIndex + 1
+              }
+              onPrevPage={prevPageClickHandler}
+              onNextPage={nextPageClickHandler}
+              onPageChange={pageChangeHandler}
+              rowOptions={rowOptions}
+              onRowChange={onPageSizeChange}
+            />
+          </div>
+        )}
     </div>
   );
 };

src/components/Tabs.tsx

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

src/components/helper/ApprovalStepsV2.tsx

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

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

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

src/components/helper/RequireAuth.tsx

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

src/components/helper/StatusBadge.tsx

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

src/components/helper/form/FormErrors.tsx

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

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

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

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

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

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

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

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

src/components/input/DebouncedTextArea.tsx

@@ -7,6 +7,7 @@ import TextArea, { TextAreaProps } from '@/components/input/TextArea';
 
 interface DebouncedTextAreaProps extends TextAreaProps {
   delay?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
@@ -19,6 +20,11 @@ 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
   ) => {
@@ -35,6 +41,7 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   return (
     <TextArea
       {...props}
+      ref={props.ref}
       value={internalValue}
       onChange={internalChangeHandler}
     />

src/components/input/FileInput.tsx

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

src/components/input/SelectInputCheckbox.tsx

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

@@ -0,0 +1,77 @@
+'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,6 +28,7 @@ export interface TextAreaProps {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   rows?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const TextArea = ({
@@ -49,11 +50,12 @@ const TextArea = ({
   readOnly = false,
   isLoading = false,
   rows = 3,
+  ref,
 }: TextAreaProps) => {
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start',
         className?.wrapper
       )}
     >
@@ -61,7 +63,7 @@ const TextArea = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -83,7 +85,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
+          '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',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -99,6 +101,7 @@ const TextArea = ({
         onBlur={onBlur}
         disabled={disabled}
         readOnly={readOnly}
+        ref={ref}
       />
 
       {(isLoading || endAdornment) && (
@@ -110,9 +113,11 @@ const TextArea = ({
       )}
 
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs 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,6 +21,9 @@ export interface TextInputProps {
     label?: string;
     inputWrapper?: string;
     input?: string;
+    inputPrefix?: string;
+    inputSuffix?: string;
+    inputPrefixSuffixWrapper?: string;
   };
   isError?: boolean;
   isValid?: boolean;
@@ -62,7 +65,7 @@ const TextInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start rounded-lg',
         className?.wrapper
       )}
     >
@@ -70,7 +73,7 @@ const TextInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -90,15 +93,23 @@ const TextInput = ({
       )}
 
       {inputPrefix || inputSuffix ? (
-        <div className='relative flex'>
+        <div
+          className={cn(
+            'relative flex text-sm',
+            className?.inputPrefixSuffixWrapper
+          )}
+        >
           {inputPrefix && (
             <div
               className={cn(
-                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
-                }
+                  'border-error': isError,
+                  'border-success!': isValid,
+                },
+                className?.inputPrefix
               )}
             >
               {inputPrefix}
@@ -107,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+              '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',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -154,11 +165,14 @@ const TextInput = ({
           {inputSuffix && (
             <div
               className={cn(
-                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+                '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-gray-300': !disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
-                }
+                  'border-error': isError,
+                  'border-success!': isValid,
+                },
+                className?.inputSuffix
               )}
             >
               {inputSuffix}
@@ -168,7 +182,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            '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',
+            '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',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -202,10 +216,10 @@ const TextInput = ({
       )}
 
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
       )}
       {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
     </div>
   );

src/components/modal/ConfirmationModal.tsx

@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
+export type IconPosition = 'left' | 'center' | 'right';
+
 export interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
+  subtitleText?: string;
   closeOnBackdrop?: boolean;
   primaryButton?: ButtonProps & {
     text?: string;
@@ -24,17 +27,78 @@ 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);
 
@@ -53,57 +117,84 @@ const ConfirmationModal = ({
   };
 
   return (
-    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
+    <Modal
-      <div className='w-full flex flex-col gap-4'>
+      ref={ref}
+      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-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
+            'w-full grid gap-3',
+            children && 'sticky bottom-0 bg-inherit z-10',
             {
-              'bg-error': type === 'error',
+              'grid-cols-2': secondaryButton && primaryButton,
-              'bg-info': type === 'info',
+              'grid-cols-1':
-              'bg-success': type === 'success',
+                (secondaryButton && !primaryButton) ||
+                (!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='ghost'
+              variant='outline'
               color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
               disabled={
@@ -111,8 +202,17 @@ const ConfirmationModal = ({
                   ? secondaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-              onClick={closeModalHandler}
+              onClick={(e) => {
-              className='grow'
+                if (secondaryButton?.onClick) {
+                  secondaryButton.onClick(e);
+                } else {
+                  closeModalHandler();
+                }
+              }}
+              className={cn(
+                'p-2 rounded-xl text-sm',
+                secondaryButton?.className
+              )}
             >
               {secondaryButton?.text ?? 'Tidak'}
             </Button>
@@ -133,13 +233,13 @@ const ConfirmationModal = ({
                   ? primaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-              className='grow'
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
             >
               {primaryButton?.text ?? 'Ya'}
             </Button>
           )}
         </div>
-      </div>
+      )}
     </Modal>
   );
 };

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -13,6 +13,7 @@ interface ConfirmationModalWithNotesProps
   extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
   rows?: number;
   placeholder?: string;
+  onClose?: () => void;
 
   primaryButton?: {
     text?: string;
@@ -32,6 +33,8 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
   className,
   rows = 3,
   placeholder = 'Catatan...',
+  onClose,
+  ...props
 }) => {
   const randomId = useId();
   const [notes, setNotes] = useState('');
@@ -40,6 +43,11 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
     setNotes(e.target.value);
   };
 
+  const closeModalHandler = () => {
+    onClose?.();
+    ref.current?.close();
+  };
+
   return (
     <ConfirmationModal
       ref={ref}
@@ -48,13 +56,34 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       closeOnBackdrop={closeOnBackdrop}
       primaryButton={{
         ...primaryButton,
-        onClick: () => {
+        onClick: (e) => {
-          primaryButton?.onClick?.(notes);
+          if (primaryButton && primaryButton?.onClick) {
+            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,16 +39,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
     <li>
       <Link
         href={item.link}
-        className={cn(
+        className={cn('px-3 py-1.5', {
-          {
+          'text-base-content/60': !isItemActive,
-            'menu-active border-2 border-solid border-base-300': isItemActive,
+          'menu-active border-[1.5px] border-solid border-base-300':
-          },
+            isItemActive,
-          'px-3 py-1.5'
+        })}
-        )}
       >
         {item.icon && <Icon icon={item.icon} width={20} height={20} />}
 
-        <span className='text-base'>{item.text}</span>
+        <span className='text-sm'>{item.text}</span>
       </Link>
     </li>
   );
@@ -62,12 +61,13 @@ 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-base'>{item.text}</span>
+          <span className='text-sm'>{item.text}</span>
         </summary>
 
         <ul>
@@ -88,7 +88,7 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
-    <Menu>
+    <Menu className='p-3'>
       {menu.map((menuItem, menuIdx) => {
         return (
           <SidebarMenuItem

src/components/pages/ApprovalSteps.tsx

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

src/components/pages/closing/ClosingFinanceTable.tsx

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

src/components/pages/closing/ClosingGeneralInformationTable.tsx

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

src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx

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

src/components/pages/closing/ClosingKandangList.tsx

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

src/components/pages/closing/ClosingOutgoingSapronaksSummaryTable.tsx

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