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

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

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

.gitlab-ci.yml

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

Dockerfile

@@ -1,38 +1,25 @@
-# =========================
-# Builder stage
-# =========================
-FROM golang:1.23-alpine AS builder
+FROM node:20-alpine
+
+RUN apk add --no-cache git bash build-base curl
 
-RUN apk add --no-cache git ca-certificates tzdata
 WORKDIR /app
 
-COPY go.mod go.sum ./
-RUN go mod download
+COPY package*.json ./
+RUN npm ci
 
 COPY . .
 
-# Build API binary
-RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
-    go build -trimpath -ldflags="-s -w" -o lti-api ./cmd/api
+# Buat config agar Next tahu output: export
+RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
 
-# Build SEED binary (pastikan cmd/seed ada)
-RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
-    go build -trimpath -ldflags="-s -w" -o lti-seed ./cmd/seed
+# Build project (Next.js 15 otomatis static export)
+RUN NEXT_DISABLE_TURBOPACK=1 npx next build
 
-# =========================
-# Runtime stage
-# =========================
-FROM alpine:3.20
+# Copy static assets dan hasil build agar bisa diakses
+RUN mkdir -p .next/server/app/_next && \
+    cp -r .next/static .next/server/app/_next/static && \
+    cp -r public/* .next/server/app/
 
-RUN apk add --no-cache ca-certificates tzdata curl bash postgresql-client \
-  && adduser -D -H -u 10001 appuser
+EXPOSE 3000
 
-WORKDIR /app
-
-COPY --from=builder /app/lti-api /app/lti-api
-COPY --from=builder /app/lti-seed /app/lti-seed
-
-USER appuser
-EXPOSE 8081
-
-CMD ["/app/lti-api"]
+CMD ["npx", "serve", ".next/server/app", "-l", "3000"]

docker-compose.yaml

@@ -0,0 +1,39 @@
+version: '3.9'
+
+services:
+  dev-web-lti:
+    container_name: dev-web-lti
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3002:3000'
+    env_file:
+      - .env
+    environment:
+      NODE_ENV: production
+      APP_ENV: production
+    networks:
+      - dev-lti-network
+    restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: '3.0'
+          memory: 3G
+        reservations:
+          cpus: '1.0'
+          memory: 512M
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    # Optional: aktifkan healthcheck jika punya endpoint
+    # healthcheck:
+    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
+    #   interval: 10s
+    #   timeout: 3s
+    #   retries: 10
+    #   start_period: 15s
+
+networks:
+  dev-lti-network:
+    external: true

package.json

@@ -15,36 +15,22 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "embla-carousel-react": "^8.6.0",
-    "exceljs": "^4.4.0",
     "formik": "^2.4.6",
-    "html-to-image": "^1.11.13",
-    "input-otp": "^1.4.2",
     "jspdf": "^3.0.4",
     "jspdf-autotable": "^5.0.2",
-    "lucide-react": "^0.562.0",
     "moment": "^2.30.1",
     "next": "15.5.9",
-    "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react": "^19.1.2",
+    "react": "19.1.0",
     "react-day-picker": "^9.11.1",
-    "react-dom": "^19.1.2",
+    "react-dom": "19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-hook-form": "^7.70.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
-    "react-resizable-panels": "2.1.7",
     "react-select": "^5.10.2",
-    "recharts": "^3.6.0",
-    "sonner": "^2.0.7",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
-    "vaul": "^1.1.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
@@ -56,7 +42,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "daisyui": "^5.5.14",
+    "daisyui": "^5.5.8",
     "eslint": "^9",
     "eslint-config-next": "^15.5.7",
     "husky": "^9.1.7",

src/app/closing/detail/page.tsx

@@ -3,34 +3,30 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-import ClosingDetail from '@/components/pages/closing/ClosingDetailTabs';
+import ClosingDetail from '@/components/pages/closing/ClosingDetail';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { ProjectFlockKandangApi } from '@/services/api/production';
 
 const ClosingDetailPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const closingId = searchParams.get('closingId');
-  const kandangId = searchParams.get('kandangId'); // project flock kandang ID
 
   const { data: closing, isLoading: isLoadingClosing } = useSWR(
     closingId,
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
-  // WORKAROUND - get flock data from closing ID
-  const { data: projectData, isLoading: isLoadingProject } = useSWR(
-    `flock-${closingId}`,
-    () => ProjectFlockApi.getSingle(Number(closingId))
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+    closingId ? `sales-${closingId}` : null,
+    () => ClosingApi.getPenjualan(Number(closingId))
   );
-  // WORKAROUND - get kandang data from closing ID
-  const { data: kandangData, isLoading: isLoadingKandang } = useSWR(
-    kandangId ? `kandang-${closingId}-${kandangId}` : null,
-    () => ProjectFlockKandangApi.getSingle(Number(kandangId))
+
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
   );
 
   if (!closingId) {
@@ -48,7 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -58,11 +54,11 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
-          projectData={
-            isResponseSuccess(projectData) ? projectData.data : undefined
-          }
-          kandangData={
-            isResponseSuccess(kandangData) ? kandangData.data : undefined
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.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-3'>
+    <section className='w-full p-4'>
       <ClosingsTable />
     </section>
   );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/dashboard/page.tsx

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

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

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

src/app/expense/page.tsx

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

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

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

src/app/expense/realization/page.tsx

@@ -37,7 +37,7 @@ const ExpenseRealization = () => {
   const isExpenseCanBeRealized =
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    expense.data.latest_approval.step_number === 4;
+    expense.data.latest_approval.step_number === 3;
 
   if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
     if (typeof window !== 'undefined') {

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

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

src/app/globals.css

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

src/app/inventory/movement/page.tsx

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

src/app/layout.tsx

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

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

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

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

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

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

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

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

src/app/marketing/detail/page.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+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/not-found.tsx

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

src/app/page.tsx

@@ -3,9 +3,10 @@
 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 { isLoadingUser } = useAuth();
+  const { user, isLoadingUser } = useAuth();
 
   const router = useRouter();
   const pathname = usePathname();
@@ -24,9 +25,5 @@ export default function Home() {
     );
   }
 
-  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>
-  );
+  return <>Loading...</>;
 }

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 from 'react';
-// import React, { useImperativeHandle } from 'react';
+import React, { useImperativeHandle } from 'react';
+import toast from 'react-hot-toast';
 
 const AddProjectFlock = () => {
   // useImperativeHandle(ref, () => ({

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

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

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

@@ -1,6 +1,7 @@
 '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';
@@ -12,10 +13,11 @@ const ProjectFlockDetailPage = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -48,3 +50,5 @@ 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 React, { ReactNode, useEffect } from 'react';
+import Drawer from '@/components/Drawer';
+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,12 +23,9 @@ 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');
       }
@@ -37,14 +34,6 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
-  useEffect(() => {
-    if (isOpen && !formModal.open) {
-      formModal.openModal();
-    } else {
-      formModal.closeModal();
-    }
-  }, [isOpen]);
-
   return (
     <>
       {/* List page always rendered */}
@@ -54,19 +43,18 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Modal only on /add */}
-      <Modal
-        ref={formModal.ref}
-        position='end'
-        onBackdropClick={handleBackdropClick}
-        className={{
-          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+      {/* Render Drawer only on /add */}
+      <Drawer
+        open={isOpen}
+        setOpen={(v) => {
+          if (!v) router.push('/production/project-flock');
         }}
-      >
-        <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>
+        closeOnBackdropClick={isDetail ? true : false}
+        onBackdropClick={handleBackdropClick}
+        variant='right'
+        zIndex='99999'
+        sidebarContent={isOpen && <div className=''>{children}</div>}
+      />
     </>
   );
 }

src/app/production/recording/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/production/uniformity/layout.tsx

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

src/app/production/uniformity/page.tsx

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

src/app/purchase/page.tsx

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

src/app/report/expense/page.tsx

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

src/app/report/finance/page.tsx

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

src/app/report/marketing/page.tsx

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

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

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

src/components/Alert.tsx

@@ -1,16 +1,15 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } 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, ref, variant, color, className }: AlertProps) => {
+const Alert = ({ children, variant, color, className }: AlertProps) => {
   const alertBaseClassName = cn('alert', {
     'alert-soft': variant === 'soft',
     'alert-outline': variant === 'outline',
@@ -22,11 +21,7 @@ const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
     'alert-error': color === 'error',
   });
 
-  return (
-    <div ref={ref} className={cn(alertBaseClassName, className)}>
-      {children}
-    </div>
-  );
+  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
 };
 
 export default Alert;

src/components/Badge.tsx

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

src/components/Breadcrumb.tsx

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

src/components/Button.tsx

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

src/components/Card.tsx

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

src/components/Drawer.tsx

@@ -15,7 +15,6 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
-  expandedContent?: ReactNode;
 }
 
 type DrawerClassName = {
@@ -24,7 +23,6 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
-  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -38,7 +36,6 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
-  expandedContent,
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -49,24 +46,12 @@ const Drawer = ({
       drawerSidebarContent: 'min-h-full bg-base-100',
     };
 
-    const getSidebarWidth = () => {
-      if (variant === 'sidebar') {
-        return expandedContent
-          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
-          : 'w-full max-w-[300px] lg:w-[300px]';
-      }
-      if (className?.drawerSidebarContent) {
-        return '';
-      }
-      return 'w-full sm:min-w-120 sm:w-fit';
-    };
-
     if (variant === 'sidebar') {
       return {
         ...baseClassNames,
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full max-w-[300px] lg:w-[300px]'
         ),
       };
     } else if (variant === 'right') {
@@ -75,11 +60,11 @@ const Drawer = ({
         drawer: cn(baseClassNames.drawer, 'drawer-end'),
         drawerSide: cn(
           baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
+          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full sm:min-w-120 sm:w-fit'
         ),
       };
     } else if (variant === 'left') {
@@ -91,7 +76,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
+          'w-full sm:min-w-120 sm:w-fit'
         ),
       };
     }
@@ -153,37 +138,14 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content - Full height container */}
+        {/* Sidebar Content */}
         <div
           className={cn(
-            'flex h-screen bg-base-100 overflow-hidden',
-            variant === 'right' && 'flex-row'
+            varianClassName?.drawerSidebarContent,
+            className?.drawerContent
           )}
         >
-          {/* Primary Sidebar Content */}
-          <div
-            className={cn(
-              varianClassName?.drawerSidebarContent,
-              className?.drawerSidebarContent,
-              'overflow-y-auto'
-            )}
-          >
-            {sidebarContent}
-          </div>
-
-          {/* Expanded Drawer (Right side, side-by-side) */}
-          {expandedContent && (
-            <div
-              className={cn(
-                'border-l border-gray-200 bg-white flex flex-col h-full',
-                className?.drawerExpandedContent
-              )}
-            >
-              <div className='overflow-y-auto flex-1 h-full'>
-                {expandedContent}
-              </div>
-            </div>
-          )}
+          {sidebarContent}
         </div>
       </div>
     </div>

src/components/FloatingActionsButton.tsx

@@ -39,8 +39,8 @@ const FloatingActionsButton = ({
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
     selectedRowIds.length > 0
-      ? 'bottom-[5%] opacity-100'
-      : 'bottom-[-5%] opacity-0';
+      ? 'bottom-[10%] opacity-100'
+      : 'bottom-[-10%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -60,7 +60,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
         'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
         'bg-slate-950 backdrop-blur-md'
       )}

src/components/MainDrawer.tsx

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

src/components/Modal.tsx

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

src/components/Navbar.tsx

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

src/components/Table.tsx

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

src/components/Tabs.tsx

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

src/components/helper/ApprovalStepsV2.tsx

@@ -1,205 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-
-import { Icon } from '@iconify/react';
-import { BaseApproval } from '@/types/api/api-general';
-import Button from '@/components/Button';
-
-import { cn, formatDate } from '@/lib/helper';
-
-interface ApprovalStepsV2Props {
-  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

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

src/components/helper/NotFoundPage.tsx

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

src/components/helper/PermissionNotFound.tsx

@@ -1,17 +1,10 @@
-import Button from '@/components/Button';
-
 const PermissionNotFound = () => {
   return (
     <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>
-        Hak Akses Tidak Ditemukan
-      </h2>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
       <p className='text-gray-600 text-center'>
-        Anda tidak memiliki hak akses untuk mengakses halaman ini.
+        You do not have permission to access this page.
       </p>
-      <Button href='/dashboard' className='text-base-100'>
-        Kembali ke Dashboard
-      </Button>
     </div>
   );
 };

src/components/helper/RequireAuth.tsx

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

src/components/helper/StatusBadge.tsx

@@ -1,66 +0,0 @@
-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 = 20,
+  leftIconSize = 24,
   leftIconHref,
   leftIconOnClick,
   leftIconClassName,
@@ -43,7 +43,7 @@ const DrawerHeader = ({
         icon={leftIcon}
         width={leftIconSize}
         height={leftIconSize}
-        className={cn('cursor-pointer text-base-content ', leftIconClassName)}
+        className={cn('cursor-pointer', leftIconClassName)}
       />
     );
 
@@ -58,7 +58,6 @@ const DrawerHeader = ({
     if (leftIconOnClick) {
       return (
         <button
-          type='button'
           onClick={leftIconOnClick}
           className='hover:text-gray-400 bg-transparent border-none p-0'
         >
@@ -73,25 +72,20 @@ const DrawerHeader = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center p-4 border-b border-base-content/10',
+        'flex flex-row justify-between items-center px-4 pt-4',
         className
       )}
     >
       {/* Left Side */}
-      <div className='flex flex-row h-full gap-3 items-center'>
+      <div className='flex flex-row h-full gap-2 items-center'>
         {renderLeftIcon()}
 
         {showDivider && subtitle && (
-          <div className='w-px h-full border-none bg-base-content/10' />
+          <div className='divider divider-horizontal p-0 m-0'></div>
         )}
 
         {subtitle && (
-          <div
-            className={cn(
-              'text-sm font-medium text-base-content/50',
-              subtitleClassName
-            )}
-          >
+          <div className={cn('text-sm text-neutral', subtitleClassName)}>
             {subtitle}
           </div>
         )}

src/components/helper/form/FormErrors.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/input/DateInput.tsx

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

src/components/input/DebouncedTextArea.tsx

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

src/components/input/FileInput.tsx

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

src/components/input/PatternInput.tsx

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

src/components/input/SelectInput.tsx

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

src/components/input/SelectInputCheckbox.tsx

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