Merge branch 'fix/recording' into 'development'

[FIX/FE] Recording Form

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

.gitlab-ci.yml

@@ -15,7 +15,7 @@ default:
 # ==========================================================
 .build_template: &build_template
   stage: build
-  image: node:20-alpine
+  image: public.ecr.aws/docker/library/node:20-alpine
   cache:
     key: npm-cache
     paths:
@@ -56,7 +56,7 @@ default:
 .deploy_template: &deploy_template
   stage: deploy
   image:
-    name: amazon/aws-cli:latest
+    name: public.ecr.aws/aws-cli/aws-cli:latest
     entrypoint: ['/bin/sh', '-c']
   script:
     - set -e
@@ -183,3 +183,31 @@ deploy:staging:
   environment:
     name: staging
     url: https://stg-lti-erp.mbugroup.id
+
+# ==========================================================
+# ====== STAGING (Branch production) ======
+# ==========================================================
+build:production:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "production"'
+  environment:
+    name: staging
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
+
+deploy:production:
+  <<: *deploy_template
+  needs: ['build:production']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "production"'
+  variables:
+    S3_BUCKET: 'production-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1SSLXKYYITASJ'
+  environment:
+    name: staging
+    url: https://lti-erp.mbugroup.id

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM public.ecr.aws/docker/library/node:20-alpine
 
 RUN apk add --no-cache git bash build-base curl
 

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "eslint",
     "prepare": "husky",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "pre-commit": "npm run format && npm run lint && npx tsc --noEmit && npm run build"
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.3.1",
@@ -19,7 +20,9 @@
     "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",
@@ -54,7 +57,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

@@ -3,11 +3,10 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+import ClosingDetail from '@/components/pages/closing/ClosingDetailTabs';
 
 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';
 
@@ -34,16 +33,6 @@ const ClosingDetailPage = () => {
     () => ProjectFlockKandangApi.getSingle(Number(kandangId))
   );
 
-  const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId ? `sales-${closingId}` : null,
-    () => ClosingApi.getPenjualan(Number(closingId))
-  );
-
-  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
-    closingId ? `hpp-ekspedisi-${closingId}` : null,
-    () => ClosingApi.getHppEkspedisi(Number(closingId))
-  );
-
   if (!closingId) {
     router.back();
 
@@ -59,12 +48,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading =
+  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingHppEkspedisi ||
-    isLoadingProject ||
-    isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -74,12 +58,6 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
-          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
-          hppExpeditionData={
-            isResponseSuccess(hppEkspedisiData)
-              ? hppEkspedisiData.data
-              : undefined
-          }
           projectData={
             isResponseSuccess(projectData) ? projectData.data : undefined
           }

src/app/closing/page.tsx

@@ -2,7 +2,7 @@ import ClosingsTable from '@/components/pages/closing/ClosingsTable';
 
 const Closing = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-3'>
       <ClosingsTable />
     </section>
   );

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

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

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

@@ -5,7 +5,6 @@ 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();

src/app/finance/detail/page.tsx

@@ -4,7 +4,7 @@ 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';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 const FinanceDetailPage = () => {
   const router = useRouter();
@@ -24,8 +24,6 @@ const FinanceDetailPage = () => {
     );
   }
 
-  console.log(finance);
-
   // if (!finance || isResponseError(finance)) {
   //   router.replace('/404');
   //   return;

src/app/finance/page.tsx

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

src/app/globals.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/tailwind.css';
 @import '../styles/daisyui.css';
 @import '../figma-make/styles/theme.css';
 
@@ -29,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;
@@ -52,17 +53,23 @@
 }
 
 :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);
+
+  --shadow-bg: 0px -2px 4px 0px #00000014;
 }
 
 html {

src/app/inventory/adjustment/page.tsx

@@ -2,7 +2,7 @@ import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/In
 
 const InventoryAdjustment = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full'>
       <InventoryAdjustmentTable />
     </section>
   );

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,5 +1,5 @@
 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';
@@ -12,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',
@@ -30,7 +36,9 @@ 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>

src/app/marketing/add/delivery-orders/layout.tsx

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

src/app/marketing/add/delivery-orders/page.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing/marketing';
-import { useRouter, useSearchParams } from 'next/navigation';
-import toast from 'react-hot-toast';
-import useSWR from 'swr';
-
-const EditMarketingDelivery = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const soId = searchParams.get('marketingId');
-
-  const {
-    data: marketing,
-    isLoading: isLoading,
-    mutate: refreshMarketing,
-  } = useSWR(`get-so-${soId}`, () =>
-    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
-  );
-
-  if (!soId) {
-    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 (!isLoading && (!marketing || isResponseError(marketing))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-      {!isLoading && isResponseSuccess(marketing) && (
-        <MarketingForm
-          formType='add_deliver'
-          initialValues={marketing.data}
-          afterSubmit={() => {
-            refreshMarketing();
-          }}
-        />
-      )}
-    </div>
-  );
-};
-export default EditMarketingDelivery;

src/app/marketing/add/sales-orders/page.tsx

@@ -1,11 +0,0 @@
-import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
-
-const AddSalesOrder = () => {
-  return (
-    <div className='size-full p-4'>
-      <MarketingForm formType='add' />
-    </div>
-  );
-};
-
-export default AddSalesOrder;

src/app/marketing/detail/delivery-orders/edit/layout.tsx

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

src/app/marketing/detail/delivery-orders/edit/page.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing/marketing';
-import { useRouter, useSearchParams } from 'next/navigation';
-import toast from 'react-hot-toast';
-import useSWR from 'swr';
-
-const EditMarketingDelivery = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const soId = searchParams.get('marketingId');
-
-  const {
-    data: marketing,
-    isLoading: isLoading,
-    mutate: refreshMarketing,
-  } = useSWR(`get-so-${soId}`, () =>
-    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
-  );
-
-  if (!soId) {
-    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 (!isLoading && (!marketing || isResponseError(marketing))) {
-    router.replace('/404');
-    return;
-  }
-
-  if (
-    isResponseSuccess(marketing) &&
-    marketing.data.latest_approval.step_number != 3
-  ) {
-    toast.error('Data Marketing perlu dilakukan approval terlebih dahulu!');
-    router.back();
-  }
-
-  return (
-    <div className='w-full p-4'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-      {!isLoading && isResponseSuccess(marketing) && (
-        <MarketingForm
-          formType='edit_deliver'
-          initialValues={marketing.data}
-          afterSubmit={() => {
-            refreshMarketing();
-          }}
-        />
-      )}
-    </div>
-  );
-};
-export default EditMarketingDelivery;

src/app/marketing/detail/layout.tsx

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

src/app/marketing/detail/page.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import MarketingDetail from '@/components/pages/marketing/detail/MarketingDetail';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing/marketing';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const DetailMarketing = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const soId = searchParams.get('marketingId');
-
-  const {
-    data: marketing,
-    isLoading: isLoading,
-    mutate: refreshMarketing,
-  } = useSWR(soId, (id: number) => MarketingApi.getSingle(id));
-
-  if (!soId) {
-    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 (!isLoading && (!marketing || isResponseError(marketing))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-      {!isLoading && isResponseSuccess(marketing) && (
-        <MarketingDetail
-          initialValues={marketing.data}
-          refresh={refreshMarketing}
-        />
-      )}
-    </div>
-  );
-};
-
-export default DetailMarketing;

src/app/marketing/detail/sales-orders/edit/layout.tsx

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

src/app/marketing/detail/sales-orders/edit/page.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing/marketing';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const EditSalesOrder = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const soId = searchParams.get('marketingId');
-
-  const {
-    data: marketing,
-    isLoading: isLoading,
-    mutate: refreshMarketing,
-  } = useSWR(`get-so-${soId}`, () =>
-    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
-  );
-
-  if (!soId) {
-    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 (!isLoading && (!marketing || isResponseError(marketing))) {
-    router.replace('/404');
-    return;
-  }
-  return (
-    <div className='w-full p-4'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-      {!isLoading && isResponseSuccess(marketing) && (
-        <MarketingForm
-          formType='edit'
-          initialValues={marketing.data}
-          afterSubmit={() => {
-            refreshMarketing();
-          }}
-        />
-      )}
-    </div>
-  );
-};
-export default EditSalesOrder;

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

@@ -1,11 +1,7 @@
 import AreasTable from '@/components/pages/master-data/area/AreasTable';
 
 const Nonstock = () => {
-  return (
+  return <AreasTable />;
-    <section className='w-full p-4'>
-      <AreasTable />
-    </section>
-  );
 };
 
 export default Nonstock;

src/app/master-data/bank/page.tsx

@@ -1,11 +1,7 @@
 import BanksTable from '@/components/pages/master-data/bank/BanksTable';
 
 const Bank = () => {
-  return (
+  return <BanksTable />;
-    <section className='w-full p-4'>
-      <BanksTable />
-    </section>
-  );
 };
 
 export default Bank;

src/app/master-data/customer/page.tsx

@@ -1,11 +1,7 @@
 import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
-  return (
+  return <CustomersTable />;
-    <section className='w-full p-4'>
-      <CustomersTable />
-    </section>
-  );
 };
 
 export default Customer;

src/app/master-data/fcr/add/page.tsx

@@ -1,11 +0,0 @@
-import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
-
-const AddFcr = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <FcrForm />
-    </div>
-  );
-};
-
-export default AddFcr;

src/app/master-data/fcr/detail/edit/page.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
-
-import { FcrApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { BaseApiResponse } from '@/types/api/api-general';
-import { FcrWithStandards } from '@/types/api/master-data/fcr';
-
-const FcrEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const fcrId = searchParams.get('fcrId');
-
-  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
-    fcrId,
-    (id: number) =>
-      FcrApi.getSingle(id) as Promise<
-        BaseApiResponse<FcrWithStandards> | undefined
-      >
-  );
-
-  if (!fcrId) {
-    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 (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
-      {!isLoadingFcr && isResponseSuccess(fcr) && (
-        <FcrForm type='edit' initialValues={fcr.data} />
-      )}
-    </div>
-  );
-};
-
-export default FcrEdit;

src/app/master-data/fcr/detail/layout.tsx

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

src/app/master-data/fcr/detail/page.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
-
-import { FcrApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { FcrWithStandards } from '@/types/api/master-data/fcr';
-import { BaseApiResponse } from '@/types/api/api-general';
-
-const FcrDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const fcrId = searchParams.get('fcrId');
-
-  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
-    fcrId,
-    (id: number) =>
-      FcrApi.getSingle(id) as Promise<
-        BaseApiResponse<FcrWithStandards> | undefined
-      >
-  );
-
-  if (!fcrId) {
-    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 (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
-      {!isLoadingFcr && isResponseSuccess(fcr) && (
-        <FcrForm type='detail' initialValues={fcr.data} />
-      )}
-    </div>
-  );
-};
-
-export default FcrDetail;

src/app/master-data/fcr/page.tsx

@@ -1,11 +0,0 @@
-import FcrsTable from '@/components/pages/master-data/fcr/FcrsTable';
-
-const Fcr = () => {
-  return (
-    <section className='w-full p-4'>
-      <FcrsTable />
-    </section>
-  );
-};
-
-export default Fcr;

src/app/master-data/flock/page.tsx

@@ -1,11 +1,7 @@
 import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
-  return (
+  return <FlockTable />;
-    <section className='w-full p-4'>
-      <FlockTable />
-    </section>
-  );
 };
 
 export default Flock;

src/app/master-data/kandang/page.tsx

@@ -1,11 +1,7 @@
 import KandangsTable from '@/components/pages/master-data/kandang/KandangsTable';
 
 const Nonstock = () => {
-  return (
+  return <KandangsTable />;
-    <section className='w-full p-4'>
-      <KandangsTable />
-    </section>
-  );
 };
 
 export default Nonstock;

src/app/master-data/location/page.tsx

@@ -1,11 +1,7 @@
 import LocationsTable from '@/components/pages/master-data/location/LocationsTable';
 
 const Nonstock = () => {
-  return (
+  return <LocationsTable />;
-    <section className='w-full p-4'>
-      <LocationsTable />
-    </section>
-  );
 };
 
 export default Nonstock;

src/app/master-data/nonstock/page.tsx

@@ -1,11 +1,7 @@
 import NonstocksTable from '@/components/pages/master-data/nonstock/NonstocksTable';
 
 const Nonstock = () => {
-  return (
+  return <NonstocksTable />;
-    <section className='w-full p-4'>
-      <NonstocksTable />
-    </section>
-  );
 };
 
 export default Nonstock;

src/app/master-data/product-category/page.tsx

@@ -1,11 +1,7 @@
 import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
-  return (
+  return <ProductCategoryTable />;
-    <section className='w-full p-4'>
-      <ProductCategoryTable />
-    </section>
-  );
 };
 
 export default ProductCategory;

src/app/master-data/product/page.tsx

@@ -1,11 +1,7 @@
 import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
-  return (
+  return <ProductsTable />;
-    <section className='w-full p-4'>
-      <ProductsTable />
-    </section>
-  );
 };
 
 export default Product;

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

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

src/app/master-data/supplier/page.tsx

@@ -1,11 +1,7 @@
 import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
-  return (
+  return <SuppliersTable />;
-    <section className='w-full p-4'>
-      <SuppliersTable />
-    </section>
-  );
 };
 
 export default Supplier;

src/app/master-data/uom/page.tsx

@@ -1,11 +1,7 @@
 import UomsTable from '@/components/pages/master-data/uom/UomsTable';
 
 const Nonstock = () => {
-  return (
+  return <UomsTable />;
-    <section className='w-full p-4'>
-      <UomsTable />
-    </section>
-  );
 };
 
 export default Nonstock;

src/app/master-data/warehouse/page.tsx

@@ -1,11 +1,7 @@
 import WarehousesTable from '@/components/pages/master-data/warehouse/WarehousesTable';
 
 const Warehouse = () => {
-  return (
+  return <WarehousesTable />;
-    <section className='w-full p-4'>
-      <WarehousesTable />
-    </section>
-  );
 };
 
 export default Warehouse;

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

@@ -3,10 +3,9 @@
 import { useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useAuth } from '@/services/hooks/useAuth';
-import { redirectToSSO } from '@/lib/auth-helper';
 
 export default function Home() {
-  const { user, isLoadingUser } = useAuth();
+  const { isLoadingUser } = useAuth();
 
   const router = useRouter();
   const pathname = usePathname();
@@ -25,5 +24,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/add/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
-import React, { useImperativeHandle } from 'react';
+import React from 'react';
-import toast from 'react-hot-toast';
+// import React, { useImperativeHandle } from 'react';
 
 const AddProjectFlock = () => {
   // useImperativeHandle(ref, () => ({

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

@@ -12,11 +12,10 @@ const ProjectFlockEdit = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const {
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    data: projectFlock,
+    projectFlockId,
-    isLoading: isLoadingProjectFlock,
+    (id: number) => ProjectFlockApi.getSingle(id)
-    mutate: refreshProjectFlocks,
+  );
-  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();

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

@@ -1,7 +1,6 @@
 'use client';
 
 import ProjectFlockDetail from '@/components/pages/production/project-flock/detail/ProjectFlockDetail';
-import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -13,11 +12,10 @@ const ProjectFlockDetailPage = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const {
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    data: projectFlock,
+    projectFlockId,
-    isLoading: isLoadingProjectFlock,
+    (id: number) => ProjectFlockApi.getSingle(id)
-    mutate: refreshProjectFlock,
+  );
-  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -50,5 +48,3 @@ const ProjectFlockDetailPage = () => {
 };
 
 export default ProjectFlockDetailPage;
-ProjectFlockDetail;
-ProjectFlockDetail;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import Drawer from '@/components/Drawer';
+import React, { ReactNode, useEffect } from 'react';
-import React, { ReactNode } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 import { useUiStore } from '@/stores/ui/ui.store';
+import Modal, { useModal } from '@/components/Modal';
 
 export default function ProjectFlockLayout({
   children,
@@ -23,9 +23,12 @@ export default function ProjectFlockLayout({
 
   const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
 
+  const formModal = useModal();
+
   const handleBackdropClick = () => {
     const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
       if (isValid) {
+        formModal.closeModal();
         unsub(); // berhenti listen
         router.push('/production/project-flock');
       }
@@ -34,6 +37,14 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
+  useEffect(() => {
+    if (isOpen && !formModal.open) {
+      formModal.openModal();
+    } else {
+      formModal.closeModal();
+    }
+  }, [isOpen]);
+
   return (
     <>
       {/* List page always rendered */}
@@ -43,18 +54,19 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Drawer only on /add */}
+      {/* Render Modal only on /add */}
-      <Drawer
+      <Modal
-        open={isOpen}
+        ref={formModal.ref}
-        setOpen={(v) => {
+        position='end'
-          if (!v) router.push('/production/project-flock');
-        }}
-        closeOnBackdropClick={isDetail ? true : false}
         onBackdropClick={handleBackdropClick}
-        variant='right'
+        className={{
-        zIndex='99999'
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
-        sidebarContent={isOpen && <div className=''>{children}</div>}
+        }}
-      />
+      >
+        <div className='w-full sm:w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
+          {isOpen && children}
+        </div>
+      </Modal>
     </>
   );
 }

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'>
       <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/layout.tsx

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

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

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

src/app/report/marketing/page.tsx

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

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

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

src/components/Alert.tsx

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 
 import { cn } from '@/lib/helper';
 
 interface AlertProps {
+  ref?: Ref<HTMLDivElement> | undefined;
   variant?: 'outline' | 'dash' | 'soft';
   color?: 'info' | 'success' | 'warning' | 'error';
   children?: ReactNode;
   className?: string;
 }
 
-const Alert = ({ children, variant, color, className }: AlertProps) => {
+const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
   const alertBaseClassName = cn('alert', {
     'alert-soft': variant === 'soft',
     'alert-outline': variant === 'outline',
@@ -21,7 +22,11 @@ const Alert = ({ children, variant, color, className }: AlertProps) => {
     'alert-error': color === 'error',
   });
 
-  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
+  return (
+    <div ref={ref} className={cn(alertBaseClassName, className)}>
+      {children}
+    </div>
+  );
 };
 
 export default Alert;

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

@@ -16,7 +16,6 @@ interface DrawerProps {
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
   expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
   onBackdropClick,
   closeOnBackdropClick = true,
   expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
           ? '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';
     };
 
@@ -106,7 +108,9 @@ const Drawer = ({
     if (closeOnBackdropClick) {
       setOpen(false);
     }
-    onBackdropClick && onBackdropClick();
+    if (onBackdropClick) {
+      onBackdropClick();
+    }
   };
 
   return (
@@ -162,7 +166,7 @@ const Drawer = ({
           <div
             className={cn(
               varianClassName?.drawerSidebarContent,
-              className?.drawerContent,
+              className?.drawerSidebarContent,
               'overflow-y-auto'
             )}
           >
@@ -174,7 +178,7 @@ const Drawer = ({
             <div
               className={cn(
                 'border-l border-gray-200 bg-white flex flex-col h-full',
-                expandedWidth
+                className?.drawerExpandedContent
               )}
             >
               <div className='overflow-y-auto flex-1 h-full'>

src/components/MainDrawer.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
@@ -13,7 +12,6 @@ import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
-import { isPathActive } from '@/lib/helper';
 import { ROUTE_PERMISSIONS } from '@/config/route-permission';
 import { useAuth } from '@/services/hooks/useAuth';
 
@@ -26,29 +24,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>
@@ -69,61 +72,37 @@ const MainDrawer = ({
 
   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

@@ -31,7 +31,11 @@ export const useModal = (isNestingModal = false) => {
   }, []);
 
   const toggle = useCallback(() => {
-    open ? closeModal() : openModal();
+    if (open) {
+      closeModal();
+    } else {
+      openModal();
+    }
   }, [open, closeModal, openModal]);
 
   useEffect(() => {
@@ -53,15 +57,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 +83,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,76 +1,94 @@
 '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();
-
     if (isResponseError(logoutRes)) {
       toast.error('Gagal logout! Coba lagi!');
       return;
     }
 
     setUser(undefined);
+    const redirect = (logoutRes as { redirect?: string })?.redirect;
+    if (redirect) {
+      window.location.href = redirect;
+      return;
+    }
     router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
   };
 
   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,13 +74,19 @@ 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'>
+  <div className='w-full text-center py-4'>
-    <span className='text-lg opacity-50'>
+    <span className='text-sm opacity-50'>
       Tidak ada data yang dapat ditampilkan...
     </span>
   </div>
@@ -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,110 @@ 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>
               );
             })}
+
+            {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+              !isLoading && (
+                <tr>
+                  <td
+                    colSpan={
+                      table.getAllLeafColumns().length + (withCheckbox ? 1 : 0)
+                    }
+                    className='p-0'
+                  >
+                    {emptyContent}
+                  </td>
+                </tr>
+              )}
           </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
                     )}
                   >
@@ -367,28 +503,33 @@ const Table = <TData extends object>({
         </table>
       </div>
 
-      {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+      {data.length > 0 &&
+        table.getRowModel().rows.length > 0 &&
         !isLoading &&
-        emptyContent}
+        withPagination && (
-
+          <div
-      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
+            className={cn(
-        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
+              'mt-5',
-          <Pagination
+              TABLE_DEFAULT_STYLING.paginationClassName,
-            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+              tableClassNames.paginationClassName
-            itemsPerPage={table.getState().pagination.pageSize}
+            )}
-            currentPage={
+          >
-              isServerSideTable
+            <Pagination
-                ? page
+              totalItems={isServerSideTable ? totalItems : table.getRowCount()}
-                : table.getState().pagination.pageIndex + 1
+              itemsPerPage={table.getState().pagination.pageSize}
-            }
+              currentPage={
-            onPrevPage={prevPageClickHandler}
+                isServerSideTable
-            onNextPage={nextPageClickHandler}
+                  ? page
-            onPageChange={pageChangeHandler}
+                  : table.getState().pagination.pageIndex + 1
-            rowOptions={rowOptions}
+              }
-            onRowChange={onPageSizeChange}
+              onPrevPage={prevPageClickHandler}
-          />
+              onNextPage={nextPageClickHandler}
-        </div>
+              onPageChange={pageChangeHandler}
-      )}
+              rowOptions={rowOptions}
+              onRowChange={onPageSizeChange}
+            />
+          </div>
+        )}
     </div>
   );
 };

src/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { HTMLAttributes, ReactNode, useState } from 'react';
 import { cn } from '@/lib/helper';
 
 export interface TabItem {
@@ -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,205 @@
+'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 {
+  title?: string;
+  approvals?: BaseApproval[];
+  steps: {
+    step_number: number;
+    step_name: string;
+  }[];
+  maxVisibleSteps?: number;
+  className?: {
+    wrapper?: string;
+    stepsWrapper?: string;
+    stepsContainer?: string;
+  };
+}
+
+const ApprovalStepsV2 = ({
+  title = 'Progress Details',
+  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'>
+        {title}
+      </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,82 @@
+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';
+import { useMemo } from 'react';
+
+export type ButtonFilterProps = ButtonProps & {
+  values: FormikValues;
+  onClick: () => void;
+  excludeFields?: string[];
+  fieldGroups?: string[][];
+};
+
+// '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,
+  excludeFields = [],
+  fieldGroups = [],
+  ...props
+}: ButtonFilterProps) => {
+  const activeCount = useMemo(() => {
+    const filteredValues: FormikValues = {};
+    Object.keys(values).forEach((key) => {
+      if (!excludeFields.includes(key)) {
+        filteredValues[key] = values[key];
+      }
+    });
+
+    let count = getFilledFormikValuesCount(filteredValues);
+
+    fieldGroups.forEach((group) => {
+      const groupFields = group.filter(
+        (field) => !excludeFields.includes(field)
+      );
+      const filledGroupFields = groupFields.filter(
+        (field) => filteredValues[field]
+      );
+      if (
+        filledGroupFields.length === groupFields.length &&
+        groupFields.length > 1
+      ) {
+        count -= groupFields.length - 1;
+      }
+    });
+
+    return count;
+  }, [values, excludeFields, fieldGroups]);
+  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',
+        activeCount > 0
+          ? 'border-primary-gradient text-primary rounded-lg!'
+          : 'rounded-lg',
+        props.className
+      )}
+    >
+      <Icon
+        icon='heroicons:funnel'
+        width={20}
+        height={20}
+        className={activeCount > 0 ? 'text-blue-600' : ''}
+      />
+      Filter
+      {activeCount > 0 && (
+        <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+          {activeCount}
+        </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

@@ -72,8 +72,10 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
       await AuthApi.refresh();
     };
 
-    refreshUserSession();
+    if (user) {
-  }, []);
+      refreshUserSession();
+    }
+  }, [user]);
 
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||

src/components/helper/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+
+import Badge from '@/components/Badge';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface StatusBadgeProps {
+  color: Color;
+  text: ReactNode;
+  className?: {
+    badge?: string;
+    status?: string;
+  };
+  onClick?: () => void;
+}
+
+const StatusBadge = ({
+  color = 'neutral',
+  text,
+  className,
+  onClick,
+}: StatusBadgeProps) => {
+  return (
+    <Badge
+      variant='soft'
+      onClick={onClick}
+      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

@@ -27,7 +27,7 @@ export interface DrawerHeaderProps {
 
 const DrawerHeader = ({
   leftIcon = 'mdi:close',
-  leftIconSize = 24,
+  leftIconSize = 20,
   leftIconHref,
   leftIconOnClick,
   leftIconClassName,
@@ -43,7 +43,7 @@ const DrawerHeader = ({
         icon={leftIcon}
         width={leftIconSize}
         height={leftIconSize}
-        className={cn('cursor-pointer', leftIconClassName)}
+        className={cn('cursor-pointer text-base-content ', leftIconClassName)}
       />
     );
 
@@ -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,20 +73,25 @@ const DrawerHeader = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center px-4 pt-4',
+        'flex flex-row justify-between items-center p-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 && (
-          <div className='divider divider-horizontal p-0 m-0'></div>
+          <div className='w-px h-full border-none bg-base-content/10' />
         )}
 
         {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

@@ -1,7 +1,10 @@
+'use client';
+
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Alert Unique Error List
@@ -10,34 +13,81 @@ import { useState } from 'react';
  */
 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;
 }) => {
+  const alertRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (formErrorList.length > 0) {
+      alertRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  }, [formErrorList.length]);
+
   if (formErrorList.length === 0) return null;
 
   return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
+    <Alert
-      <div className='flex justify-between items-center gap-2 w-full'>
+      ref={alertRef}
-        <div className='flex items-center gap-2'>
+      color='error'
-          <Icon icon='material-symbols:error-outline' width={24} height={24} />
+      className={cn(
-          <span className='font-semibold'>
+        'w-full flex flex-col gap-2 px-3 rounded-lg',
-            Terdapat {formErrorList.length} error pada form:
+        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
+          type='button'
           onClick={onClose}
           variant='link'
-          className='ml-auto p-0 w-fit text-white'
+          className={cn('ml-auto p-0 w-fit text-white', className?.button)}
           color='none'
         >
-          <Icon icon='material-symbols:close' width={24} height={24} />
+          <Icon icon='material-symbols:close' width={20} height={20} />
         </Button>
       </div>
-      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
+      <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='text-sm'>
+          <li key={index} className={cn('text-sm', className?.li)}>
             {error}
           </li>
         ))}

src/components/helper/pdf/badge/PdfParamBadge.tsx

@@ -0,0 +1,27 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
+
+type PdfParamBadgeProps = {
+  children: React.ReactNode;
+  style?: Style;
+};
+
+const styles = StyleSheet.create({
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+});
+
+export const PdfParamBadge = ({ children, style }: PdfParamBadgeProps) => {
+  return (
+    <View style={[styles.parameterBadge, ...(style ? [style] : [])]}>
+      <Text>{children}</Text>
+    </View>
+  );
+};

src/components/helper/pdf/badge/PdfStatusBadge.tsx

@@ -0,0 +1,54 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
+
+type PdfStatusBadgeProps = {
+  children: React.ReactNode;
+  style?: Style;
+};
+
+const styles = StyleSheet.create({
+  statusBadge: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    borderRadius: 12,
+    fontSize: 7,
+    fontWeight: 'bold',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    backgroundColor: '#F5F5F5',
+    borderColor: '#E5E7EB',
+  },
+  statusBadgeText: {
+    fontSize: 7,
+    fontWeight: 'bold',
+    color: '#333333',
+  },
+});
+
+export const PdfStatusBadge = ({ children, style }: PdfStatusBadgeProps) => {
+  const styleRecord = style as Record<string, unknown>;
+  const color = styleRecord?.color as string | undefined;
+
+  const viewStyle = Object.entries(styleRecord || {}).reduce(
+    (acc, [key, value]) => {
+      if (key !== 'color') {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>
+  );
+
+  return (
+    <View
+      style={[
+        styles.statusBadge,
+        ...(Object.keys(viewStyle).length > 0 ? [viewStyle as Style] : []),
+      ]}
+    >
+      <Text style={[styles.statusBadgeText, ...(color ? [{ color }] : [])]}>
+        {children}
+      </Text>
+    </View>
+  );
+};

src/components/helper/pdf/layout/PdfPageNumber.tsx

@@ -0,0 +1,48 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
+
+type PdfPageNumberProps = {
+  style?: Style;
+  /**
+   * Format template for page number.
+   * Use {pageNumber} and {totalPages} as placeholders.
+   * Default: "{pageNumber} / {totalPages}"
+   */
+  format?: string;
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+});
+
+export const PdfPageNumber = ({
+  style,
+  format = '{pageNumber} / {totalPages}',
+}: PdfPageNumberProps) => {
+  return (
+    <View style={style || styles.footer} fixed>
+      <Text
+        render={({ pageNumber, totalPages }) =>
+          format
+            .replace('{pageNumber}', String(pageNumber))
+            .replace('{totalPages}', String(totalPages))
+        }
+        fixed
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { View, StyleSheet } from '@react-pdf/renderer';
+import type { PdfColumn } from './types';
+import { PdfThead } from './PdfThead';
+import { PdfTbody } from './PdfTbody';
+import { PdfTfoot } from './PdfTfoot';
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+});
+
+interface PdfTableProps<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data: TData[];
+  showFooter?: boolean;
+  footerLabel?: string;
+  firstRow?: {
+    valueKey: string;
+    value: number;
+    align?: 'right';
+    color?: string;
+  };
+}
+
+export const PdfTable = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+  showFooter = false,
+  footerLabel = 'Total',
+  firstRow,
+}: PdfTableProps<TData>) => {
+  // Check if any column has footer defined
+  const hasFooter =
+    showFooter || columns.some((col) => col.footer !== undefined);
+
+  return (
+    <View style={styles.table}>
+      <PdfThead columns={columns} data={data} />
+      <PdfTbody columns={columns} data={data} firstRow={firstRow} />
+      {hasFooter && data.length > 0 && (
+        <PdfTfoot columns={columns} data={data} label={footerLabel} />
+      )}
+    </View>
+  );
+};
+
+export type { PdfColumn };

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

@@ -0,0 +1,209 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { ReactNode } from 'react';
+import type { PdfColumn } from './types';
+
+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<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data: TData[];
+  firstRow?: {
+    valueKey: string;
+    value: number;
+    align?: 'right';
+    color?: string;
+  };
+}
+
+export const PdfTbody = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+  firstRow,
+}: PdfTbodyProps<TData>) => {
+  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 || 'left';
+
+            const cellStyle =
+              column.key === 'no'
+                ? [styles.tableCellNo, { flex: column.flex || 1 }]
+                : isFirstRowColumn
+                  ? [
+                      styles.tableCellRight,
+                      {
+                        flex: column.flex || 1,
+                        color: firstRow.color || 'black',
+                        borderRightWidth: isLastColumn ? 0 : 1,
+                      },
+                    ]
+                  : align === 'right'
+                    ? [
+                        styles.tableCellRight,
+                        {
+                          flex: column.flex || 1,
+                          borderRightWidth: isLastColumn ? 0 : 1,
+                        },
+                      ]
+                    : align === 'center'
+                      ? [
+                          styles.tableCellCenter,
+                          {
+                            flex: column.flex || 1,
+                            borderRightWidth: isLastColumn ? 0 : 1,
+                          },
+                        ]
+                      : isLastColumn
+                        ? [
+                            styles.tableCellLast,
+                            {
+                              flex: column.flex || 1,
+                              borderRightWidth: 0,
+                            },
+                          ]
+                        : [styles.tableCell, { flex: column.flex || 1 }];
+
+            return (
+              <View key={column.key} style={cellStyle}>
+                <Text>{isFirstRowColumn ? firstRow.value : ''}</Text>
+              </View>
+            );
+          })}
+        </View>
+      )}
+
+      {/* Data Rows */}
+      {data.map((row, rowIndex) => {
+        const isLastRow = rowIndex === data.length - 1;
+
+        return (
+          <View
+            key={rowIndex}
+            style={[
+              styles.tableRow,
+              !isLastRow ? styles.tableBorderBottom : {},
+            ]}
+          >
+            {columns.map((column, colIndex) => {
+              const isLastColumn = colIndex === columns.length - 1;
+              const align = column.align || 'left';
+
+              // Get cell content from column.cell function or fallback to row value
+              let cellContent: ReactNode;
+              if (column.cell) {
+                cellContent = column.cell({ row, index: rowIndex });
+              } else {
+                cellContent =
+                  ((row as Record<string, unknown>)[column.key] as ReactNode) ??
+                  '-';
+              }
+
+              const cellStyle =
+                column.key === 'no'
+                  ? [styles.tableCellNo, { flex: column.flex || 1 }]
+                  : align === 'right'
+                    ? [
+                        styles.tableCellRight,
+                        {
+                          flex: column.flex || 1,
+                          borderRightWidth: isLastColumn ? 0 : 1,
+                        },
+                      ]
+                    : align === 'center'
+                      ? [
+                          styles.tableCellCenter,
+                          {
+                            flex: column.flex || 1,
+                            borderRightWidth: isLastColumn ? 0 : 1,
+                          },
+                        ]
+                      : isLastColumn
+                        ? [
+                            styles.tableCellLast,
+                            { flex: column.flex || 1, borderRightWidth: 0 },
+                          ]
+                        : [
+                            styles.tableCell,
+                            {
+                              flex: column.flex || 1,
+                              borderRightWidth: isLastColumn ? 0 : 1,
+                            },
+                          ];
+
+              return (
+                <View key={column.key} style={cellStyle}>
+                  {typeof cellContent === 'string' ||
+                  typeof cellContent === 'number' ? (
+                    <Text>{String(cellContent)}</Text>
+                  ) : (
+                    cellContent
+                  )}
+                </View>
+              );
+            })}
+          </View>
+        );
+      })}
+    </>
+  );
+};
+
+export type { PdfColumn };

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

@@ -0,0 +1,141 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { ReactNode } from 'react';
+import type { PdfColumn } from './types';
+
+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<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data: TData[];
+  label?: string;
+}
+
+export const PdfTfoot = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+  label = 'Total',
+}: PdfTfootProps<TData>) => {
+  return (
+    <View style={[styles.tableRow, styles.summaryRow]}>
+      {columns.map((column, index) => {
+        const isLastColumn = index === columns.length - 1;
+
+        // Get footer content from column definition
+        let footerContent: ReactNode;
+        if (typeof column.footer === 'function') {
+          footerContent = column.footer(data);
+        } else {
+          footerContent = column.footer;
+        }
+
+        // Use label for first column (usually 'no' column)
+        const displayContent = column.key === 'no' ? label : footerContent;
+
+        // Determine alignment
+        const align = column.footerAlign || column.align || 'left';
+        const color = column.footerColor || 'black';
+
+        const cellStyle =
+          column.key === 'no'
+            ? [
+                styles.tableCellNo,
+                {
+                  flex: column.flex || 1,
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                  color,
+                },
+              ]
+            : align === 'right'
+              ? [
+                  styles.tableCellRight,
+                  {
+                    flex: column.flex || 1,
+                    color,
+                    borderRightWidth: isLastColumn ? 0 : 1,
+                  },
+                ]
+              : align === 'center'
+                ? [
+                    styles.tableCellCenter,
+                    {
+                      flex: column.flex || 1,
+                      color,
+                      borderRightWidth: isLastColumn ? 0 : 1,
+                    },
+                  ]
+                : isLastColumn
+                  ? [styles.tableCellLast, { flex: column.flex || 1, color }]
+                  : [styles.tableCell, { flex: column.flex || 1, color }];
+
+        return (
+          <View key={column.key} style={cellStyle}>
+            {displayContent !== undefined && displayContent !== null ? (
+              typeof displayContent === 'string' ||
+              typeof displayContent === 'number' ? (
+                <Text>{String(displayContent)}</Text>
+              ) : (
+                displayContent
+              )
+            ) : (
+              <Text>-</Text>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export type { PdfColumn };

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { ReactNode } from 'react';
+import type { PdfColumn } from './types';
+
+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<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data?: TData[];
+}
+
+export const PdfThead = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+}: PdfTheadProps<TData>) => {
+  return (
+    <View style={[styles.tableRow, styles.tableHeader]}>
+      {columns.map((column, index) => {
+        const isLastColumn = index === columns.length - 1;
+
+        // Get header content from column definition
+        let headerContent: ReactNode;
+        if (typeof column.header === 'function') {
+          headerContent = column.header(data || []);
+        } else {
+          headerContent = column.header || column.key;
+        }
+
+        // Determine alignment - columns align right by default for numeric data
+        const align = column.align || 'left';
+
+        const cellStyle =
+          align === 'right'
+            ? [
+                styles.tableCellHeaderRight,
+                {
+                  flex: column.flex || 1,
+                  textAlign: 'right' as const,
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ]
+            : [
+                styles.tableCellHeader,
+                {
+                  flex: column.flex || 1,
+                  textAlign: align as 'left' | 'center' | 'right',
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ];
+
+        return (
+          <View key={column.key} style={cellStyle}>
+            {typeof headerContent === 'string' ? (
+              <Text>{headerContent}</Text>
+            ) : (
+              headerContent
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export type { PdfColumn };

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+/**
+ * PdfColumn - Mirip dengan ColumnDef di TanStack Table
+ * Mengatur header (thead), body (tbody), dan footer (tfoot) dalam satu definisi
+ */
+export interface PdfColumn<TData = Record<string, unknown>> {
+  key: string;
+  flex?: number;
+
+  // Header configuration (thead)
+  header?: string | ((data: TData[]) => ReactNode);
+
+  // Body configuration (tbody)
+  align?: 'left' | 'center' | 'right';
+  cell?: (props: { row: TData; index: number }) => ReactNode | string | number;
+
+  // Footer configuration (tfoot)
+  footer?: string | number | ((data: TData[]) => ReactNode | string | number);
+  footerAlign?: 'left' | 'center' | 'right';
+  footerColor?: string;
+}
+
+export type { PdfColumn as default };

src/components/helper/pdf/typography/PdfTypography.tsx

@@ -0,0 +1,80 @@
+import { Color } from '@/types/theme';
+import { Text, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
+
+type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';
+
+type TypographyVariant = Color | 'default';
+
+type PdfTypographyProps = {
+  children: React.ReactNode;
+  size?: TypographySize;
+  variant?: TypographyVariant;
+  color?: string;
+  style?: Style;
+};
+
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
+  h2: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  h3: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  h4: {
+    fontSize: 9,
+    fontWeight: 'bold',
+    marginBottom: 3,
+  },
+  p: {
+    fontSize: 10,
+    marginBottom: 4,
+  },
+  small: {
+    fontSize: 8,
+    marginBottom: 2,
+  },
+  label: {
+    fontSize: 9,
+    marginBottom: 5,
+  },
+});
+
+const variantColors: Record<TypographyVariant, string> = {
+  default: '#333333',
+  primary: '#1f74bf',
+  secondary: '#6B7280',
+  accent: '#8B5CF6',
+  neutral: '#6B7280',
+  info: '#3B82F6',
+  success: '#065F46',
+  warning: '#92400E',
+  error: '#DC2626',
+  none: '#333333',
+};
+
+export const PdfTypography = ({
+  children,
+  size = 'p',
+  variant = 'default',
+  color,
+  style,
+}: PdfTypographyProps) => {
+  const sizeStyle = styles[size];
+  const textColor = color || variantColors[variant];
+
+  return (
+    <Text style={[sizeStyle, { color: textColor }, ...(style ? [style] : [])]}>
+      {children}
+    </Text>
+  );
+};

src/components/helper/pdf/utils/pdf-badge.ts

@@ -0,0 +1,65 @@
+export type StatusColor = {
+  bg: string;
+  text: string;
+  border: string;
+};
+
+// Due status colors (for debt supplier reports)
+export const dueStatusColors: Record<string, StatusColor> = {
+  'SUDAH JATUH TEMPO': {
+    bg: '#FEE2E2',
+    text: '#991B1B',
+    border: '#F87171',
+  }, // error/red
+  'BELUM JATUH TEMPO': {
+    bg: '#D1FAE5',
+    text: '#065F46',
+    border: '#34D399',
+  }, // success/green
+  'MENDEKATI JATUH TEMPO': {
+    bg: '#FEF3C7',
+    text: '#92400E',
+    border: '#FBBF24',
+  }, // warning/yellow
+};
+
+// Payment status colors (for customer payment & debt supplier reports)
+export const paymentStatusColors: Record<string, StatusColor> = {
+  'BELUM LUNAS': {
+    bg: '#FEF3C7',
+    text: '#92400E',
+    border: '#FBBF24',
+  }, // warning/yellow
+  LUNAS: {
+    bg: '#DBEAFE',
+    text: '#1E40AF',
+    border: '#60A5FA',
+  }, // primary/blue
+  'PEMBAYARAN SEBAGIAN': { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green
+  PEMBAYARAN: {
+    bg: '#D1FAE5',
+    text: '#065F46',
+    border: '#34D399',
+  }, // success/green
+};
+
+// Fallback color for unknown statuses
+export const fallbackStatusColor: StatusColor = {
+  bg: '#F3F4F6',
+  text: '#374151',
+  border: '#D1D5DB',
+}; // neutral
+
+export const getPDFBadgeStyle = (
+  statusText: string,
+  type: 'due' | 'payment' = 'payment'
+): StatusColor => {
+  const normalizedStatus = statusText.toUpperCase().trim();
+
+  const colors =
+    type === 'due'
+      ? dueStatusColors[normalizedStatus]
+      : paymentStatusColors[normalizedStatus];
+
+  return colors || fallbackStatusColor;
+};

src/components/helper/skeleton/DataStateSkeleton.tsx

@@ -0,0 +1,31 @@
+import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
+
+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/DropFileInput.tsx

@@ -134,14 +134,20 @@ const DropFileInput: React.FC<DropFileInputProps> = ({
 
         {!isError && bottomLabel && (
           <p
-            className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
+            className={cn(
+              'w-full mt-1.5 text-xs opacity-60',
+              className?.bottomLabel
+            )}
           >
             {bottomLabel}
           </p>
         )}
         {isError && (
           <p
-            className={cn('w-full text-sm text-error', className?.errorMessage)}
+            className={cn(
+              'w-full mt-1.5 text-xs text-error',
+              className?.errorMessage
+            )}
           >
             {errorMessage}
           </p>

src/components/input/FileInput.tsx

@@ -41,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
       )}
     >
@@ -49,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,
             },
@@ -77,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/PatternInput.tsx

@@ -4,7 +4,6 @@ import { ChangeEvent } from 'react';
 import {
   PatternFormat,
   NumberFormatBase,
-  NumberFormatBaseProps,
   OnValueChange,
 } from 'react-number-format';
 import TextInput, { TextInputProps } from '@/components/input/TextInput';

src/components/input/RadioInput.tsx

@@ -144,12 +144,12 @@ export const RadioGroup = ({
 
         {/* Label bawah */}
         {!isError && bottomLabel && (
-          <p className='text-sm opacity-60'>{bottomLabel}</p>
+          <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
         )}
 
         {/* Pesan error */}
         {isError && errorMessage && (
-          <p className='text-sm text-error'>{errorMessage}</p>
+          <p className='mt-1.5 text-xs text-error'>{errorMessage}</p>
         )}
       </div>
     </RadioGroupContext.Provider>

src/components/input/SelectInput.tsx

@@ -9,18 +9,23 @@ 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 {
+export interface OptionType<T = string | number> {
-  value: string | number;
+  value: T;
   label: string;
   className?: string;
   labelClassName?: string;
@@ -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,98 +234,272 @@ 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}
-        isRtl={isRtl}
-        isSearchable={isSearchable}
-        placeholder={placeholder}
-        className={cn('w-full', className?.select)}
-        classNames={{
-          ...(!startAdornment && {
-            control: ({ isFocused, isDisabled }) =>
-              cn(
-                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
                 {
-                  'border-red-500! ring-2 ring-red-200': isError,
+                  'bg-base-100 border-base-content/10': !isDisabled,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'bg-base-200 border-base-content/10': isDisabled,
-                  'border-gray-300': !isError && !isFocused,
+                  'border-error': isError,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                },
-                }
+                className?.inputPrefix
-              ),
+              )}
-            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+            >
-          }),
+              {inputPrefix}
-          placeholder: () =>
+            </div>
-            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+          )}
-          singleValue: () =>
-            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-          input: () => cn('text-gray-900'),
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
-          dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded hover:bg-gray-100', {
-              'text-gray-900': isFocused,
-              'text-gray-500': !isFocused,
-              'text-error!': isError,
-            }),
-          menu: () =>
-            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
-          menuList: () => cn('p-2! max-h-60 overflow-auto'),
-          option: ({ isFocused, isSelected }) =>
-            cn('mt-1 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-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
-              selectedValues[index]?.className
-            );
-          },
-          multiValueLabel: ({ getValue, index }) => {
-            const selectedValues = getValue() as T[];
-            return cn('text-indigo-700', selectedValues[index]?.labelClassName);
-          },
-        }}
-        components={{
-          ...components,
-          ...(optionComponent ? { Option: optionComponent } : {}),
-        }}
-        {...(startAdornment && {
-          shouldShowAdornment,
-          startAdornment,
-        })}
-        menuPortalTarget={
-          typeof document !== 'undefined'
-            ? (menuPortalTarget ?? document.body)
-            : undefined
-        }
-        styles={{
-          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-        }}
-      />
 
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+          <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 transition-shadow', 'rounded-lg!', {
+                  'bg-base-100!': !isDisabled && !readOnly,
+                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-error!': isError,
+                  'ring-2 ring-error/20': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment && !isError,
+                  'border-base-content/10!': !isError && !isFocused,
+                  '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', {
+                  'text-error!': isError,
+                }),
+              singleValue: () =>
+                cn('m-0! text-gray-900 text-sm leading-tight', {
+                  'text-error!': isError && !readOnly,
+                  '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-base-100 border-base-content/10': !isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
+                  'border-error': isError,
+                },
+                className?.inputSuffix
+              )}
+            >
+              {inputSuffix}
+            </div>
+          )}
+        </div>
+      ) : (
+        <SelectComponent<T, boolean, GroupBase<T>>
+          instanceId='select'
+          value={value ?? (isMulti ? [] : null)}
+          onChange={onChange ? handleChange : undefined}
+          options={options}
+          menuIsOpen={openMenu}
+          inputValue={internalInputValue}
+          onInputChange={internalInputChangeHandler}
+          onMenuClose={() => setInternalInputValue('')}
+          isMulti={isMulti}
+          isDisabled={isDisabled || readOnly}
+          isLoading={isLoading}
+          isClearable={isClearable}
+          isRtl={isRtl}
+          isSearchable={isSearchable}
+          placeholder={placeholder}
+          closeMenuOnSelect={closeMenuOnSelect}
+          hideSelectedOptions={hideSelectedOptions}
+          className={cn('w-full', className?.select)}
+          classNames={{
+            control: ({ isFocused, isDisabled }) =>
+              cn('w-full border transition-shadow rounded-lg!', {
+                'bg-base-100!': !isDisabled && !readOnly,
+                'bg-base-200! text-gray-400 cursor-not-allowed':
+                  isDisabled && !readOnly,
+                'bg-transparent! cursor-not-allowed!': readOnly,
+                'cursor-pointer!': !readOnly && !isDisabled,
+                'border-error!': isError,
+                'ring-2 ring-error/20': isError,
+                'border-indigo-500 ring-2 ring-indigo-200':
+                  isFocused && !startAdornment && !isError,
+                'border-base-content/10!': !isError && !isFocused,
+              }),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
+            placeholder: () =>
+              cn('text-gray-400 text-sm leading-tight', {
+                'text-error!': isError,
+              }),
+            singleValue: () =>
+              cn('m-0! text-gray-900 text-sm leading-tight', {
+                'text-error!': isError && !readOnly,
+                '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}
+        />
+      )}
+
+      {isError && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+      )}
       {!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>
       )}
     </div>
   );
 };
 
 const useSelect = <T,>(
-  basePath: string,
+  basePath: string | null,
   valueKey: keyof T | string,
   labelKey: keyof T | string,
   searchKey: string = 'search',
@@ -288,34 +507,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;