Merge branch 'dev/randy' into 'fix/FE/US-74/TASK-270-fixing-periode-project-flock'

[FE/FE][US#74/TASK#270] Fixing Project Flock

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

.gitignore

@@ -42,6 +42,3 @@ next-env.d.ts
 
 # idea
 .idea
-
-# claude
-.claude

.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
@@ -26,33 +15,14 @@ default:
   script:
     - echo "Installing dependencies..."
     - npm ci --no-audit --no-fund
-    - echo "Build env used:"
-    - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
-    - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
-    - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
     - echo "Building Next.js static export..."
     - npx next build
-    - |
-      mkdir -p out
-      cat <<EOF > out/build-info.json
-      {
-        "commit": "$CI_COMMIT_SHORT_SHA",
-        "pipeline": "$CI_PIPELINE_ID",
-        "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
-        "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
-        "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
-        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
-      }
-      EOF
   artifacts:
     name: 'out-$CI_COMMIT_SHORT_SHA'
     paths:
       - out/
     expire_in: 1 week
 
-# ==========================================================
-# 🚀 Deploy Template
-# ==========================================================
 .deploy_template: &deploy_template
   stage: deploy
   image:
@@ -87,8 +57,8 @@ default:
 
       if [ "$CI_COMMIT_BRANCH" = "development" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-STAGING"
+        ENVIRONMENT_NAME="WEB-LTI-PROD"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -96,11 +66,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 +98,7 @@ default:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ==========================================================
+# ====== DEVELOPMENT (Branch development) ======
-# ==== DEVELOPMENT (Branch development) ======
-# ==========================================================
 build:dev:
   <<: *build_template
   rules:
@@ -138,10 +106,8 @@ build:dev:
   environment:
     name: development
   variables:
-    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
-    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
 deploy:dev:
   <<: *deploy_template
@@ -155,31 +121,26 @@ deploy:dev:
   environment:
     name: development
     url: https://dev-lti-erp.mbugroup.id
+# ====== PRODUCTION ======
+# build:production:
+#   <<: *build_template
+#   rules:
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
+#   environment:
+#     name: production
 
-# ==========================================================
+# deploy:production:
-# ====== STAGING (Branch staging) ======
+#   <<: *deploy_template
-# ==========================================================
+#   needs: ["build:production"]
-build:staging:
+#   rules:
-  <<: *build_template
+#     - if: '$CI_COMMIT_BRANCH == "master"'
-  rules:
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
-    - if: '$CI_COMMIT_BRANCH == "staging"'
+#   variables:
-  environment:
+#     S3_BUCKET: "lti-erp.mbugroup.id"
-    name: staging
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
-  variables:
+#   environment:
-    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
+#     name: production
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
+# url: https://royalgoldcapital.com
-    NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
-deploy:staging:
-  <<: *deploy_template
-  needs: ['build:staging']
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "staging"'
-  variables:
-    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
-    AWS_REGION: 'ap-southeast-3'
-    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
-  environment:
-    name: staging
-    url: https://stg-lti-erp.mbugroup.id

.husky/pre-commit

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

next.config.ts

@@ -3,7 +3,6 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   output: 'export',
   images: { unoptimized: true },
-  trailingSlash: true,
 };
 
 export default nextConfig;

package.json

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

src/app/closing/detail/page.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ClosingDetail from '@/components/pages/closing/ClosingDetail';
-
-import { ClosingApi } from '@/services/api/closing';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { FlockApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { ProjectFlockKandangApi } from '@/services/api/production';
-
-const ClosingDetailPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const closingId = searchParams.get('closingId');
-  const kandangId = searchParams.get('kandangId'); // project flock kandang ID
-
-  const { data: closing, isLoading: isLoadingClosing } = useSWR(
-    closingId,
-    (id: number) => ClosingApi.getGeneralInfo(id)
-  );
-
-  // WORKAROUND - get flock data from closing ID
-  const { data: projectData, isLoading: isLoadingProject } = useSWR(
-    `flock-${closingId}`,
-    () => ProjectFlockApi.getSingle(Number(closingId))
-  );
-  // WORKAROUND - get kandang data from closing ID
-  const { data: kandangData, isLoading: isLoadingKandang } = useSWR(
-    kandangId ? `kandang-${closingId}-${kandangId}` : null,
-    () => ProjectFlockKandangApi.getSingle(Number(kandangId))
-  );
-
-  const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId ? `sales-${closingId}` : null,
-    () => ClosingApi.getPenjualan(Number(closingId))
-  );
-
-  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
-    closingId ? `hpp-ekspedisi-${closingId}` : null,
-    () => ClosingApi.getHppEkspedisi(Number(closingId))
-  );
-
-  if (!closingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingClosing && (!closing || isResponseError(closing))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isLoading =
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingHppEkspedisi ||
-    isLoadingProject ||
-    isLoadingKandang;
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-
-      {!isLoading && isResponseSuccess(closing) && (
-        <ClosingDetail
-          id={Number(closingId)}
-          initialValue={closing.data}
-          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
-          hppExpeditionData={
-            isResponseSuccess(hppEkspedisiData)
-              ? hppEkspedisiData.data
-              : undefined
-          }
-          projectData={
-            isResponseSuccess(projectData) ? projectData.data : undefined
-          }
-          kandangData={
-            isResponseSuccess(kandangData) ? kandangData.data : undefined
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-export default ClosingDetailPage;

src/app/closing/page.tsx

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

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

@@ -34,15 +34,13 @@ const ExpenseEditPage = () => {
     return;
   }
 
-  const isExpenseCanBeEdited =
+  const isExpenseRejectedOrApproved =
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
-    expense.data.latest_approval.step_number !== 5 &&
+    (expense.data.approval.action === 'REJECTED' ||
-    (expense.data.latest_approval.step_number === 1 ||
+      expense.data.approval.step_number === 5);
-      expense.data.latest_approval.step_number === 2 ||
-      expense.data.latest_approval.step_number === 3);
 
-  if (!isLoadingExpense && !isExpenseCanBeEdited) {
+  if (isExpenseRejectedOrApproved) {
     router.back();
     return;
   }

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

@@ -1,62 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseRealizationEditPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isExpenseRealizationCanBeEdited =
-    !isLoadingExpense &&
-    isResponseSuccess(expense) &&
-    expense.data.latest_approval.action !== 'REJECTED' &&
-    (expense.data.latest_approval.step_number === 4 ||
-      expense.data.latest_approval.step_number === 5);
-
-  if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
-    router.back();
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseRealizationForm type='edit' initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseRealizationEditPage;

src/app/expense/realization/layout.tsx

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

src/app/expense/realization/page.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseRealization = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isExpenseCanBeRealized =
-    isResponseSuccess(expense) &&
-    expense.data.latest_approval.action !== 'REJECTED' &&
-    expense.data.latest_approval.step_number === 4;
-
-  if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
-    if (typeof window !== 'undefined') {
-      router.back();
-    }
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseRealizationForm initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseRealization;

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

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

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

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

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

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

src/app/finance/add/page.tsx

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

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

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

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

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

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

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

src/app/finance/detail/layout.tsx

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

src/app/finance/detail/page.tsx

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

src/app/finance/page.tsx

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

src/app/globals.css

@@ -1,46 +1,32 @@
 @import 'tailwindcss';
 @plugin "daisyui";
 @import '../styles/daisyui.css';
-@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';
   default: false;
   prefersdark: false;
   color-scheme: 'light';
-
+  --color-base-100: oklch(98% 0.001 106.423);
-  /* Primary Colors */
+  --color-base-200: oklch(97% 0.001 106.424);
-  --color-primary: oklch(39.4% 0.177 301.9);
+  --color-base-300: oklch(92% 0.003 48.717);
-  --color-primary-content: oklch(87.5% 0.038 274.5);
+  --color-base-content: oklch(22.389% 0.031 278.072);
-
+  --color-primary: oklch(60% 0.126 221.723);
-  /* Secondary Colors */
+  --color-primary-content: oklch(100% 0 0);
-  --color-secondary: oklch(60.1% 0.258 335.7);
+  --color-secondary: oklch(52% 0.105 223.128);
-  --color-secondary-content: oklch(99.4% 0.007 337.8);
+  --color-secondary-content: oklch(100% 0 0);
-
+  --color-accent: oklch(45% 0.085 224.283);
-  /* Accent Colors */
+  --color-accent-content: oklch(100% 0 0);
-  --color-accent: oklch(76.2% 0.155 170.8);
+  --color-neutral: oklch(39% 0.07 227.392);
-  --color-accent-content: oklch(7.2% 0.007 167.6);
+  --color-neutral-content: oklch(100% 0 0);
-
+  --color-info: oklch(58% 0.158 241.966);
-  /* Neutral Colors */
+  --color-info-content: oklch(100% 0 0);
-  --color-neutral: oklch(22.4% 0.032 258.8);
+  --color-success: oklch(62% 0.194 149.214);
-  --color-neutral-content: oklch(87.7% 0.016 257);
+  --color-success-content: oklch(100% 0 0);
-
+  --color-warning: oklch(85% 0.199 91.936);
-  /* Base Colors */
+  --color-warning-content: oklch(0% 0 0);
-  --color-base-100: oklch(100% 0 0); /* #ffffff */
+  --color-error: oklch(57% 0.245 27.325);
-  --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
+  --color-error-content: oklch(100% 0 0);
-  --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --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: oklch(62.3% 0.147 149);
-  --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
-  --color-warning-content: oklch(0% 0 0); /* #000000 */
-  --color-error: oklch(61.8% 0.203 27.8);
-  --color-error-content: oklch(100% 0 0); /* #fffffff */
-
   --radius-selector: 0rem;
   --radius-field: 0.25rem;
   --radius-box: 0.25rem;
@@ -57,12 +43,6 @@
 
 @theme {
   --font-inter: var(--font-inter);
-
-  --container-sm: 40rem;
-  --container-md: 48rem;
-  --container-lg: 64rem;
-  --container-xl: 80rem;
-  --container-2xl: 96rem;
 }
 
 html {

src/app/inventory/adjustment/detail/page.tsx

@@ -12,6 +12,8 @@ const DetailInventoryAdjustment = () => {
 
   // Ambil data dari router state
   useEffect(() => {
+    console.log('Router State');
+    console.log(window.history.state);
     const state = window.history.state?.usr as
       | { inventoryAdjustment?: InventoryAdjustment }
       | undefined;
@@ -24,6 +26,9 @@ const DetailInventoryAdjustment = () => {
 
   const finalData = inventoryAdjustment;
 
+  console.log('Final Data');
+  console.log(finalData);
+
   if (!finalData) {
     return (
       <div className='w-full flex flex-row justify-center items-center p-4'>

src/app/inventory/product/detail/layout.tsx

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

src/app/inventory/product/detail/page.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import InventoryProductDetail from '@/components/pages/inventory/product/detail/InventoryProductDetail';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { InventoryProductApi } from '@/services/api/inventory';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const InventoryProductDetailPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const inventoryProductId = searchParams.get('inventoryProductId');
-
-  const { data: inventoryProduct, isLoading: isLoadingInventoryProduct } =
-    useSWR(inventoryProductId, (id: number) =>
-      InventoryProductApi.getSingle(id)
-    );
-
-  if (!inventoryProductId) {
-    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 (
-    !isLoadingInventoryProduct &&
-    (!inventoryProduct || isResponseError(inventoryProduct))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='size-full'>
-      {isLoadingInventoryProduct && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingInventoryProduct && isResponseSuccess(inventoryProduct) && (
-        <InventoryProductDetail inventoryProduct={inventoryProduct.data} />
-      )}
-    </div>
-  );
-};
-
-export default InventoryProductDetailPage;

src/app/inventory/product/page.tsx

@@ -1,11 +0,0 @@
-import InventoryProductTable from '@/components/pages/inventory/product/InventoryProductTable';
-
-const InventoryProductPage = () => {
-  return (
-    <div className='size-full'>
-      <InventoryProductTable />
-    </div>
-  );
-};
-
-export default InventoryProductPage;

src/app/layout.tsx

@@ -3,7 +3,6 @@ import { Inter } from 'next/font/google';
 import '@/app/globals.css';
 
 import { Toaster } from 'react-hot-toast';
-import { Toaster as SonnerToaster } from '@/figma-make/components/base/sonner';
 import MainDrawer from '@/components/MainDrawer';
 import RequireAuth from '@/components/helper/RequireAuth';
 
@@ -36,7 +35,6 @@ export default function RootLayout({
         </RequireAuth>
 
         <Toaster />
-        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

src/app/marketing/page.tsx

@@ -7,5 +7,4 @@ const Marketing = () => {
     </div>
   );
 };
-
 export default Marketing;

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

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

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

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

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

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

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

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

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

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

src/app/page.tsx

@@ -1,29 +1,11 @@
-'use client';
+import { redirect } from 'next/navigation';
-
-import { useEffect } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { useAuth } from '@/services/hooks/useAuth';
-import { redirectToSSO } from '@/lib/auth-helper';
 
 export default function Home() {
-  const { user, isLoadingUser } = useAuth();
+  redirect('/dashboard');
 
-  const router = useRouter();
+  return (
-  const pathname = usePathname();
+    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
-
+      <h1>LTI ERP</h1>
-  useEffect(() => {
+    </main>
-    if (pathname === '/') {
+  );
-      router.replace('/dashboard');
-    }
-  }, [pathname]);
-
-  if (isLoadingUser) {
-    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,18 +1,10 @@
 'use client';
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
-import React, { useImperativeHandle } from 'react';
-import toast from 'react-hot-toast';
 
 const AddProjectFlock = () => {
-  // useImperativeHandle(ref, () => ({
-  //   validate() {
-  //     toast.success('Validating');
-  //     return false;
-  //   },
-  // }));
   return (
-    <section className='w-full flex flex-row justify-center'>
+    <section className='w-full p-4 flex flex-row justify-center'>
       <ProjectFlockForm formType='add' />
     </section>
   );

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

@@ -44,7 +44,7 @@ export default function AddChickinKandang() {
 
   return (
     <>
-      <section className='size-full'>
+      <section className='w-full p-4'>
         {isLoading && <span className='loading loading-spinner loading-xl' />}
         {!isLoading &&
           isResponseSuccess(projectFlockKandang) &&

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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-'use client';
-import ProjectFlockClosingForm from '@/components/pages/production/project-flock/closing/ProjectFlockClosingForm';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockKandangApi } from '@/services/api/production';
-import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const ProjectFlockClosingPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const projectFlockId = searchParams.get('projectFlockId');
-  const projectFlockKandangId = searchParams.get('projectFlockKandangId');
-
-  const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
-    useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
-      ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
-    );
-
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    `get-flock-id/${projectFlockId}`,
-    () => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
-  );
-
-  if (!projectFlockId || !projectFlockKandangId) {
-    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 (
-    !isLoadingProjectFlock &&
-    (!projectFlock || isResponseError(projectFlock)) &&
-    !isLoadingProjectFlockKandang &&
-    (!projectFlockKandang || isResponseError(projectFlockKandang))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full h-full flex flex-col justify-center'>
-      {isLoadingProjectFlock ||
-        (isLoadingProjectFlockKandang && (
-          <span className='loading loading-spinner loading-xl' />
-        ))}
-      {isResponseSuccess(projectFlock) &&
-        isResponseSuccess(projectFlockKandang) && (
-          <ProjectFlockClosingForm
-            projectFlock={projectFlock.data}
-            projectFlockKandang={projectFlockKandang.data}
-          />
-        )}
-    </div>
-  );
-};
-
-export default ProjectFlockClosingPage;

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

@@ -37,7 +37,7 @@ const ProjectFlockEdit = () => {
   }
 
   return (
-    <div className='w-full flex flex-col justify-center'>
+    <div className='w-full p-4 flex flex-col justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}

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

@@ -1,13 +1,12 @@
 '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';
 import useSWR from 'swr';
 
-const ProjectFlockDetailPage = () => {
+const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -38,17 +37,19 @@ const ProjectFlockDetailPage = () => {
   }
 
   return (
-    <div className='w-full h-full flex flex-col justify-center'>
+    <div className='w-full p-4 flex flex-col justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
       {isResponseSuccess(projectFlock) && (
-        <ProjectFlockDetail projectFlock={projectFlock.data} />
+        <ProjectFlockForm
+          formType='detail'
+          initialValues={projectFlock.data}
+          refreshProjectFlocks={refreshProjectFlock}
+        />
       )}
     </div>
   );
 };
 
-export default ProjectFlockDetailPage;
+export default ProjectFlockDetail;
-ProjectFlockDetail;
-ProjectFlockDetail;

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

@@ -1,60 +0,0 @@
-'use client';
-
-import { usePathname, useRouter } from 'next/navigation';
-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';
-
-export default function ProjectFlockLayout({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const toggleValidate = useUiStore((s) => s.toggleValidate);
-
-  const isAdd = pathname.includes('/add');
-  const isEdit = pathname.includes('/detail/edit');
-  const isDetail = pathname.includes('/detail');
-  const isChickin = pathname.includes('/chickin/add/kandang');
-  const isClosing = pathname.includes('/closing');
-
-  const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
-
-  const handleBackdropClick = () => {
-    const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
-      if (isValid) {
-        unsub(); // berhenti listen
-        router.push('/production/project-flock');
-      }
-    });
-
-    toggleValidate();
-  };
-
-  return (
-    <>
-      {/* List page always rendered */}
-      <div className='min-h-sceen w-full relative'>
-        <ProjectFlockTable
-          refresh={() => !isOpen && router.push('/production/project-flock')}
-        />
-      </div>
-
-      {/* Render Drawer only on /add */}
-      <Drawer
-        open={isOpen}
-        setOpen={(v) => {
-          if (!v) router.push('/production/project-flock');
-        }}
-        closeOnBackdropClick={isDetail ? true : false}
-        onBackdropClick={handleBackdropClick}
-        variant='right'
-        zIndex='99999'
-        sidebarContent={isOpen && <div className=''>{children}</div>}
-      />
-    </>
-  );
-}

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

@@ -2,7 +2,7 @@ import ProjectFlockTable from '@/components/pages/production/project-flock/Proje
 
 const ProjectFlock = () => {
   return (
-    <section className='size-full p-4'>
+    <section className='w-full p-4'>
       <ProjectFlockTable />
     </section>
   );

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

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

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

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

src/app/production/recording/grading/add/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const AddGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recording_id');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId && recordingId !== 'new' ? [recordingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (
+    recordingId &&
+    recordingId !== 'new' &&
+    !isLoadingRecording &&
+    (!recording || !isResponseSuccess(recording))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {recordingId && recordingId !== 'new' && isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {(!recordingId ||
+        recordingId === 'new' ||
+        (!isLoadingRecording && recording && isResponseSuccess(recording))) && (
+        <GradingForm
+          type='add'
+          initialValues={
+            isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddGrading;

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const EditGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recordingId');
+  const gradingId = searchParams.get('gradingId');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId ? [recordingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (!recordingId) {
+    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 (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingRecording && recording && isResponseSuccess(recording) && (
+        <GradingForm
+          type='edit'
+          initialValues={recording.data.eggs?.find(
+            (egg) => egg.id === parseInt(gradingId || '0')
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditGrading;

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const DetailGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const gradingId = searchParams.get('gradingId');
+
+  const { data: grading, isLoading: isLoadingGrading } = useSWR(
+    gradingId ? [gradingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (!gradingId) {
+    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 (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingGrading && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingGrading && grading && isResponseSuccess(grading) && (
+        <GradingForm
+          type='detail'
+          initialValues={grading.data.eggs?.find(
+            (egg) => egg.id === parseInt(gradingId)
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DetailGrading;

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

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

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

@@ -1,47 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
-import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-
-const PurchaseEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const purchaseId = searchParams.get('purchaseId');
-
-  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
-    purchaseId,
-    (id: number) => PurchaseApi.getSingle(id)
-  );
-
-  if (!purchaseId) {
-    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 (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingPurchase && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequestForm type='edit' initialValues={purchase.data} />
-      )}
-    </div>
-  );
-};
-
-export default PurchaseEdit;

src/app/purchase/detail/page.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import PurchaseOrderDetail from '@/components/pages/purchase/order/PurchaseOrderDetail';
-import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-
-const PurchaseDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const purchaseId = searchParams.get('purchaseId');
-
-  const {
-    data: purchase,
-    isLoading: isLoadingPurchase,
-    mutate: mutatePurchase,
-  } = useSWR(purchaseId, (id: number) => PurchaseApi.getSingle(id));
-
-  if (!purchaseId) {
-    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 (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4'>
-      {isLoadingPurchase && (
-        <div className='w-full flex flex-row justify-center items-center'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      )}
-      {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseOrderDetail
-          type='detail'
-          initialValues={purchase.data}
-          refetchData={mutatePurchase}
-        />
-      )}
-    </div>
-  );
-};
-
-export default PurchaseDetail;

src/app/purchase/layout.tsx

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

src/app/purchase/page.tsx

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

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

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

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

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

src/app/report/expense/page.tsx

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

src/app/report/finance/page.tsx

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

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

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

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

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

src/app/report/marketing/layout.tsx

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

src/app/report/marketing/page.tsx

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

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

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

src/components/Badge.tsx

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

src/components/Card.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import { HTMLAttributes, ReactNode, useState } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 import Image from 'next/image';
-import Collapse from '@/components/Collapse';
-import { Icon } from '@iconify/react';
 
 export interface CardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
@@ -13,13 +11,8 @@ export interface CardProps
   subtitle?: string;
   image?: string;
   imageAlt?: string;
-  imageWidth?: number;
-  imageHeight?: number;
   actions?: ReactNode;
   footer?: ReactNode;
-  collapsible?: boolean;
-  defaultCollapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
     image?: string;
@@ -28,7 +21,6 @@ export interface CardProps
     subtitle?: string;
     actions?: string;
     footer?: string;
-    collapsible?: string;
   };
   variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
   size?: 'sm' | 'md' | 'lg';
@@ -39,27 +31,14 @@ const Card = ({
   subtitle,
   image,
   imageAlt,
-  imageWidth,
-  imageHeight,
   actions,
   footer,
-  collapsible,
-  defaultCollapsed = false,
-  onCollapsedChange,
   className,
   variant = 'default',
   size = 'md',
   children,
   ...props
 }: CardProps) => {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-
-  const handleCollapsedChange = (open: boolean) => {
-    const collapsed = !open;
-    setIsCollapsed(collapsed);
-    onCollapsedChange?.(collapsed);
-  };
-
   const getCardClasses = () => {
     const baseClasses = 'card bg-base-100';
 
@@ -85,31 +64,11 @@ const Card = ({
     );
   };
 
-  const getImageDimensions = () => {
-    if (variant === 'image-full') {
-      return {
-        width: imageWidth || 128,
-        height: imageHeight || 128,
-      };
-    }
-
-    const cardWidths = {
-      sm: 256, // w-64
-      md: 384, // w-96
-      lg: 448, // w-[28rem]
-    };
-
-    return {
-      width: imageWidth || cardWidths[size],
-      height: imageHeight || 192,
-    };
-  };
-
   const getImageClasses = () => {
     if (variant === 'image-full') {
-      return cn('object-cover', className?.image);
+      return cn('w-32 h-32 object-cover', className?.image);
     }
-    return cn('w-full object-cover', className?.image);
+    return cn('h-48 object-cover', className?.image);
   };
 
   const getBodyClasses = () => {
@@ -144,98 +103,45 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
-  const renderCardContent = () => {
-    const hasContent = children || actions || footer;
-
-    const titleContent = (
-      <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>}
-        </div>
-        {collapsible && (
-          <button
-            onClick={() => handleCollapsedChange(!isCollapsed)}
-            className='btn btn-ghost btn-sm btn-circle'
-            aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
-          >
-            <Icon
-              icon={
-                isCollapsed
-                  ? 'material-symbols:expand-more'
-                  : 'material-symbols:expand-less'
-              }
-              width={20}
-            />
-          </button>
-        )}
-      </div>
-    );
-
-    const cardContent = (
-      <div className='space-y-4'>
-        {children}
-        {actions && <div className={getActionsClasses()}>{actions}</div>}
-        {footer && <div className={getFooterClasses()}>{footer}</div>}
-      </div>
-    );
-
-    return (
-      <>
-        {image && (
-          <figure>
-            <Image
-              src={image}
-              alt={imageAlt || title || 'Card image'}
-              width={getImageDimensions().width}
-              height={getImageDimensions().height}
-              className={getImageClasses()}
-            />
-          </figure>
-        )}
-        <div className={getBodyClasses()}>
-          {collapsible && hasContent ? (
-            <Collapse
-              variant='default'
-              bordered={false}
-              open={!isCollapsed}
-              onOpenChange={handleCollapsedChange}
-              title={titleContent}
-              titleClassName='w-full cursor-pointer'
-              contentClassName='p-0'
-              fullWidth={true}
-            >
-              {cardContent}
-            </Collapse>
-          ) : (
-            <>
-              {(title || subtitle) && (
-                <div className='mb-4'>
-                  {title && <h2 className={getTitleClasses()}>{title}</h2>}
-                  {subtitle && (
-                    <p className={getSubtitleClasses()}>{subtitle}</p>
-                  )}
-                </div>
-              )}
-              {hasContent && cardContent}
-            </>
-          )}
-        </div>
-      </>
-    );
-  };
-
   if (variant === 'image-full' && image) {
     return (
       <div className={getCardClasses()} {...props}>
-        {renderCardContent()}
+        <figure>
+          <Image
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+        <div className={getBodyClasses()}>
+          {title && <h2 className={getTitleClasses()}>{title}</h2>}
+          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+          {children}
+          {actions && <div className={getActionsClasses()}>{actions}</div>}
+        </div>
+        {footer && <div className={getFooterClasses()}>{footer}</div>}
       </div>
     );
   }
 
   return (
     <div className={getCardClasses()} {...props}>
-      {renderCardContent()}
+      {image && (
+        <figure>
+          <Image
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+      )}
+      <div className={getBodyClasses()}>
+        {title && <h2 className={getTitleClasses()}>{title}</h2>}
+        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+        {children}
+        {actions && <div className={getActionsClasses()}>{actions}</div>}
+      </div>
+      {footer && <div className={getFooterClasses()}>{footer}</div>}
     </div>
   );
 };

src/components/Collapse.tsx

@@ -26,9 +26,6 @@ export type CollapseProps = {
   disabled?: boolean;
   /** Allow only one open at a time by switching to radio input */
   asRadio?: boolean;
-  /** Force full width instead of auto-fit when collapsed
-   * (Khusus justify-between dan justify-end) */
-  fullWidth?: boolean;
   /** Extra classnames */
   className?: string;
   titleClassName?: string;
@@ -47,7 +44,6 @@ export const Collapse = ({
   bordered,
   disabled,
   asRadio = false,
-  fullWidth,
   className,
   titleClassName,
   contentClassName,
@@ -72,9 +68,9 @@ export const Collapse = ({
     'collapse',
     variant === 'arrow' && 'collapse-arrow',
     variant === 'plus' && 'collapse-plus',
-    bordered && 'border base-content/20 border-opacity-20 rounded-box',
+    bordered && 'border base-content/20 border-opacity-20 rounded',
     disabled && 'opacity-60 pointer-events-none',
-    !fullWidth && !open && 'w-fit',
+    !open && 'w-fit',
     className
   );
 

src/components/Drawer.tsx

@@ -10,115 +10,28 @@ interface DrawerProps {
   open: boolean;
   setOpen: (newOpenState: boolean) => void;
   openOnLarge?: boolean;
-  variant?: 'sidebar' | 'left' | 'right';
-  zIndex?: string;
-  className?: DrawerClassName;
-  onBackdropClick?: () => void;
-  closeOnBackdropClick?: boolean;
-  expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
-type DrawerClassName = {
-  drawer?: string;
-  drawerContent?: string;
-  drawerSide?: string;
-  drawerOverlay?: string;
-  drawerSidebarContent?: string;
-};
-
 const Drawer = ({
   children,
   sidebarContent,
   open,
   setOpen,
   openOnLarge,
-  variant = 'sidebar',
-  zIndex = '20',
-  className,
-  onBackdropClick,
-  closeOnBackdropClick = true,
-  expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
-  const getDrawerClassNames = (): DrawerClassName => {
-    const baseClassNames = {
-      drawer: 'drawer',
-      drawerContent: 'drawer-content',
-      drawerSide: 'drawer-side',
-      drawerOverlay: 'drawer-overlay',
-      drawerSidebarContent: 'min-h-full bg-base-100',
-    };
-
-    const getSidebarWidth = () => {
-      if (variant === 'sidebar') {
-        return expandedContent
-          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
-          : 'w-full max-w-[300px] lg:w-[300px]';
-      }
-      return 'w-full sm:min-w-120 sm:w-fit';
-    };
-
-    if (variant === 'sidebar') {
-      return {
-        ...baseClassNames,
-        drawerSidebarContent: cn(
-          baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
-        ),
-      };
-    } else if (variant === 'right') {
-      return {
-        ...baseClassNames,
-        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'
-        ),
-        drawerSidebarContent: cn(
-          baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
-        ),
-      };
-    } else if (variant === 'left') {
-      return {
-        ...baseClassNames,
-        drawerSide: cn(
-          baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
-        ),
-        drawerSidebarContent: cn(
-          baseClassNames.drawerSidebarContent,
-          getSidebarWidth()
-        ),
-      };
-    }
-    return baseClassNames; // Fallback for default or unknown variant
-  };
-
-  const varianClassName = getDrawerClassNames();
-
   const toggleDrawer = () => {
     setOpen(!open);
   };
 
   const closeDrawer = () => {
-    if (closeOnBackdropClick) {
+    setOpen(false);
-      setOpen(false);
-    }
-    onBackdropClick && onBackdropClick();
   };
 
   return (
     <div
-      className={cn(
+      className={cn('drawer', {
-        'drawer',
+        'lg:drawer-open': openOnLarge,
-        {
+      })}
-          'lg:drawer-open': openOnLarge,
-        },
-        varianClassName?.drawer,
-        className?.drawer
-      )}
     >
       <input
         type='checkbox'
@@ -127,61 +40,17 @@ const Drawer = ({
         className='drawer-toggle'
       />
 
-      {/* Drawer Content */}
+      <div className='drawer-content'>{children}</div>
-      <div
-        className={cn(varianClassName?.drawerContent, className?.drawerContent)}
-      >
-        {children}
-      </div>
 
-      {/* Drawer Side */}
+      <div className='drawer-side border-r border-solid border-gray-200 z-20'>
-      <div
-        className={cn(
-          varianClassName?.drawerSide,
-          className?.drawerSide,
-          zIndex
-        )}
-      >
         <label
           aria-label='close sidebar'
-          className={cn(
+          className='drawer-overlay'
-            varianClassName?.drawerOverlay,
-            className?.drawerOverlay
-          )}
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content - Full height container */}
+        <div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
-        <div
+          {sidebarContent}
-          className={cn(
-            'flex h-screen bg-base-100 overflow-hidden',
-            variant === 'right' && 'flex-row'
-          )}
-        >
-          {/* Primary Sidebar Content */}
-          <div
-            className={cn(
-              varianClassName?.drawerSidebarContent,
-              className?.drawerContent,
-              'overflow-y-auto'
-            )}
-          >
-            {sidebarContent}
-          </div>
-
-          {/* Expanded Drawer (Right side, side-by-side) */}
-          {expandedContent && (
-            <div
-              className={cn(
-                'border-l border-gray-200 bg-white flex flex-col h-full',
-                expandedWidth
-              )}
-            >
-              <div className='overflow-y-auto flex-1 h-full'>
-                {expandedContent}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

src/components/Dropdown.tsx

@@ -1,114 +0,0 @@
-import React, { ReactNode, useState, useRef } from 'react';
-
-import { cn } from '@/lib/helper';
-
-export interface DropdownProps {
-  trigger: ReactNode;
-  children: ReactNode;
-  className?: {
-    wrapper?: string;
-    trigger?: string;
-    content?: string;
-  };
-  align?: 'start' | 'center' | 'end';
-  direction?: 'top' | 'bottom' | 'left' | 'right';
-  hover?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  close?: boolean;
-  controlled?: boolean;
-}
-
-const Dropdown = ({
-  trigger,
-  children,
-  className,
-  align,
-  direction,
-  hover,
-  defaultOpen = false,
-  open,
-  close,
-  controlled = false,
-}: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const toggleDropdown = () => {
-    if (!controlled) {
-      const newState = !isOpen;
-      setIsOpen(newState);
-    }
-  };
-
-  const getWrapperClasses = () => {
-    const openState = controlled ? open : isOpen;
-
-    return cn(
-      'dropdown',
-      {
-        'dropdown-start': align === 'start',
-        'dropdown-center': align === 'center',
-        'dropdown-end': align === 'end',
-        'dropdown-top': direction === 'top',
-        'dropdown-bottom': direction === 'bottom',
-        'dropdown-left': direction === 'left',
-        'dropdown-right': direction === 'right',
-        'dropdown-hover': hover,
-        'dropdown-open': openState && !close,
-        'dropdown-close': close,
-      },
-      className?.wrapper
-    );
-  };
-
-  const getTriggerClasses = () => {
-    return cn(className?.trigger);
-  };
-
-  const getContentClasses = () => {
-    return cn(
-      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
-      className?.content
-    );
-  };
-
-  if (controlled) {
-    return (
-      <div className={getWrapperClasses()}>
-        {trigger}
-        {open && !close && (
-          <div tabIndex={-1} className={getContentClasses()}>
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div ref={dropdownRef} className={getWrapperClasses()}>
-      <div
-        tabIndex={0}
-        role='button'
-        className={getTriggerClasses()}
-        onClick={toggleDropdown}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleDropdown();
-          }
-        }}
-      >
-        {trigger}
-      </div>
-      {!close && (
-        <div tabIndex={-1} className={getContentClasses()}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;

src/components/FloatingActionsButton.tsx

@@ -1,171 +0,0 @@
-'use client';
-
-import Button from '@/components/Button';
-import Tooltip from '@/components/Tooltip';
-import { cn } from '@/lib/helper';
-import { Icon } from '@iconify/react';
-
-import { useAuth } from '@/services/hooks/useAuth';
-
-type FloatingActionsButtonProps = {
-  actions: {
-    action: 'DETAIL' | 'EDIT' | 'DELETE';
-    icon: string;
-    label?: string;
-    onClick?: () => void;
-    hidden?: boolean;
-    disabled?: boolean;
-    permissions?: string | string[];
-  }[];
-  approvals: {
-    action: 'APPROVED' | 'REJECTED';
-    icon: string;
-    label?: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    permissions?: string | string[];
-  }[];
-  selectedRowIds: number[];
-  onClose: () => void;
-};
-
-const FloatingActionsButton = ({
-  actions,
-  approvals,
-  selectedRowIds,
-  onClose,
-}: FloatingActionsButtonProps) => {
-  const { permissionCheck } = useAuth();
-  // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
-  const positionStyles =
-    selectedRowIds.length > 0
-      ? 'bottom-[5%] opacity-100'
-      : 'bottom-[-5%] opacity-0';
-
-  // Helper untuk menentukan gaya warna tombol approval
-  const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
-    if (action === 'APPROVED') return 'success';
-    if (action === 'REJECTED') return 'error';
-    return 'primary';
-  };
-
-  const getActionColor = (action: 'DETAIL' | 'EDIT' | 'DELETE') => {
-    if (action === 'DETAIL') return 'white';
-    if (action === 'EDIT') return 'warning';
-    if (action === 'DELETE') return 'error';
-    return 'primary';
-  };
-
-  return (
-    // Container utama FAB
-    <div
-      className={cn(
-        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
-        'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
-        'bg-slate-950 backdrop-blur-md'
-      )}
-    >
-      <div className='flex flex-col gap-3'>
-        {/* === BARIS ATAS: Status Seleksi dan Actions (Termasuk Close) === */}
-        <div className='flex justify-between items-center text-white'>
-          <h4 className='text-base font-semibold'>
-            {selectedRowIds.length} Selected
-          </h4>
-
-          <div className='flex flex-row gap-1 items-stretch'>
-            <div className='flex gap-4 items-center'>
-              {/* Render Aksi dari props.actions */}
-              {actions
-                .filter((action) => {
-                  if (action.hidden) return false;
-                  if (action.permissions) {
-                    if (typeof action.permissions === 'string') {
-                      return permissionCheck(action.permissions);
-                    }
-                    return action.permissions.some((permission) =>
-                      permissionCheck(permission)
-                    );
-                  }
-                  return true;
-                })
-                .map((action, index) => {
-                  return (
-                    <Button
-                      key={index}
-                      onClick={action.onClick}
-                      className='text-white hover:text-gray-400 tooltip tooltip-bottom p-0'
-                      variant='link'
-                      disabled={action.disabled}
-                    >
-                      <Tooltip content={action.label || action.action}>
-                        <Icon
-                          icon={action.icon}
-                          width={20}
-                          height={20}
-                          className={`text-${getActionColor(action.action)} font-thin`}
-                        />
-                      </Tooltip>
-                    </Button>
-                  );
-                })}
-
-              <div className='border-[0.5px] border-white/30 h-full'></div>
-
-              {/* Tombol Close */}
-              <Button
-                onClick={onClose}
-                className='text-white hover:text-gray-400 p-0'
-                variant='link'
-              >
-                <Tooltip content='Close'>
-                  <Icon icon='mdi:close' width={20} height={20} />
-                </Tooltip>
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
-        <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals
-            .filter((approval) => {
-              if (approval.permissions) {
-                if (typeof approval.permissions === 'string') {
-                  return permissionCheck(approval.permissions);
-                }
-                return approval.permissions.some((permission) =>
-                  permissionCheck(permission)
-                );
-              }
-              return true;
-            })
-            .map((approval, index) => (
-              <Button
-                key={index}
-                onClick={approval.onClick}
-                className={cn(
-                  'btn btn-lg w-full',
-                  'bg-white/20 border-white/30',
-                  'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
-                  approval.disabled
-                    ? 'cursor-not-allowed'
-                    : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
-                )}
-                disabled={approval.disabled}
-              >
-                <Icon
-                  icon={approval.icon}
-                  width={20}
-                  height={20}
-                  className={`text-${getApprovalColor(approval.action)}`}
-                />
-                {approval.label || approval.action}
-              </Button>
-            ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FloatingActionsButton;

src/components/MainDrawer.tsx

@@ -1,24 +1,161 @@
 'use client';
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
 import { Icon } from '@iconify/react';
 import Drawer from '@/components/Drawer';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
+import Collapse from '@/components/Collapse';
 import Button from '@/components/Button';
-import SidebarMenu from '@/components/molecules/SidebarMenu';
-import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
-import { isPathActive } from '@/lib/helper';
+import { cn } from '@/lib/helper';
-import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+
-import { useAuth } from '@/services/hooks/useAuth';
+type CollapseMenuProps = {
+  title: string;
+  link: string;
+  icon: string;
+  submenu?: CollapseMenuProps[];
+  depth?: number;
+};
+
+const isPathActive = (pathname: string, link?: string) => {
+  if (!link) return false;
+
+  const splittedPathname = pathname.split('/');
+  const splittedLink = link.split('/');
+
+  const isActiveLinkValid = splittedLink.every((linkChunk, idx) => {
+    return linkChunk === splittedPathname[idx];
+  });
+
+  return pathname.startsWith(link) && isActiveLinkValid;
+};
+
+const CollapseMenu = ({
+  title,
+  link,
+  icon,
+  submenu,
+  depth = 0,
+}: CollapseMenuProps) => {
+  const pathname = usePathname();
+  const isActive = isPathActive(pathname, link);
+  const [open, setOpen] = useState(isActive);
+
+  const menuCollapseTitle = (
+    <div
+      className={cn(
+        'w-full px-3 py-2 rounded-md text-base font-semibold transition-colors flex flex-row justify-between items-center gap-2 hover:bg-primary/10 opacity-40',
+        {
+          'bg-primary/10 opacity-100': open || isActive,
+        }
+      )}
+    >
+      <div className='flex flex-row items-center gap-2'>
+        <Icon icon={icon} width={20} height={20} />
+        <span>{title}</span>
+      </div>
+
+      <Icon
+        icon='cuida:caret-up-outline'
+        width={20}
+        height={20}
+        className={cn('transition-transform', {
+          'rotate-90': !open,
+          'rotate-180': open,
+        })}
+      />
+    </div>
+  );
+
+  return (
+    <Collapse
+      open={open}
+      title={menuCollapseTitle}
+      onOpenChange={setOpen}
+      className='w-full'
+      titleClassName='w-full p-0!'
+    >
+      <Menu>
+        <div
+          className='w-full py-0.5 flex flex-col gap-0.5'
+          style={{
+            paddingLeft: `${0.5 * (depth + 1)}rem`,
+          }}
+        >
+          {submenu?.map((item, idx) => {
+            const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+            if (!hasSubmenu) {
+              return (
+                <MenuItem
+                  key={idx}
+                  title={item.title}
+                  href={item.link}
+                  icon={item.icon}
+                  active={isPathActive(pathname, item.link)}
+                />
+              );
+            }
+
+            return (
+              <CollapseMenu
+                key={idx}
+                title={item.title}
+                link={item.link}
+                icon={item.icon}
+                submenu={item.submenu}
+                depth={depth + 1}
+              />
+            );
+          })}
+        </div>
+      </Menu>
+    </Collapse>
+  );
+};
+
+const MainDrawerMenu = () => {
+  const pathname = usePathname();
+
+  return (
+    <Menu>
+      {MAIN_DRAWER_LINKS.map((item, idx) => {
+        const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+        if (!hasSubmenu) {
+          return (
+            <MenuItem
+              key={idx}
+              title={item.title}
+              href={item.link}
+              icon={item.icon}
+              active={pathname.startsWith(item.link)}
+            />
+          );
+        }
+
+        return (
+          <CollapseMenu
+            key={idx}
+            title={item.title}
+            link={item.link}
+            icon={item.icon}
+            submenu={item.submenu}
+          />
+        );
+      })}
+    </Menu>
+  );
+};
 
 const MainDrawerContent = () => {
-  const pathname = usePathname();
   const { setMainDrawerOpen } = useUiStore();
 
   const closeMainDrawerHandler = () => {
@@ -54,7 +191,7 @@ const MainDrawerContent = () => {
         </div>
       </div>
 
-      <SidebarMenu menu={MAIN_DRAWER_LINKS} activeLink={pathname} />
+      <MainDrawerMenu />
     </div>
   );
 };
@@ -65,13 +202,6 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
-  const { permissionCheck } = useAuth();
-
-  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
-
-  const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
-    permissionCheck(permission)
-  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -86,9 +216,9 @@ const MainDrawer = ({
       const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
 
       if (!title) {
-        title += menu?.text;
+        title += menu?.title;
       } else {
-        title += ' - ' + menu?.text;
+        title += ' - ' + menu?.title;
       }
 
       if (!hasSubmenu || !menu.submenu) return;
@@ -111,10 +241,6 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
-  if (!isPermitted) {
-    return <PermissionNotFound />;
-  }
-
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Modal.tsx

@@ -10,19 +10,15 @@ import {
 } from 'react';
 import { cn } from '@/lib/helper';
 
-export const useModal = (isNestingModal = false) => {
+export const useModal = () => {
   const ref = useRef<HTMLDialogElement>(null);
   const [open, setOpen] = useState(false);
 
   const openModal = useCallback(() => {
     if (!ref.current) return;
-    if (isNestingModal) {
+    ref.current.show();
-      ref.current.showModal();
-    } else {
-      ref.current.show();
-    }
     setOpen(true);
-  }, [isNestingModal]);
+  }, []);
 
   const closeModal = useCallback(() => {
     if (!ref.current) return;

src/components/Navbar.tsx

@@ -1,17 +1,9 @@
 'use client';
 
-import toast from 'react-hot-toast';
-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 Dropdown from '@/components/Dropdown';
-
-import { useAuth } from '@/services/hooks/useAuth';
-import { AuthApi } from '@/services/api/auth';
-import { isResponseError } from '@/lib/api-helper';
 
 interface NavbarProps {
   title: string;
@@ -19,21 +11,6 @@ interface NavbarProps {
 }
 
 const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
-  const { setUser } = useAuth();
-  const router = useRouter();
-
-  const logoutClickHandler = async () => {
-    const logoutRes = await AuthApi.logout();
-
-    if (isResponseError(logoutRes)) {
-      toast.error('Gagal logout! Coba lagi!');
-      return;
-    }
-
-    setUser(undefined);
-    router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
-  };
-
   return (
     <div className='navbar px-4 bg-base-100 shadow-sm'>
       <div className='flex-1'>
@@ -53,24 +30,22 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
       </div>
 
       <div className='flex gap-2'>
-        <Dropdown
+        <div className='dropdown dropdown-end'>
-          align='end'
+          <div
-          direction='bottom'
+            tabIndex={0}
-          trigger={
+            role='button'
-            <div className='btn btn-ghost btn-circle avatar'>
+            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 className='w-10 rounded-full border grid place-items-center'>
-              </div>
+              <Icon icon='uil:user' width={40} height={40} />
             </div>
-          }
+          </div>
-          className={{
+
-            content: 'w-52 mt-3',
+          <Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
-          }}
+            <MenuItem title='Settings' href='#' />
-        >
+            <MenuItem title='Logout' href='#' />
-          <Menu>
-            <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
-        </Dropdown>
+        </div>
       </div>
     </div>
   );

src/components/Pagination.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { ChangeEventHandler, ReactNode } from 'react';
+import { ReactNode } from 'react';
-
 import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
@@ -19,18 +17,16 @@ const PaginationButton = ({
   disabled?: boolean;
   onClick?: () => void;
 }) => (
-  <Button
+  <button
-    variant='ghost'
+    className={cn(
-    color='none'
+      'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square',
+      'disabled:text-gray-700 disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-gray-50 disabled:active:translate-y-0'
+    )}
     disabled={disabled}
     onClick={onClick}
-    className={cn(
-      'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
-      'disabled:text-primary disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-primary/10 disabled:active:translate-y-0'
-    )}
   >
     {content}
-  </Button>
+  </button>
 );
 
 const EtcPaginationButton = ({
@@ -52,7 +48,7 @@ const EtcPaginationButton = ({
             tabIndex={0}
             role='button'
             className={cn(
-              'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
+              'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
             )}
           >
             ...
@@ -61,7 +57,7 @@ const EtcPaginationButton = ({
           <div className='dropdown-content'>
             <ul
               tabIndex={0}
-              className='menu bg-base-100 rounded-lg! z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
+              className='menu bg-base-100 rounded-lg z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
             >
               {pages.map((pageNumber) => (
                 <li key={pageNumber}>
@@ -80,7 +76,7 @@ const EtcPaginationButton = ({
         <button
           disabled
           className={cn(
-            'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
+            'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
           )}
         >
           ...
@@ -94,20 +90,16 @@ const Pagination = ({
   currentPage = 1,
   totalItems = 0,
   itemsPerPage = 10,
-  rowOptions = [10, 20, 50, 100],
   onPageChange,
   onPrevPage = () => {},
   onNextPage = () => {},
-  onRowChange,
 }: {
   currentPage: number;
   totalItems: number;
   itemsPerPage: number;
-  rowOptions?: number[];
   onPageChange: (pageNumber: number) => void;
   onPrevPage: () => void;
   onNextPage: () => void;
-  onRowChange?: (row: number) => void;
 }) => {
   const totalPages =
     Math.ceil(totalItems / itemsPerPage) === 0
@@ -115,139 +107,30 @@ const Pagination = ({
       : Math.ceil(totalItems / itemsPerPage);
 
   const pageChangeHandler = (pageNumber: number) => onPageChange(pageNumber);
-  const firstPageClickHandler = () => onPageChange(1);
-  const lastPageClickHandler = () => onPageChange(totalPages);
-
-  const rowChangeHandler: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    onRowChange?.(Number(e.target.value));
-  };
-
-  const DisplayedRowCountSelect = () => (
-    <div className='flex flex-row items-center gap-4'>
-      <span className='text-sm font-medium text-base-content/50'>Showing</span>
-
-      <select
-        defaultValue={itemsPerPage}
-        onChange={rowChangeHandler}
-        className='select select-xs w-fit pl-3 pr-7 text-base-content/50'
-      >
-        {rowOptions.map((rowOption, rowOptionIdx) => (
-          <option
-            key={rowOptionIdx}
-            value={rowOption}
-            className='text-base-content active:text-neutral-content'
-          >
-            {rowOption} Per page
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-
-  const GoToFirstPageButton = () => (
-    <Button
-      disabled={currentPage === 1}
-      onClick={firstPageClickHandler}
-      variant='ghost'
-      color='none'
-      className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
-        'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-      )}
-    >
-      <Icon
-        icon='heroicons:chevron-double-left'
-        width={20}
-        height={20}
-        className='text-gray-400 group-disabled:text-gray-300'
-      />
-    </Button>
-  );
-
-  const PrevPageButton = () => (
-    <Button
-      disabled={currentPage === 1}
-      onClick={onPrevPage}
-      variant='ghost'
-      color='none'
-      className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
-        'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-      )}
-    >
-      <Icon
-        icon='heroicons:chevron-left'
-        width={20}
-        height={20}
-        className='text-gray-400 group-disabled:text-gray-300'
-      />
-    </Button>
-  );
-
-  const GoToLastPageButton = () => (
-    <Button
-      variant='ghost'
-      color='none'
-      disabled={currentPage === totalPages}
-      onClick={lastPageClickHandler}
-      className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
-        'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-      )}
-    >
-      <Icon
-        icon='heroicons:chevron-double-right'
-        width={20}
-        height={20}
-        className='text-gray-400 group-disabled:text-gray-300'
-      />
-    </Button>
-  );
-
-  const NextPageButton = () => (
-    <Button
-      variant='ghost'
-      color='none'
-      disabled={currentPage === totalPages}
-      onClick={onNextPage}
-      className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
-        'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-      )}
-    >
-      <Icon
-        icon='heroicons:chevron-right'
-        width={20}
-        height={20}
-        className='text-gray-400 group-disabled:text-gray-300'
-      />
-    </Button>
-  );
-
-  const PageInfo = () => (
-    <span className='text-nowrap text-sm font-medium text-base-content/50'>
-      Page {currentPage} of {totalPages}
-    </span>
-  );
 
   return (
-    <div className='@container'>
+    <div>
-      <div className='flex flex-row justify-center items-center'>
+      <div className='join w-full justify-between items-center gap-3'>
-        <div className='hidden @md:block'>
+        <button
-          <DisplayedRowCountSelect />
+          disabled={currentPage === 1}
-        </div>
+          onClick={onPrevPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          <Icon
+            icon='uil:arrow-left'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />{' '}
+          Previous
+        </button>
 
-        <div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
+        {totalPages <= 7 && (
-          <div className='hidden @md:block'>
+          <div className='join-item join gap-0.5'>
-            <GoToFirstPageButton />
+            {range(1, totalPages).map((pageNumber) => (
-          </div>
-
-          <div className='hidden @md:block'>
-            <PrevPageButton />
-          </div>
-
-          {totalPages <= 7 &&
-            range(1, totalPages).map((pageNumber) => (
               <PaginationButton
                 key={pageNumber}
                 content={pageNumber}
@@ -255,168 +138,195 @@ const Pagination = ({
                 onClick={() => pageChangeHandler(pageNumber)}
               />
             ))}
+          </div>
+        )}
 
-          {totalPages > 7 && (
+        {totalPages > 7 && (
-            <>
+          <div className='join-item join gap-0.5'>
-              <PaginationButton
+            <PaginationButton
-                content={1}
+              content={1}
-                disabled={currentPage === 1}
+              disabled={currentPage === 1}
-                onClick={() => pageChangeHandler(1)}
+              onClick={() => pageChangeHandler(1)}
-              />
+            />
 
-              {totalPages >= 2 &&
+            {totalPages >= 2 &&
-                (currentPage <= 3 || currentPage >= totalPages - 2) && (
+              (currentPage <= 3 || currentPage >= totalPages - 2) && (
-                  <PaginationButton
-                    content={2}
-                    disabled={currentPage === 2}
-                    onClick={() => pageChangeHandler(2)}
-                  />
-                )}
-
-              {totalPages >= 2 &&
-                currentPage > 3 &&
-                currentPage < totalPages - 2 && (
-                  <EtcPaginationButton
-                    startPage={2}
-                    endPage={currentPage - 2}
-                    onPageItemClick={pageChangeHandler}
-                  />
-                )}
-
-              {totalPages >= 3 &&
-                (currentPage <= 4 || currentPage >= totalPages - 2) &&
-                currentPage !== totalPages - 2 && (
-                  <PaginationButton
-                    content={3}
-                    disabled={currentPage === 3}
-                    onClick={() => pageChangeHandler(3)}
-                  />
-                )}
-
-              {totalPages >= 7 &&
-                (currentPage <= 2 || currentPage >= totalPages - 2) && (
-                  <EtcPaginationButton
-                    startPage={
-                      currentPage <= 2
-                        ? currentPage + 2
-                        : currentPage === totalPages - 2
-                          ? 3
-                          : currentPage >= totalPages - 1
-                            ? 4
-                            : 1
-                    }
-                    endPage={
-                      currentPage <= 2 || currentPage >= totalPages - 1
-                        ? totalPages - 3
-                        : currentPage === totalPages - 2
-                          ? totalPages - 4
-                          : 2
-                    }
-                    onPageItemClick={pageChangeHandler}
-                  />
-                )}
-
-              {totalPages >= 3 &&
-                currentPage > 4 &&
-                currentPage < totalPages - 1 && (
-                  <PaginationButton
-                    content={currentPage - 1}
-                    onClick={() => pageChangeHandler(currentPage - 1)}
-                  />
-                )}
-
-              {totalPages >= 7 &&
-                currentPage > 3 &&
-                currentPage < totalPages - 2 && (
-                  <PaginationButton content={currentPage} disabled />
-                )}
-
-              {totalPages >= 5 &&
-                currentPage > 2 &&
-                currentPage < totalPages - 2 && (
-                  <PaginationButton
-                    content={currentPage + 1}
-                    onClick={() => pageChangeHandler(currentPage + 1)}
-                  />
-                )}
-
-              {totalPages >= 5 &&
-                (currentPage <= 2 || currentPage >= totalPages - 2) && (
-                  <PaginationButton
-                    content={totalPages - 2}
-                    disabled={currentPage === totalPages - 2}
-                    onClick={() => pageChangeHandler(totalPages - 2)}
-                  />
-                )}
-
-              {totalPages >= 6 &&
-                currentPage > 2 &&
-                currentPage < totalPages - 3 && (
-                  <EtcPaginationButton
-                    startPage={
-                      currentPage <= 3
-                        ? currentPage + 2
-                        : currentPage >= 4
-                          ? currentPage + 2
-                          : 1
-                    }
-                    endPage={
-                      currentPage <= 3
-                        ? totalPages - 2
-                        : currentPage >= 4
-                          ? totalPages - 1
-                          : 0
-                    }
-                    onPageItemClick={pageChangeHandler}
-                  />
-                )}
-
-              {totalPages >= 6 &&
-                (currentPage <= 3 || currentPage >= totalPages - 3) && (
-                  <PaginationButton
-                    content={totalPages - 1}
-                    disabled={currentPage === totalPages - 1}
-                    onClick={() => pageChangeHandler(totalPages - 1)}
-                  />
-                )}
-
-              {totalPages >= 7 && (
                 <PaginationButton
-                  content={totalPages}
+                  content={2}
-                  disabled={currentPage === totalPages}
+                  disabled={currentPage === 2}
-                  onClick={() => pageChangeHandler(totalPages)}
+                  onClick={() => pageChangeHandler(2)}
                 />
               )}
-            </>
+
+            {totalPages >= 2 &&
+              currentPage > 3 &&
+              currentPage < totalPages - 2 && (
+                <EtcPaginationButton
+                  startPage={2}
+                  endPage={currentPage - 2}
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 3 &&
+              (currentPage <= 4 || currentPage >= totalPages - 2) &&
+              currentPage !== totalPages - 2 && (
+                <PaginationButton
+                  content={3}
+                  disabled={currentPage === 3}
+                  onClick={() => pageChangeHandler(3)}
+                />
+              )}
+
+            {totalPages >= 7 &&
+              (currentPage <= 2 || currentPage >= totalPages - 2) && (
+                <EtcPaginationButton
+                  startPage={
+                    currentPage <= 2
+                      ? currentPage + 2
+                      : currentPage === totalPages - 2
+                        ? 3
+                        : currentPage >= totalPages - 1
+                          ? 4
+                          : 1
+                  }
+                  endPage={
+                    currentPage <= 2 || currentPage >= totalPages - 1
+                      ? totalPages - 3
+                      : currentPage === totalPages - 2
+                        ? totalPages - 4
+                        : 2
+                  }
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 3 &&
+              currentPage > 4 &&
+              currentPage < totalPages - 1 && (
+                <PaginationButton
+                  content={currentPage - 1}
+                  onClick={() => pageChangeHandler(currentPage - 1)}
+                />
+              )}
+
+            {totalPages >= 7 &&
+              currentPage > 3 &&
+              currentPage < totalPages - 2 && (
+                <PaginationButton content={currentPage} disabled />
+              )}
+
+            {totalPages >= 5 &&
+              currentPage > 2 &&
+              currentPage < totalPages - 2 && (
+                <PaginationButton
+                  content={currentPage + 1}
+                  onClick={() => pageChangeHandler(currentPage + 1)}
+                />
+              )}
+
+            {totalPages >= 5 &&
+              (currentPage <= 2 || currentPage >= totalPages - 2) && (
+                <PaginationButton
+                  content={totalPages - 2}
+                  disabled={currentPage === totalPages - 2}
+                  onClick={() => pageChangeHandler(totalPages - 2)}
+                />
+              )}
+
+            {totalPages >= 6 &&
+              currentPage > 2 &&
+              currentPage < totalPages - 3 && (
+                <EtcPaginationButton
+                  startPage={
+                    currentPage <= 3
+                      ? currentPage + 2
+                      : currentPage >= 4
+                        ? currentPage + 2
+                        : 1
+                  }
+                  endPage={
+                    currentPage <= 3
+                      ? totalPages - 2
+                      : currentPage >= 4
+                        ? totalPages - 1
+                        : 0
+                  }
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 6 &&
+              (currentPage <= 3 || currentPage >= totalPages - 3) && (
+                <PaginationButton
+                  content={totalPages - 1}
+                  disabled={currentPage === totalPages - 1}
+                  onClick={() => pageChangeHandler(totalPages - 1)}
+                />
+              )}
+
+            {totalPages >= 7 && (
+              <PaginationButton
+                content={totalPages}
+                disabled={currentPage === totalPages}
+                onClick={() => pageChangeHandler(totalPages)}
+              />
+            )}
+          </div>
+        )}
+
+        <button
+          disabled={currentPage === totalPages}
+          onClick={onNextPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
           )}
-
+        >
-          <div className='hidden @md:block'>
+          Next{' '}
-            <NextPageButton />
+          <Icon
-          </div>
+            icon='uil:arrow-right'
-
+            width={20}
-          <div className='hidden @md:block'>
+            height={20}
-            <GoToLastPageButton />
+            className='text-gray-400 group-disabled:text-gray-300'
-          </div>
+          />
-        </div>
+        </button>
-
-        <div className='hidden @md:block'>
-          <PageInfo />
-        </div>
       </div>
 
-      <div className='flex @md:hidden flex-col justify-center items-end gap-2'>
+      <div className='flex gap-2 mt-2 sm:hidden'>
-        <div className='flex flex-row items-center gap-0.5'>
+        <button
-          <GoToFirstPageButton />
+          disabled={currentPage === 1}
-          <PrevPageButton />
+          onClick={onPrevPage}
-          <NextPageButton />
+          className={cn(
-          <GoToLastPageButton />
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
-        </div>
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          <Icon
+            icon='uil:arrow-left'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />{' '}
+          Previous
+        </button>
 
-        <div className='flex flex-row items-center gap-4'>
+        <button
-          <DisplayedRowCountSelect />
+          disabled={currentPage === totalPages}
-
+          onClick={onNextPage}
-          <PageInfo />
+          className={cn(
-        </div>
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          Next{' '}
+          <Icon
+            icon='uil:arrow-right'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />
+        </button>
       </div>
     </div>
   );

src/components/Table.tsx

@@ -14,7 +14,6 @@ import {
   SortingState,
   OnChangeFn,
   Row,
-  HeaderContext,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -32,9 +31,6 @@ interface TableClassNames {
   tableBodyClassName?: string;
   bodyRowClassName?: string;
   bodyColumnClassName?: string;
-  tableFooterClassName?: string;
-  footerRowClassName?: string;
-  footerColumnClassName?: string;
   paginationClassName?: string;
 }
 
@@ -42,7 +38,6 @@ export interface TableProps<TData extends object> {
   data: TData[];
   columns: ColumnDef<TData, unknown>[];
   pageSize?: number;
-  onPageSizeChange?: (pageSize: number) => void;
   totalItems?: number;
   page?: number;
   onPageChange?: (page: number) => void;
@@ -57,15 +52,6 @@ export interface TableProps<TData extends object> {
   rowSelection?: Record<string, boolean>;
   setRowSelection?: OnChangeFn<Record<string, boolean>>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
-  renderFooter?: boolean;
-  withCheckbox?: boolean;
-  rowOptions?: number[];
-  /**
-   * Custom row renderer. Should return a complete <tr> element or null.
-   * This gives full control over the row structure including colspan.
-   * Return null to render the default row.
-   */
-  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -78,36 +64,28 @@ const emptyContentDefaultValue = (
   </div>
 );
 
-export const TABLE_DEFAULT_STYLING = {
-  containerClassName: 'w-full mb-20',
-  tableWrapperClassName:
-    'overflow-x-auto border border-solid border-base-content/10 rounded-lg',
-  tableClassName: 'font-inter w-full table-auto text-sm font-medium',
-  tableHeaderClassName: '',
-  headerRowClassName: '',
-  headerColumnClassName:
-    'px-4 py-3 border-base-content/10 text-base-content/50',
-  tableBodyClassName: '',
-  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',
-};
-
 const Table = <TData extends object>({
   data = [],
   columns = [],
   pageSize = 10,
-  onPageSizeChange,
   totalItems,
   page,
   onPageChange,
   isLoading = false,
   fuzzySearchValue,
   onFuzzySearchValueChange,
-  className = TABLE_DEFAULT_STYLING,
+  className = {
+    containerClassName: '',
+    tableWrapperClassName: '',
+    tableClassName: '',
+    tableHeaderClassName: '',
+    headerRowClassName: '',
+    headerColumnClassName: '',
+    tableBodyClassName: '',
+    bodyRowClassName: '',
+    bodyColumnClassName: '',
+    paginationClassName: '',
+  },
   emptyContent = emptyContentDefaultValue,
   sorting,
   setSorting,
@@ -115,21 +93,12 @@ const Table = <TData extends object>({
   rowSelection,
   setRowSelection,
   enableRowSelection,
-  renderFooter = false,
-  withCheckbox = false,
-  rowOptions = [10, 20, 50, 100],
-  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
     page !== undefined &&
     onPageChange !== undefined;
 
-  const tableClassNames = {
-    ...TABLE_DEFAULT_STYLING,
-    ...className,
-  };
-
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: pageSize,
@@ -222,148 +191,77 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div className={tableClassNames.containerClassName}>
+    <div className={className.containerClassName}>
-      <div className={tableClassNames.tableWrapperClassName}>
+      <div className={className.tableWrapperClassName}>
-        <table className={tableClassNames.tableClassName}>
+        <table className={className.tableClassName}>
-          <thead className={tableClassNames.tableHeaderClassName}>
+          <thead className={className.tableHeaderClassName}>
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr
+              <tr key={headerGroup.id} className={className.headerRowClassName}>
-                key={headerGroup.id}
+                {headerGroup.headers.map((header) => (
-                className={tableClassNames.headerRowClassName}
+                  <th
-              >
+                    key={header.id}
-                {headerGroup.headers.map((header) => {
+                    colSpan={header.colSpan}
-                  const columnRelativeDepth =
+                    onClick={header.column.getToggleSortingHandler()}
-                    header.depth - header.column.depth;
+                    className={cn(
-                  if (
+                      header.column.getCanSort()
-                    !header.isPlaceholder &&
+                        ? 'cursor-pointer select-none'
-                    columnRelativeDepth > 1 &&
+                        : '',
-                    header.id === header.column.id
+                      className.headerColumnClassName
-                  ) {
+                    )}
-                    return null;
+                  >
-                  }
+                    <div className='flex items-center gap-1'>
-                  let rowSpan = 1;
+                      {flexRender(
-                  if (header.isPlaceholder) {
+                        header.column.columnDef.header,
-                    const leafs = header.getLeafHeaders();
+                        header.getContext()
-                    rowSpan = leafs[leafs.length - 1].depth - header.depth;
-                  }
-                  return (
-                    <th
-                      key={header.id}
-                      colSpan={header.colSpan}
-                      rowSpan={rowSpan}
-                      onClick={header.column.getToggleSortingHandler()}
-                      className={cn(
-                        header.column.getCanSort()
-                          ? 'cursor-pointer select-none'
-                          : '',
-                        {
-                          'first:w-9 first:pr-0': withCheckbox,
-                        },
-                        {
-                          'border-b': header.colSpan > 1,
-                        },
-                        tableClassNames.headerColumnClassName
                       )}
-                    >
-                      <div
-                        className={cn('flex items-center gap-1 min-h-full', {
-                          'justify-center': header.colSpan > 1,
-                        })}
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
 
-                        {header.column.getCanSort() && (
+                      {header.column.getCanSort() && (
-                          <div className='w-4 h-4 relative flex flex-col items-center'>
+                        <div className='flex items-center'>
-                            <Icon
+                          <Icon
-                              icon='heroicons:chevron-up-16-solid'
+                            icon='lucide:arrow-up'
-                              width={18}
+                            width={12}
-                              height={18}
+                            height={12}
-                              className={cn(
+                            className={cn(
-                                'absolute -top-1',
+                              'transition-all ease-in-out duration-200',
-                                'transition-all ease-in-out duration-200',
+                              header.column.getIsSorted() === 'asc'
-                                header.column.getIsSorted() === 'asc'
+                                ? 'text-black'
-                                  ? 'text-black'
+                                : 'text-black/30'
-                                  : 'text-black/30'
+                            )}
-                              )}
+                          />
-                            />
+                          <Icon
-                            <Icon
+                            icon='lucide:arrow-down'
-                              icon='heroicons:chevron-down-16-solid'
+                            width={12}
-                              width={18}
+                            height={12}
-                              height={18}
+                            className={cn(
-                              className={cn(
+                              'transition-all ease-in-out duration-200',
-                                'absolute -bottom-1.5',
+                              header.column.getIsSorted() === 'desc'
-                                'transition-all ease-in-out duration-200',
+                                ? 'text-black'
-                                header.column.getIsSorted() === 'desc'
+                                : 'text-black/30'
-                                  ? 'text-black'
+                            )}
-                                  : 'text-black/30'
+                          />
-                              )}
+                        </div>
-                            />
+                      )}
-                          </div>
+                    </div>
-                        )}
+                  </th>
-                      </div>
+                ))}
-                    </th>
-                  );
-                })}
               </tr>
             ))}
           </thead>
 
-          <tbody className={tableClassNames.tableBodyClassName}>
+          <tbody className={className.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => {
+            {table.getRowModel().rows.map((row) => (
-              const customRowContent = renderCustomRow?.(row);
+              <tr key={row.id} className={className.bodyRowClassName}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className={className.bodyColumnClassName}>
+                    {!isLoading &&
+                      flexRender(cell.column.columnDef.cell, cell.getContext())}
 
-              if (customRowContent) {
+                    {isLoading && <div className='skeleton w-full h-4' />}
-                return renderCustomRow?.(row);
-              }
-
-              return (
-                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
-                  {row.getVisibleCells().map((cell) => (
-                    <td
-                      key={cell.id}
-                      className={cn(
-                        { 'first:w-9 first:pr-0': withCheckbox },
-                        tableClassNames.bodyColumnClassName
-                      )}
-                    >
-                      {!isLoading &&
-                        flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-
-                      {isLoading && <div className='skeleton w-full h-4' />}
-                    </td>
-                  ))}
-                </tr>
-              );
-            })}
-          </tbody>
-          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
-            {renderFooter && (
-              <tr className={cn(tableClassNames.footerRowClassName)}>
-                {table.getAllLeafColumns().map((column) => (
-                  <td
-                    key={column.id}
-                    className={cn(
-                      { 'first:w-9 first:pr-0': withCheckbox },
-                      tableClassNames.footerColumnClassName
-                    )}
-                  >
-                    {column.columnDef.footer &&
-                      flexRender(column.columnDef.footer, {
-                        column,
-                        header: column.columnDef,
-                        table,
-                      } as HeaderContext<TData, unknown>)}
                   </td>
                 ))}
               </tr>
-            )}
+            ))}
-          </tfoot>
+          </tbody>
         </table>
       </div>
 
@@ -372,7 +270,7 @@ const Table = <TData extends object>({
         emptyContent}
 
       {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
+        <div className={cn('mt-5', className.paginationClassName)}>
           <Pagination
             totalItems={isServerSideTable ? totalItems : table.getRowCount()}
             itemsPerPage={table.getState().pagination.pageSize}
@@ -384,8 +282,6 @@ const Table = <TData extends object>({
             onPrevPage={prevPageClickHandler}
             onNextPage={nextPageClickHandler}
             onPageChange={pageChangeHandler}
-            rowOptions={rowOptions}
-            onRowChange={onPageSizeChange}
           />
         </div>
       )}

src/components/Tabs.tsx

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

src/components/dropdown/Dropdown.tsx

@@ -1,114 +0,0 @@
-import React, { ReactNode, useState, useRef } from 'react';
-
-import { cn } from '@/lib/helper';
-
-export interface DropdownProps {
-  trigger: ReactNode;
-  children: ReactNode;
-  className?: {
-    wrapper?: string;
-    trigger?: string;
-    content?: string;
-  };
-  align?: 'start' | 'center' | 'end';
-  direction?: 'top' | 'bottom' | 'left' | 'right';
-  hover?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  close?: boolean;
-  controlled?: boolean;
-}
-
-const Dropdown = ({
-  trigger,
-  children,
-  className,
-  align,
-  direction,
-  hover,
-  defaultOpen = false,
-  open,
-  close,
-  controlled = false,
-}: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const toggleDropdown = () => {
-    if (!controlled) {
-      const newState = !isOpen;
-      setIsOpen(newState);
-    }
-  };
-
-  const getWrapperClasses = () => {
-    const openState = controlled ? open : isOpen;
-
-    return cn(
-      'dropdown',
-      {
-        'dropdown-start': align === 'start',
-        'dropdown-center': align === 'center',
-        'dropdown-end': align === 'end',
-        'dropdown-top': direction === 'top',
-        'dropdown-bottom': direction === 'bottom',
-        'dropdown-left': direction === 'left',
-        'dropdown-right': direction === 'right',
-        'dropdown-hover': hover,
-        'dropdown-open': openState && !close,
-        'dropdown-close': close,
-      },
-      className?.wrapper
-    );
-  };
-
-  const getTriggerClasses = () => {
-    return cn(className?.trigger);
-  };
-
-  const getContentClasses = () => {
-    return cn(
-      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
-      className?.content
-    );
-  };
-
-  if (controlled) {
-    return (
-      <div className={getWrapperClasses()}>
-        {trigger}
-        {open && !close && (
-          <div tabIndex={-1} className={getContentClasses()}>
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div ref={dropdownRef} className={getWrapperClasses()}>
-      <div
-        tabIndex={0}
-        role='button'
-        className={getTriggerClasses()}
-        onClick={toggleDropdown}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleDropdown();
-          }
-        }}
-      >
-        {trigger}
-      </div>
-      {!close && (
-        <div tabIndex={-1} className={getContentClasses()}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;

src/components/helper/PermissionNotFound.tsx

@@ -1,12 +0,0 @@
-const PermissionNotFound = () => {
-  return (
-    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
-      <p className='text-gray-600 text-center'>
-        You do not have permission to access this page.
-      </p>
-    </div>
-  );
-};
-
-export default PermissionNotFound;

src/components/helper/RequireAuth.tsx

@@ -1,107 +1,197 @@
 'use client';
 
 import { ReactNode, useEffect } from 'react';
-import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
+import useSWRImmutable from 'swr/immutable';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
-import { AuthApi } from '@/services/api/auth';
+import { isResponseSuccess } from '@/lib/api-helper';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { GetMeResponse } from '@/types/api/api-general';
-import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
+
-import { AxiosError } from 'axios';
+// TODO: delete this later, DONT HARDCODE USER DATA
-import { redirectToSSO } from '@/lib/auth-helper';
+const DUMMY_USER = {
+  id: 1,
+  email: 'admin@mbugroup.id',
+  npk: '0001',
+  name: 'Super Admin',
+  image: null,
+  created_at: '2025-09-30T03:24:20.899229Z',
+  updated_at: '2025-09-30T03:24:20.899229Z',
+  roles: [
+    {
+      id: 1,
+      key: 'mbu.super_admin',
+      name: 'MBU Administrator',
+      client: {
+        id: 1,
+        name: 'PT Mitra Berlian Unggas',
+        alias: 'MBU',
+      },
+      permissions: [
+        {
+          id: 1,
+          name: 'mbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 2,
+          name: 'mbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 3,
+          name: 'mbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      key: 'lti.super_admin',
+      name: 'LTI Administrator',
+      client: {
+        id: 2,
+        name: 'PT Lumbung Telur Indonesia',
+        alias: 'LTI',
+      },
+      permissions: [
+        {
+          id: 4,
+          name: 'lti:purchase:read',
+          action: 'read',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 5,
+          name: 'lti:purchase:create',
+          action: 'create',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 6,
+          name: 'lti:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      key: 'manbu.super_admin',
+      name: 'MANBU Administrator',
+      client: {
+        id: 3,
+        name: 'PT Mandiri Berlian Unggas',
+        alias: 'MANBU',
+      },
+      permissions: [
+        {
+          id: 7,
+          name: 'manbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 8,
+          name: 'manbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 9,
+          name: 'manbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+      ],
+    },
+  ],
+};
 
 interface RequireAuthProps {
   children?: ReactNode;
 }
 
 const RequireAuth = ({ children }: RequireAuthProps) => {
-  const { user, setUser, setIsLoadingUser } = useAuth();
+  const router = useRouter();
+  const { setUser, setIsLoadingUser } = useAuth();
 
-  const {
+  const { data: userResponse, isLoading: isLoadingUserResponse } =
-    data: userResponse,
+    useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-    isLoading: isLoadingUserResponse,
+      '/auth/sso/userinfo',
-    error: userErrorResponse,
+      httpClientFetcher,
-  } = useSWR<
+      {
-    GetMeResponse & { ok?: boolean },
+        shouldRetryOnError: false,
-    AxiosError<BaseApiResponse>,
+        revalidateOnFocus: false,
-    SWRHttpKey
+        revalidateOnReconnect: false,
-  >('/sso/userinfo', httpClientFetcher, {
+        refreshInterval: 0,
-    shouldRetryOnError: false,
+      }
+    );
 
-    // refresh every 12 minutes
+  useEffect(() => {
-    refreshInterval: 12 * 60 * 1000,
+    setIsLoadingUser(isLoadingUserResponse);
-  });
+  }, [isLoadingUserResponse, setIsLoadingUser]);
 
   useEffect(() => {
     if (isResponseSuccess(userResponse)) {
       setUser(userResponse.data);
+    } else {
+      // router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // TODO: remove this later, DONT HARDCODE USER DATA
+      setUser(DUMMY_USER);
     }
-  }, [userResponse, setUser]);
+  }, [userResponse, setIsLoadingUser, setUser]);
 
-  // Explicitly handle 401 redirect from the component level
+  // TODO: uncomment this later
-  useEffect(() => {
+  // if (isLoadingUserResponse && !userResponse) {
-    if (
+  //   return (
-      isResponseError(userResponse) &&
+  //     <div className='w-full flex flex-row justify-center items-center p-4'>
-      userErrorResponse?.response?.status === 401
+  //       <span className='loading loading-spinner loading-xl' />
-    ) {
+  //     </div>
-      // Clear cache to prevent stale data from rendering children
+  //   );
-      // mutate('/sso/userinfo', undefined, { revalidate: false }); // Optional: if using global mutate
+  // }
-      setUser(undefined);
-      redirectToSSO();
-    }
-  }, [userErrorResponse, setUser, userResponse]);
 
-  useEffect(() => {
+  return <>{children}</>;
-    setIsLoadingUser(isLoadingUserResponse);
-  }, [isLoadingUserResponse]);
-
-  useEffect(() => {
-    const interval = setInterval(
-      async () => {
-        await AuthApi.refresh();
-      },
-      12 * 60 * 1000
-    );
-
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    const refreshUserSession = async () => {
-      await AuthApi.refresh();
-    };
-
-    refreshUserSession();
-  }, []);
-
-  if (
-    (isLoadingUserResponse && !userResponse && !userErrorResponse) ||
-    (!userResponse && !userErrorResponse)
-  ) {
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingUserResponse && userErrorResponse) {
-    return (
-      <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-        <h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
-        <p className='text-gray-600'>
-          Please try refreshing the page or contact support if the problem
-          persists.
-        </p>
-        <button className='btn btn-primary' onClick={() => redirectToSSO()}>
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  return <>{isResponseSuccess(userResponse) && user && children}</>;
 };
 
 export default RequireAuth;

src/components/helper/RequirePermission.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { useAuth } from '@/services/hooks/useAuth';
-
-interface RequirePermissionProps {
-  children: React.ReactNode;
-  permissions: string | string[];
-}
-
-const RequirePermission = ({
-  children,
-  permissions,
-}: RequirePermissionProps) => {
-  const { permissionCheck } = useAuth();
-
-  const isPermitted =
-    typeof permissions === 'string'
-      ? permissionCheck(permissions)
-      : permissions.some((permission) => permissionCheck(permission));
-
-  if (!isPermitted) {
-    return null;
-  }
-
-  return <>{children}</>;
-};
-
-export default RequirePermission;

src/components/helper/drawer/DrawerHeader.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import { Icon } from '@iconify/react';
-import Link from 'next/link';
-import { ReactNode } from 'react';
-import { cn } from '@/lib/helper';
-
-export interface DrawerHeaderProps {
-  // Left side props
-  leftIcon?: string;
-  leftIconSize?: number;
-  leftIconHref?: string;
-  leftIconOnClick?: () => void;
-  leftIconClassName?: string;
-
-  // Subtitle/label props
-  subtitle?: string | ReactNode;
-  subtitleClassName?: string;
-
-  // Right side actions (children)
-  children?: ReactNode;
-
-  // Container props
-  className?: string;
-  showDivider?: boolean;
-}
-
-const DrawerHeader = ({
-  leftIcon = 'mdi:close',
-  leftIconSize = 24,
-  leftIconHref,
-  leftIconOnClick,
-  leftIconClassName,
-  subtitle,
-  subtitleClassName,
-  children,
-  className,
-  showDivider = true,
-}: DrawerHeaderProps) => {
-  const renderLeftIcon = () => {
-    const iconElement = (
-      <Icon
-        icon={leftIcon}
-        width={leftIconSize}
-        height={leftIconSize}
-        className={cn('cursor-pointer', leftIconClassName)}
-      />
-    );
-
-    if (leftIconHref) {
-      return (
-        <Link href={leftIconHref} className='hover:text-gray-400'>
-          {iconElement}
-        </Link>
-      );
-    }
-
-    if (leftIconOnClick) {
-      return (
-        <button
-          onClick={leftIconOnClick}
-          className='hover:text-gray-400 bg-transparent border-none p-0'
-        >
-          {iconElement}
-        </button>
-      );
-    }
-
-    return iconElement;
-  };
-
-  return (
-    <div
-      className={cn(
-        'flex flex-row justify-between items-center px-4 pt-4',
-        className
-      )}
-    >
-      {/* Left Side */}
-      <div className='flex flex-row h-full gap-2 items-center'>
-        {renderLeftIcon()}
-
-        {showDivider && subtitle && (
-          <div className='divider divider-horizontal p-0 m-0'></div>
-        )}
-
-        {subtitle && (
-          <div className={cn('text-sm text-neutral', subtitleClassName)}>
-            {subtitle}
-          </div>
-        )}
-      </div>
-
-      {/* Right Side Actions */}
-      {children && (
-        <div className='flex flex-row gap-3 justify-end items-center'>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DrawerHeader;

src/components/helper/form/FormErrors.tsx

@@ -1,49 +0,0 @@
-import Alert from '@/components/Alert';
-import Button from '@/components/Button';
-import { Icon } from '@iconify/react';
-import { useState } from 'react';
-
-/**
- * Alert Unique Error List
- * @param formErrorList - Array of error messages
- * @param onClose - Function to close the alert
- */
-const AlertErrorList = ({
-  formErrorList,
-  onClose,
-}: {
-  formErrorList: string[];
-  onClose: () => void;
-}) => {
-  if (formErrorList.length === 0) return null;
-
-  return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
-      <div className='flex justify-between items-center gap-2 w-full'>
-        <div className='flex items-center gap-2'>
-          <Icon icon='material-symbols:error-outline' width={24} height={24} />
-          <span className='font-semibold'>
-            Terdapat {formErrorList.length} error pada form:
-          </span>
-        </div>
-        <Button
-          onClick={onClose}
-          variant='link'
-          className='ml-auto p-0 w-fit text-white'
-          color='none'
-        >
-          <Icon icon='material-symbols:close' width={24} height={24} />
-        </Button>
-      </div>
-      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
-        {formErrorList.map((error, index) => (
-          <li key={index} className='text-sm'>
-            {error}
-          </li>
-        ))}
-      </ul>
-    </Alert>
-  );
-};
-
-export default AlertErrorList;

src/components/input/CheckboxInput.tsx

@@ -2,9 +2,8 @@
 
 import { HTMLProps, useEffect, useRef } from 'react';
 import { cn } from '@/lib/helper';
-import { Size } from '@/types/theme';
 
-interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
   name: string;
   label?: string;
   indeterminate?: boolean;
@@ -17,7 +16,6 @@ interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
   isError?: boolean;
   isValid?: boolean;
   errorMessage?: string;
-  size?: Size;
 }
 
 const CheckboxInput = ({
@@ -29,19 +27,10 @@ const CheckboxInput = ({
   isValid,
   isError,
   errorMessage,
-  size = 'sm',
   ...rest
 }: CheckboxInputProps) => {
   const ref = useRef<HTMLInputElement>(null!);
 
-  const checkboxBaseClassName = cn('checkbox cursor-pointer rounded-md', {
-    'checkbox-xs': size === 'xs',
-    'checkbox-sm': size === 'sm',
-    'checkbox-md': size === 'md',
-    'checkbox-lg': size === 'lg',
-    'checkbox-xl': size === 'xl',
-  });
-
   useEffect(() => {
     if (typeof indeterminate === 'boolean') {
       ref.current.indeterminate = !rest.checked && indeterminate;
@@ -64,7 +53,7 @@ const CheckboxInput = ({
           id={name}
           name={name}
           className={cn(
-            checkboxBaseClassName,
+            'checkbox cursor-pointer',
             {
               'border-error': isError,
               'border-success': isValid,

src/components/input/DateInput.tsx

@@ -7,11 +7,11 @@ import {
   useState,
 } from 'react';
 import { cn, formatDate } from '@/lib/helper';
+import Modal, { useModal } from '@/components/Modal';
 import { DateRange, DayPicker, Matcher } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
-import { Icon } from '@iconify/react';
-import Modal, { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
 
 export interface DateInputProps {
   label?: string;
@@ -34,7 +34,6 @@ export interface DateInputProps {
   required?: boolean;
   isLoading?: boolean;
   isRange?: boolean;
-  isNestedModal?: boolean; // New prop to indicate if used inside another modal
   errorMessage?: string;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
@@ -59,7 +58,6 @@ const DateInput = ({
   readOnly = false,
   isLoading = false,
   isRange = false,
-  isNestedModal = false,
 }: DateInputProps) => {
   const [internalError, setInternalError] = useState<string | null>(null);
   const [selected, setSelected] = useState<Date | undefined>();
@@ -76,7 +74,7 @@ const DateInput = ({
     ? new Date(max.split('/').reverse().join('-'))
     : undefined;
 
-  const calendarModal = useModal(isNestedModal);
+  const calendarModal = useModal();
 
   // --- Sync value props ---
   useEffect(() => {
@@ -266,7 +264,7 @@ const DateInput = ({
         ref={calendarModal.ref}
         className={{
           modal: 'rounded',
-          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
+          modalBox: `w-fit min-h-${isRange ? '124' : '110'} flex flex-col`,
         }}
         closeOnBackdrop
       >