Update .gitlab-ci.yml file

.gitignore

@@ -40,8 +40,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# prettier
+.prettierrc
+
 # idea
 .idea
-
-# claude
-.claude

.gitlab-ci.yml

@@ -2,6 +2,7 @@ stages:
   - build
   - deploy
 
+# ====== TEMPLATE: BUILD STATIC NEXT.JS ======
 .build_template: &build_template
   stage: build
   image: node:20-alpine
@@ -10,31 +11,15 @@ stages:
     paths:
       - node_modules/
   variables:
-    NPM_CONFIG_PRODUCTION: 'false'
+    NPM_CONFIG_PRODUCTION: "false"
-    NODE_ENV: ''
+    NODE_ENV: ""
   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'
+    name: "out-$CI_COMMIT_SHORT_SHA"
     paths:
       - out/
     expire_in: 1 week
@@ -43,7 +28,7 @@ stages:
   stage: deploy
   image:
     name: amazon/aws-cli:latest
-    entrypoint: ['/bin/sh', '-c']
+    entrypoint: ["/bin/sh", "-c"]
   script:
     - set -e
     - aws --version
@@ -71,10 +56,11 @@ stages:
     - |
       RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
 
-      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
+      # Tentukan nama environment
+      if [ "$CI_COMMIT_BRANCH" = "devops-s3" ]; 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
@@ -114,57 +100,30 @@ stages:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ====== DEVELOPMENT (Branch development) ======
+# ====== DEVELOPMENT (Branch devops-s3) ======
 build:dev:
   <<: *build_template
   rules:
-    - if: '$CI_COMMIT_BRANCH == "development"'
+    - if: '$CI_COMMIT_BRANCH == "devops-s3"'
   environment:
-    name: development
+    name: devops-s3
   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
-  needs: ['build:dev']
+  needs: ["build:dev"]
   rules:
-    - if: '$CI_COMMIT_BRANCH == "development"'
+    - if: '$CI_COMMIT_BRANCH == "devops-s3"'
   variables:
-    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    S3_BUCKET: "dev-lti-erp.mbugroup.id"
-    AWS_REGION: 'ap-southeast-3'
+    AWS_REGION: "ap-southeast-3"
-    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
+    CLOUDFRONT_DISTRIBUTION_ID: "E1Z8XTA8XF1GIV"
   environment:
-    name: development
+    name: devops-s3
     url: https://dev-lti-erp.mbugroup.id
 
-# ====== STAGING (Branch staging) ======
-build:staging:
-  <<: *build_template
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "staging"'
-  environment:
-    name: staging
-  variables:
-    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
-    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
 # ====== PRODUCTION ======
 # build:production:
 #   <<: *build_template
@@ -186,4 +145,5 @@ deploy:staging:
 #     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
 #   environment:
 #     name: production
+    # url: https://royalgoldcapital.com 
 

.husky/pre-commit

@@ -1,3 +1,2 @@
-npm run format
 npm run lint
-npm run build
+npm run build

docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3.9'
+version: "3.9"
 
 services:
   dev-web-lti:
@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - '3002:3000'
+      - "3002:3000"
     env_file:
       - .env
     environment:
@@ -19,13 +19,13 @@ services:
     deploy:
       resources:
         limits:
-          cpus: '3.0'
+          cpus: "3.0"
           memory: 3G
         reservations:
-          cpus: '1.0'
+          cpus: "1.0"
           memory: 512M
     extra_hosts:
-      - 'host.docker.internal:host-gateway'
+      - "host.docker.internal:host-gateway"
     # Optional: aktifkan healthcheck jika punya endpoint
     # healthcheck:
     #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
@@ -36,4 +36,4 @@ services:
 
 networks:
   dev-lti-network:
-    external: true
+    external: true

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

@@ -11,27 +11,22 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@react-pdf/renderer": "^4.3.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
-    "jspdf": "^3.0.4",
+    "inputmask": "^5.0.9",
-    "jspdf-autotable": "^5.0.2",
     "moment": "^2.30.1",
-    "next": "15.5.9",
+    "next": "15.5.3",
     "react": "19.1.0",
-    "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
-    "react-dropzone": "^14.3.8",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },
@@ -39,12 +34,13 @@
     "@eslint/eslintrc": "^3",
     "@iconify/react": "^6.0.2",
     "@tailwindcss/postcss": "^4",
+    "@types/inputmask": "^5.0.7",
     "@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,69 +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';
-
-const ClosingDetailPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const closingId = searchParams.get('closingId');
-
-  const { data: closing, isLoading: isLoadingClosing } = useSWR(
-    closingId,
-    (id: number) => ClosingApi.getGeneralInfo(id)
-  );
-
-  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;
-
-  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
-          }
-        />
-      )}
-    </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/expense/add/page.tsx

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

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

@@ -1,63 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRequestForm from '@/components/pages/expense/form/ExpenseRequestForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseEditPage = () => {
-  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 isExpenseCanBeEdited =
-    !isLoadingExpense &&
-    isResponseSuccess(expense) &&
-    expense.data.latest_approval.step_number !== 5 &&
-    (expense.data.latest_approval.step_number === 1 ||
-      expense.data.latest_approval.step_number === 2 ||
-      expense.data.latest_approval.step_number === 3);
-
-  if (!isLoadingExpense && !isExpenseCanBeEdited) {
-    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) && (
-        <ExpenseRequestForm type='edit' initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseEditPage;

src/app/expense/detail/page.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseDetail from '@/components/pages/expense/ExpenseDetail';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseDetailPage = () => {
-  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;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseDetail initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseDetailPage;

src/app/expense/page.tsx

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

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 === 3;
-
-  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/globals.css

@@ -7,39 +7,26 @@
   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;
@@ -56,19 +43,8 @@
 
 @theme {
   --font-inter: var(--font-inter);
-
-  --container-sm: 40rem;
-  --container-md: 48rem;
-  --container-lg: 64rem;
-  --container-xl: 80rem;
-  --container-2xl: 96rem;
 }
 
 html {
   scrollbar-gutter: initial;
 }
-
-.react-select__menu-portal {
-  position: relative;
-  z-index: 99999 !important;
-}

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/marketing/add/delivery-orders/layout.tsx

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

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

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

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

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

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

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

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

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

src/app/marketing/detail/layout.tsx

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

src/app/marketing/detail/page.tsx

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

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

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

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

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

src/app/marketing/page.tsx

@@ -1,11 +0,0 @@
-import MarketingTable from '@/components/pages/marketing/MarketingTable';
-
-const Marketing = () => {
-  return (
-    <div className='w-full p-4'>
-      <MarketingTable />
-    </div>
-  );
-};
-
-export default Marketing;

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

@@ -0,0 +1,270 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import useSWR from 'swr';
+
+const AddChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
+    undefined
+  );
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+
+  // Fetch Data
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
+
+  const getProjectFlockKandangUrl = `/kandangs/lookup`;
+  // Mapping Options
+  const options = isResponseSuccess(listProjectFlock)
+    ? listProjectFlock?.data.map((projectFlock) => {
+        return {
+          value: projectFlock.id,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
+        };
+      })
+    : [];
+
+  const chickinModal = useModal();
+  const alertModal = useModal();
+
+  if (!projectFlockId) {
+    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))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  // Handle Function
+  const handleChickinClick = async (kandang: Kandang) => {
+    setIsLoadingProjectFlockKandang(true);
+    setSelectedKandang(kandang);
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      } else {
+        alertModal.openModal();
+      }
+    }
+  };
+  const handleAfterSubmit = () => {
+    chickinModal.closeModal();
+    router.push('/production/chickin');
+  };
+
+  return (
+    <>
+      {isResponseSuccess(projectFlock) && (
+        <>
+          <section className='w-full p-4'>
+            <header className='flex flex-col gap-4'>
+              <Button
+                href='/production/project-flock'
+                variant='link'
+                className='w-fit p-0 text-primary'
+              >
+                <Icon icon='uil:arrow-left' width={24} height={24} />
+                Kembali
+              </Button>
+
+              <div className='flex flex-col gap-4 w-full my-4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+                  <SelectInput
+                    required
+                    isSearchable
+                    label='Project Flock'
+                    options={options}
+                    isLoading={isLoadingListProjectFlock}
+                    value={{
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
+                    }}
+                    onChange={(val) =>
+                      router.push(
+                        `/production/chickin/add?projectFlockId=${
+                          (val as OptionType | null)?.value
+                        }`
+                      )
+                    }
+                    onInputChange={(val) => {
+                      setSearchProjectFlock(val);
+                    }}
+                  />
+                </div>
+              </div>
+            </header>
+            <Table<Kandang>
+              data={projectFlock.data?.kandangs}
+              columns={[
+                {
+                  header: '#',
+                  cell: (props) =>
+                    tableFilterState.pageSize * (tableFilterState.page - 1) +
+                    props.row.index +
+                    1,
+                },
+                {
+                  accessorKey: 'name',
+                  header: 'Nama Kandang',
+                },
+                {
+                  header: 'Aksi',
+                  cell: (props) => {
+                    return (
+                      <>
+                        <Button
+                          color='success'
+                          variant='outline'
+                          onClick={() => {
+                            handleChickinClick(props.row.original);
+                          }}
+                          disabled={isLoadingProjectFlockKandang}
+                        >
+                          <Icon
+                            icon='mdi:home-import-outline'
+                            width={24}
+                            height={24}
+                          />
+                          Chickin
+                        </Button>
+                      </>
+                    );
+                  },
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </section>
+          <Modal ref={chickinModal.ref}>
+            <div className='flex flex-row justify-between items-center'>
+              <h1 className='text-xl font-semibold text-center mb-6'>
+                Chickin Kandang - {selectedKandang?.name}
+              </h1>
+              <Button
+                color='error'
+                variant='link'
+                onClick={chickinModal.closeModal}
+              >
+                <Icon
+                  className='text-black'
+                  icon='uil:times'
+                  width={24}
+                  height={24}
+                />
+              </Button>
+            </div>
+            {isResponseSuccess(projectFlockKandang) &&
+              !isLoadingProjectFlockKandang && (
+                <ChickinForm
+                  initialValues={{
+                    project_flock_kandang: projectFlockKandang.data,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
+                  }}
+                  afterSubmit={handleAfterSubmit}
+                />
+              )}
+          </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default AddChickin;

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

@@ -0,0 +1,351 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+/**
+ * TODO: Refactor code - pindahin detail ke reuseable component
+ *       setelah implement approval and reject
+ */
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] =
+    useState(!isApprovedDisabled);
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  if (!chickinId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!chickin || isResponseError(chickin))) {
+    router.replace('/404');
+    return;
+  }
+
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+              </div>
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
+                </div>
+              </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button
+                color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default DetailChickin;

src/app/production/chickin/page.tsx

@@ -2,7 +2,7 @@ import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
 
 const Chickin = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4'>
       <ChickinTable />
     </section>
   );

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

@@ -1,60 +0,0 @@
-'use client';
-
-import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockKandangApi } from '@/services/api/production';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-export default function AddChickinKandang() {
-  const searchParams = useSearchParams();
-  const projectFlockKandangId = searchParams.get('projectFlockKandangId');
-  const projectFlockId = searchParams.get('projectFlockId');
-  const router = useRouter();
-
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoading,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(
-    `get-single-project-flock-kandang/${projectFlockKandangId}`,
-    async () =>
-      ProjectFlockKandangApi.getSingle(
-        parseInt(projectFlockKandangId as string)
-      )
-  );
-
-  if (!projectFlockKandangId) {
-    router.push(`/production/chickin/add?projectFlockId=${projectFlockId}`);
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoading && !projectFlockKandang) {
-    router.replace('/404');
-    return;
-  }
-
-  const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
-  };
-
-  return (
-    <>
-      <section className='size-full'>
-        {isLoading && <span className='loading loading-spinner loading-xl' />}
-        {!isLoading &&
-          isResponseSuccess(projectFlockKandang) &&
-          projectFlockId && (
-            <ChickinForm
-              initialValues={projectFlockKandang.data}
-              afterSubmit={handleAfterSubmit}
-            />
-          )}
-      </section>
-    </>
-  );
-}

src/app/production/project-flock/chickin/add/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/chickin/add/page.tsx

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

src/app/production/project-flock/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

@@ -2,7 +2,7 @@
 
 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 { ProjectFlockApi } from '@/services/api/production';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -12,11 +12,10 @@ const ProjectFlockEdit = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const {
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
-    data: projectFlock,
+    projectFlockId,
-    isLoading: isLoadingProjectFlock,
+    (id: number) => ProjectFlockApi.getSingle(id)
-    mutate: refreshProjectFlocks,
+  );
-  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -28,20 +27,17 @@ const ProjectFlockEdit = () => {
     );
   }
 
-  if (
+  if (!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))) {
-    !isLoadingProjectFlock &&
-    (!projectFlock || isResponseError(projectFlock))
-  ) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className='w-full flex flex-col justify-center'>
+    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProjectFlock && (
+      {isLoadingCostumer && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
         <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
       )}
     </div>

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 { ProjectFlockApi } from '@/services/api/production';
 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-row justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {isResponseSuccess(projectFlock) && (
+      {!isLoadingProjectFlock && 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/add/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/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/transfer-to-laying/detail/edit/page.tsx

@@ -8,6 +8,91 @@ import TransferToLayingForm from '@/components/pages/production/transfer-to-layi
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
 const TransferToLayingEdit = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -29,33 +114,33 @@ const TransferToLayingEdit = () => {
     );
   }
 
+  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
   ) {
     router.replace('/404');
     return;
   }
 
-  if (
-    isResponseSuccess(transferToLaying) &&
-    transferToLaying.data.approval.step_number === 2
-  ) {
-    router.replace('/production/transfer-to-laying');
-    return;
-  }
-
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingTransferToLaying && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
         <TransferToLayingForm
-          type='edit'
+          type='detail'
           initialValues={transferToLaying.data}
         />
-      )}
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
     </div>
   );
 };

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

@@ -8,6 +8,91 @@ import TransferToLayingForm from '@/components/pages/production/transfer-to-layi
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
 const TransferToLayingDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -29,9 +114,11 @@ const TransferToLayingDetail = () => {
     );
   }
 
+  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
   ) {
     router.replace('/404');
     return;
@@ -42,13 +129,18 @@ const TransferToLayingDetail = () => {
       {isLoadingTransferToLaying && (
         <span className='loading loading-spinner loading-xl' />
       )}
-
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
         <TransferToLayingForm
           type='detail'
           initialValues={transferToLaying.data}
         />
-      )}
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
     </div>
   );
 };

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/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/components/Button.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
-export interface ButtonProps extends react.ComponentProps<'button'> {
+interface ButtonProps extends react.ComponentProps<'button'> {
   variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
   color?: Color;
   href?: string;

src/components/Card.tsx

@@ -1,11 +1,8 @@
 '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 +10,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 +20,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 +30,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 +63,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 +102,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>
+          <img
+            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>
+          <img
+            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,102 +10,28 @@ interface DrawerProps {
   open: boolean;
   setOpen: (newOpenState: boolean) => void;
   openOnLarge?: boolean;
-  variant?: 'sidebar' | 'left' | 'right';
-  zIndex?: string;
-  className?: DrawerClassName;
-  onBackdropClick?: () => void;
-  closeOnBackdropClick?: boolean;
 }
 
-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,
 }: DrawerProps) => {
-  const getDrawerClassNames = (): DrawerClassName => {
-    const baseClassNames = {
-      drawer: 'drawer',
-      drawerContent: 'drawer-content',
-      drawerSide: 'drawer-side',
-      drawerOverlay: 'drawer-overlay',
-      drawerSidebarContent: 'min-h-full bg-base-100',
-    };
-
-    if (variant === 'sidebar') {
-      return {
-        ...baseClassNames,
-        drawerSidebarContent: cn(
-          baseClassNames.drawerSidebarContent,
-          'w-full max-w-[300px] lg:w-[300px]'
-        ),
-      };
-    } else if (variant === 'right') {
-      return {
-        ...baseClassNames,
-        drawer: cn(baseClassNames.drawer, 'drawer-end'),
-        drawerSide: cn(
-          baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
-        ),
-        drawerSidebarContent: cn(
-          baseClassNames.drawerSidebarContent,
-          'w-full min-w-120 sm:w-fit'
-        ),
-      };
-    } 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,
-          'w-full min-w-120 sm:w-fit'
-        ),
-      };
-    }
-    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'
@@ -114,37 +40,16 @@ 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 */}
+        <div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
-        <div
-          className={cn(
-            varianClassName?.drawerSidebarContent,
-            className?.drawerContent
-          )}
-        >
           {sidebarContent}
         </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,143 +0,0 @@
-'use client';
-
-import Button from '@/components/Button';
-import Tooltip from '@/components/Tooltip';
-import { cn } from '@/lib/helper';
-import { Icon } from '@iconify/react';
-
-type FloatingActionsButtonProps = {
-  actions: {
-    action: 'DETAIL' | 'EDIT' | 'DELETE';
-    icon: string;
-    label?: string;
-    onClick?: () => void;
-    hidden?: boolean;
-    disabled?: boolean;
-  }[];
-  approvals: {
-    action: 'APPROVED' | 'REJECTED';
-    icon: string;
-    label?: string;
-    onClick?: () => void;
-    disabled?: boolean;
-  }[];
-  selectedRowIds: number[];
-  onClose: () => void;
-};
-
-const FloatingActionsButton = ({
-  actions,
-  approvals,
-  selectedRowIds,
-  onClose,
-}: FloatingActionsButtonProps) => {
-  // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
-  const positionStyles =
-    selectedRowIds.length > 0
-      ? 'bottom-[10%] opacity-100'
-      : 'bottom-[-10%] 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(
-        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
-        'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
-        'bg-slate-950 backdrop-blur-md'
-      )}
-    >
-      <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) => !action.hidden)
-                .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.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,11 +202,6 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
-  const { permissionCheck } = useAuth();
-
-  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
-    permissionCheck(permission)
-  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -84,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;
@@ -109,10 +241,6 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
-  if (!isPermitted) {
-    return <PermissionNotFound />;
-  }
-
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Modal.tsx

@@ -1,52 +1,38 @@
 'use client';
 
-import {
+import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
-  ReactNode,
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} 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.showModal();
-    } else {
-      ref.current.show();
-    }
     setOpen(true);
-  }, [isNestingModal]);
+
+    ref.current?.showModal();
+  }, []);
 
   const closeModal = useCallback(() => {
-    if (!ref.current) return;
-    ref.current.close();
     setOpen(false);
+    ref.current?.close();
   }, []);
 
   const toggle = useCallback(() => {
-    open ? closeModal() : openModal();
+    if (open) {
+      closeModal();
+    } else {
+      openModal();
+    }
   }, [open, closeModal, openModal]);
 
-  useEffect(() => {
+  if (ref.current) {
-    const dialog = ref.current;
+    ref.current.addEventListener('close', () => {
-    if (!dialog) return;
+      closeModal();
+    });
+  }
 
-    const handleClose = () => setOpen(false);
+  return { ref, open, setOpen, openModal, closeModal, toggle } as const;
-    dialog.addEventListener('close', handleClose);
-
-    return () => {
-      dialog.removeEventListener('close', handleClose);
-    };
-  }, []);
-
-  return { ref, open, openModal, closeModal, toggle } as const;
 };
 
 interface ModalProps {
@@ -60,19 +46,15 @@ interface ModalProps {
 }
 
 const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (closeOnBackdrop && e.target === ref.current) {
-      ref.current?.close();
-    }
-  };
-
   return (
-    <dialog
+    <dialog ref={ref} className={cn('modal', className?.modal)}>
-      ref={ref}
-      className={cn('modal', className?.modal)}
-      onClick={handleBackdropClick}
-    >
       <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+
+      {closeOnBackdrop && (
+        <form method='dialog' className='modal-backdrop'>
+          <button>close</button>
+        </form>
+      )}
     </dialog>
   );
 };

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

@@ -13,8 +13,6 @@ import {
   FilterFn,
   SortingState,
   OnChangeFn,
-  Row,
-  HeaderContext,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -32,9 +30,6 @@ interface TableClassNames {
   tableBodyClassName?: string;
   bodyRowClassName?: string;
   bodyColumnClassName?: string;
-  tableFooterClassName?: string;
-  footerRowClassName?: string;
-  footerColumnClassName?: string;
   paginationClassName?: string;
 }
 
@@ -42,7 +37,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;
@@ -56,16 +50,6 @@ export interface TableProps<TData extends object> {
   manualSorting?: boolean;
   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,58 +62,40 @@ 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,
   manualSorting = false,
   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,
@@ -184,10 +150,6 @@ const Table = <TData extends object>({
     tableOptions.getRowId = (row) => (row as { id: string }).id;
   }
 
-  if (enableRowSelection !== undefined) {
-    tableOptions.enableRowSelection = enableRowSelection;
-  }
-
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 
@@ -222,148 +184,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 +263,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 +275,6 @@ const Table = <TData extends object>({
             onPrevPage={prevPageClickHandler}
             onNextPage={nextPageClickHandler}
             onPageChange={pageChangeHandler}
-            rowOptions={rowOptions}
-            onRowChange={onPageSizeChange}
           />
         </div>
       )}

src/components/Tabs.tsx

@@ -1,136 +0,0 @@
-import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
-import { cn } from '@/lib/helper';
-
-export interface TabItem {
-  id: string;
-  label: ReactNode;
-  content?: ReactNode;
-  disabled?: boolean;
-}
-
-export interface TabsProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
-  tabs: TabItem[];
-  variant?: 'bordered' | 'lifted' | 'boxed';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  placement?: 'top' | 'bottom';
-  /** Tab yang aktif secara default (uncontrolled mode) */
-  defaultActiveId?: string;
-  /** Tab yang aktif (controlled mode, dikontrol parent) */
-  activeTabId?: string;
-  className?:
-    | string
-    | {
-        container?: string;
-        wrapper?: string;
-        tab?: string;
-        content?: string;
-      };
-  onTabChange?: (tabId: string) => void;
-}
-
-const Tabs = ({
-  tabs,
-  variant,
-  size = 'md',
-  placement = 'top',
-  defaultActiveId,
-  activeTabId: controlledActiveId,
-  className,
-  onTabChange,
-  ...props
-}: TabsProps) => {
-  // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
-  const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
-    defaultActiveId || tabs[0]?.id || ''
-  );
-
-  const isControlled = controlledActiveId !== undefined;
-  const activeTabId = isControlled ? controlledActiveId : uncontrolledActiveId;
-
-  const handleTabChange = (tabId: string) => {
-    if (tabId === activeTabId) return;
-    if (!isControlled) setUncontrolledActiveId(tabId);
-    onTabChange?.(tabId);
-  };
-
-  const {
-    container: containerClassName,
-    wrapper: wrapperClassName,
-    tab: tabClassName,
-    content: contentClassName,
-  } = typeof className === 'object'
-    ? className
-    : { wrapper: className, tab: undefined };
-
-  const getTabsClasses = () => {
-    const variantClasses: Record<string, string> = {
-      bordered: 'tabs-bordered',
-      lifted: 'tabs-lift',
-      boxed: 'tabs-box',
-    };
-
-    const sizeClasses: Record<string, string> = {
-      xs: 'tabs-xs',
-      sm: 'tabs-sm',
-      md: '',
-      lg: 'tabs-lg',
-      xl: 'tabs-xl',
-    };
-
-    const placementClasses: Record<string, string> = {
-      top: '',
-      bottom: 'tabs-bottom',
-    };
-
-    return cn(
-      'tabs',
-      variant && variantClasses[variant],
-      sizeClasses[size],
-      placementClasses[placement],
-      wrapperClassName
-    );
-  };
-
-  const getTabClasses = (isActive: boolean, isDisabled?: boolean) =>
-    cn(
-      'tab',
-      {
-        'tab-active': isActive,
-        'tab-disabled': isDisabled,
-      },
-      tabClassName
-    );
-
-  const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
-
-  return (
-    <div
-      {...props}
-      className={cn(
-        'w-full',
-        typeof className === 'string' ? className : containerClassName
-      )}
-    >
-      <div role='tablist' className={getTabsClasses()}>
-        {tabs.map(({ id, label, disabled }) => (
-          <button
-            key={id}
-            role='tab'
-            className={getTabClasses(id === activeTabId, disabled)}
-            onClick={() => !disabled && handleTabChange(id)}
-            disabled={disabled}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
-
-      {activeContent && (
-        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
-      )}
-    </div>
-  );
-};
-
-export default Tabs;

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,90 +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 { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { isResponseSuccess } from '@/lib/api-helper';
-import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
+import { GetMeResponse } from '@/types/api/api-general';
-import { AxiosError } from 'axios';
+
-import { redirectToSSO } from '@/lib/auth-helper';
+// TODO: delete this later, DONT HARDCODE USER DATA
+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 13 minutes
+  useEffect(() => {
-    refreshInterval: 13 * 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]);
-
-  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 (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={() => window.location.reload()}
-        >
-          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/FormActions.tsx

@@ -9,11 +9,6 @@ interface FormActionsProps<T> {
   editUrl?: string;
   onDelete?: () => void;
   disableSubmit?: boolean;
-  onApprove?: () => void;
-  onReject?: () => void;
-  isApproveLoading?: boolean;
-  isRejectLoading?: boolean;
-  showApproveReject?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -22,32 +17,25 @@ export const FormActions = <T,>({
   editUrl,
   onDelete,
   disableSubmit = false,
-  onApprove,
-  onReject,
-  isApproveLoading = false,
-  isRejectLoading = false,
-  showApproveReject = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
-      {type !== 'add' && (
+      {type !== 'add' && onDelete && (
         <div className='flex flex-row justify-start gap-2'>
-          {onDelete && (
+          <Button
-            <Button
+            type='button'
-              type='button'
+            color='error'
-              color='error'
+            onClick={onDelete}
-              onClick={onDelete}
+            className='px-4'
-              className='px-4'
+          >
-            >
+            <Icon
-              <Icon
+              icon='material-symbols:delete-outline-rounded'
-                icon='material-symbols:delete-outline-rounded'
+              width={24}
-                width={24}
+              height={24}
-                height={24}
+              className='justify-start text-sm'
-                className='justify-start text-sm'
+            />
-              />
+            Delete
-              Delete
+          </Button>
-            </Button>
-          )}
           {type !== 'edit' && editUrl && (
             <Button
               type='button'
@@ -64,46 +52,6 @@ export const FormActions = <T,>({
               Edit
             </Button>
           )}
-          {type === 'detail' &&
-            showApproveReject &&
-            (onApprove || onReject) && (
-              <>
-                {onApprove && (
-                  <Button
-                    type='button'
-                    color='success'
-                    onClick={onApprove}
-                    className='px-4'
-                    isLoading={isApproveLoading}
-                  >
-                    <Icon
-                      icon='material-symbols:check-circle-outline'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Approve
-                  </Button>
-                )}
-                {onReject && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={onReject}
-                    className='px-4'
-                    isLoading={isRejectLoading}
-                  >
-                    <Icon
-                      icon='material-symbols:cancel-outline'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Reject
-                  </Button>
-                )}
-              </>
-            )}
         </div>
       )}
       {type !== 'detail' && (

src/components/helper/form/FormHeader.tsx

@@ -2,27 +2,15 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 interface FormHeaderProps {
-  type?: 'add' | 'edit' | 'detail';
+  type: 'add' | 'edit' | 'detail';
   title: string;
-  backUrl?: string;
+  backUrl: string;
-  onBackClick?: () => void;
 }
 
-export const FormHeader = ({
+export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
-  type,
-  title,
-  backUrl,
-  onBackClick,
-}: FormHeaderProps) => {
   return (
     <header className='flex flex-col gap-4'>
-      <Button
+      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
-        type='button'
-        href={!onBackClick ? backUrl : undefined}
-        onClick={onBackClick}
-        variant='link'
-        className='w-fit p-0 text-primary'
-      >
         <Icon icon='uil:arrow-left' width={24} height={24} />
         Kembali
       </Button>
@@ -30,7 +18,6 @@ export const FormHeader = ({
         {type === 'add' && `Tambah ${title}`}
         {type === 'edit' && `Edit ${title}`}
         {type === 'detail' && `Detail ${title}`}
-        {!type && title}
       </h1>
     </header>
   );

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

@@ -1,23 +1,14 @@
 'use client';
 
-import {
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
-  ChangeEventHandler,
+
-  FocusEventHandler,
+import { cn } from '@/lib/helper';
-  useEffect,
-  useState,
-} from 'react';
-import { cn, formatDate } from '@/lib/helper';
-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';
 
 export interface DateInputProps {
   label?: string;
   bottomLabel?: string;
   name: string;
-  value?: string | { from?: string; to?: string };
+  value?: string;
   placeholder?: string;
   min?: string;
   max?: string;
@@ -33,9 +24,9 @@ export interface DateInputProps {
   readOnly?: boolean;
   required?: boolean;
   isLoading?: boolean;
-  isRange?: boolean;
-  isNestedModal?: boolean; // New prop to indicate if used inside another modal
   errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -45,148 +36,22 @@ const DateInput = ({
   bottomLabel,
   name,
   value,
-  placeholder = 'dd/mm/yyyy',
+  placeholder,
   min,
   max,
   className,
-  isError: externalError,
+  isError,
-  isValid: externalValid,
+  isValid,
-  errorMessage: externalErrorMessage,
+  errorMessage,
+  startAdornment,
+  endAdornment,
   disabled = false,
   required = false,
   onChange,
   onBlur,
   readOnly = false,
   isLoading = false,
-  isRange = false,
-  isNestedModal = false,
 }: DateInputProps) => {
-  const [internalError, setInternalError] = useState<string | null>(null);
-  const [selected, setSelected] = useState<Date | undefined>();
-  const [selectedRange, setSelectedRange] = useState<{
-    from?: Date;
-    to?: Date;
-  }>({});
-  const [displayValue, setDisplayValue] = useState<string>('');
-
-  const minDate = min
-    ? new Date(min.split('/').reverse().join('-'))
-    : undefined;
-  const maxDate = max
-    ? new Date(max.split('/').reverse().join('-'))
-    : undefined;
-
-  const calendarModal = useModal(isNestedModal);
-
-  // --- Sync value props ---
-  useEffect(() => {
-    if (!value) {
-      setDisplayValue('');
-      return;
-    }
-    if (isRange && typeof value === 'object') {
-      const from = value.from ? new Date(value.from) : undefined;
-      const to = value.to ? new Date(value.to) : undefined;
-      setSelectedRange({ from, to });
-      setDisplayValue(
-        `${from ? formatDate(from, 'DD/MM/YYYY') : ''} ${
-          to ? '- ' + formatDate(to, 'DD/MM/YYYY') : ''
-        }`
-      );
-    } else if (typeof value === 'string') {
-      const iso = value.includes('/')
-        ? value.split('/').reverse().join('-')
-        : value;
-      const date = new Date(iso);
-      setSelected(date);
-      setDisplayValue(formatDate(iso, 'DD/MM/YYYY'));
-    }
-  }, [value, isRange]);
-
-  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    if (!disabled && !readOnly) calendarModal.openModal();
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
-    onBlur?.(e);
-  };
-
-  const handleSelectSingle = (selectedDate?: Date) => {
-    if (!selectedDate) return;
-    if (minDate && selectedDate < minDate) {
-      setInternalError(`Tanggal tidak boleh sebelum ${min}`);
-      return;
-    }
-    if (maxDate && selectedDate > maxDate) {
-      setInternalError(`Tanggal tidak boleh setelah ${max}`);
-      return;
-    }
-    setInternalError(null);
-    setSelected(selectedDate);
-    const formattedDisplay = formatDate(selectedDate, 'DD/MM/YYYY');
-    const formattedISO = formatDate(selectedDate, 'YYYY-MM-DD');
-    setDisplayValue(formattedDisplay);
-
-    const syntheticEvent = {
-      target: { name, value: formattedISO },
-    } as unknown as React.ChangeEvent<HTMLInputElement>;
-    onChange?.(syntheticEvent);
-    calendarModal.closeModal();
-  };
-
-  const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
-    if (!range) return;
-    setSelectedRange(range);
-
-    const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
-    const toStr = range.to ? formatDate(range.to, 'DD/MM/YYYY') : '';
-    setDisplayValue(`${fromStr}${toStr ? ' - ' + toStr : ''}`);
-
-    // Jika kedua tanggal sudah terpilih
-    if (range.from && range.to) {
-      if (minDate && range.from < minDate) {
-        setInternalError(`Tanggal mulai tidak boleh sebelum ${min}`);
-        return;
-      }
-      if (maxDate && range.to > maxDate) {
-        setInternalError(`Tanggal akhir tidak boleh setelah ${max}`);
-        return;
-      }
-
-      setInternalError(null);
-      const syntheticEvent = {
-        target: {
-          name,
-          value: {
-            from: formatDate(range.from, 'YYYY-MM-DD'),
-            to: formatDate(range.to, 'YYYY-MM-DD'),
-          },
-        },
-      } as unknown as React.ChangeEvent<HTMLInputElement>;
-      onChange?.(syntheticEvent);
-    }
-  };
-
-  const handleResetDate = () => {
-    setSelected(undefined);
-    setSelectedRange({});
-    setDisplayValue('');
-    const syntheticEvent = {
-      target: { name, value: isRange ? { from: '', to: '' } : '' },
-    } as unknown as React.ChangeEvent<HTMLInputElement>;
-    onChange?.(syntheticEvent);
-    calendarModal.closeModal();
-  };
-
-  const handleSaveDate = () => {
-    if (internalError) return;
-    calendarModal.closeModal();
-  };
-
-  const finalIsError = externalError || !!internalError;
-  const finalErrorMessage = internalError || externalErrorMessage;
-
   return (
     <div
       className={cn(
@@ -199,136 +64,65 @@ const DateInput = ({
           htmlFor={name}
           className={cn(
             'w-full text-sm font-normal leading-5',
-            { 'text-error': finalIsError },
+            {
+              'text-error': isError,
+            },
             className?.label
           )}
         >
           {label}
           {required && (
-            <span className='text-error' title='required'>
+            <>
               {' '}
-              *
+              <span className='tooltip tooltip-error' data-tip='required'>
-            </span>
+                <span className='text-error'>*</span>
+              </span>
+            </>
           )}
         </label>
       )}
 
       <div
         className={cn(
-          'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
-            'border-error': finalIsError,
+            'border-error': isError,
-            'border-success': externalValid && !finalIsError,
+            'border-success!': isValid,
           },
           className?.inputWrapper
         )}
       >
+        {startAdornment && startAdornment}
+
         <input
-          type='text'
+          type='date'
           id={name}
           name={name}
-          placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
+          placeholder={placeholder}
-          value={displayValue}
+          value={value}
-          onBlur={handleBlur}
+          onChange={onChange}
-          onClick={handleClick}
+          onBlur={onBlur}
+          min={min}
+          max={max}
           disabled={disabled}
-          readOnly // ✅ tidak bisa diketik manual
+          className={cn('grow bg-transparent cursor-pointer', className?.input)}
-          className={cn(
+          readOnly={readOnly}
-            'grow bg-transparent cursor-pointer focus:outline-none',
-            className?.input
-          )}
         />
 
-        {isLoading && (
+        {(isLoading || endAdornment) && (
           <div className='flex flex-row gap-2'>
-            <span className='loading loading-spinner' />
+            {isLoading && <span className='loading loading-spinner' />}
+            {endAdornment && endAdornment}
           </div>
         )}
-        <Icon
-          icon='uil:calendar'
-          width={24}
-          height={24}
-          className='cursor-pointer text-dark'
-          onClick={(e) =>
-            handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
-          }
-        />
       </div>
 
-      {!finalIsError && bottomLabel && (
+      {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
-      {finalIsError && finalErrorMessage && (
+      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{finalErrorMessage}</p>
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
       )}
-
-      <Modal
-        ref={calendarModal.ref}
-        className={{
-          modal: 'rounded',
-          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
-        }}
-        closeOnBackdrop
-      >
-        {isRange ? (
-          <DayPicker
-            required={required}
-            mode='range'
-            captionLayout='dropdown-years'
-            navLayout='around'
-            reverseYears
-            defaultMonth={selectedRange.from ?? new Date()}
-            startMonth={minDate ?? new Date(1999, 1)}
-            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
-            selected={selectedRange as DateRange}
-            onSelect={handleSelectRange}
-            footer={<div className='text-center mt-3'>{displayValue}</div>}
-            disabled={
-              [
-                minDate ? { before: minDate } : undefined,
-                maxDate ? { after: maxDate } : undefined,
-              ].filter(Boolean) as Matcher[]
-            }
-          />
-        ) : (
-          <DayPicker
-            required={required}
-            mode='single'
-            captionLayout='dropdown-years'
-            navLayout='around'
-            reverseYears
-            defaultMonth={selected ?? new Date()}
-            startMonth={minDate ?? new Date(1999, 1)}
-            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
-            selected={selected}
-            onSelect={handleSelectSingle}
-            disabled={
-              [
-                minDate ? { before: minDate } : undefined,
-                maxDate ? { after: maxDate } : undefined,
-              ].filter(Boolean) as Matcher[]
-            }
-          />
-        )}
-        <div className='mt-auto flex flex-col gap-2'>
-          {isRange && (
-            <small className='text-secondary'>
-              Tekan dua kali untuk memilih tanggal awal
-            </small>
-          )}
-
-          <div className='flex h-full justify-end items-end gap-2'>
-            <Button type='button' color='warning' onClick={handleResetDate}>
-              Reset
-            </Button>
-            {isRange && (
-              <Button type='button' onClick={handleSaveDate}>
-                Simpan
-              </Button>
-            )}
-          </div>
-        </div>
-      </Modal>
     </div>
   );
 };

src/components/input/DebouncedTextArea.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
-import { useDebounce } from 'use-debounce';
-
-import TextArea, { TextAreaProps } from '@/components/input/TextArea';
-
-interface DebouncedTextAreaProps extends TextAreaProps {
-  delay?: number;
-}
-
-const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
-  const { delay, onChange } = props;
-
-  const [internalChangeEvent, setInternalChangeEvent] =
-    useState<ChangeEvent<HTMLTextAreaElement>>();
-  const [internalValue, setInternalValue] = useState(props.value);
-
-  const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
-  const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
-
-  const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
-    e
-  ) => {
-    setInternalValue(e.target.value);
-    setInternalChangeEvent(e);
-  };
-
-  useEffect(() => {
-    if (debouncedChangeEvent) {
-      onChange?.(debouncedChangeEvent);
-    }
-  }, [debouncedValue]);
-
-  return (
-    <TextArea
-      {...props}
-      value={internalValue}
-      onChange={internalChangeHandler}
-    />
-  );
-};
-
-export default DebouncedTextArea;

src/components/input/DebouncedTextInput.tsx

@@ -24,11 +24,6 @@ const DebouncedTextInput = (props: DebouncedTextInputProps) => {
     setInternalChangeEvent(e);
   };
 
-  // Sync internal value with external value prop changes (e.g., from reset)
-  useEffect(() => {
-    setInternalValue(props.value);
-  }, [props.value]);
-
   useEffect(() => {
     if (debouncedChangeEvent) {
       onChange?.(debouncedChangeEvent);

src/components/input/DropFileInput.tsx

@@ -1,194 +0,0 @@
-import { useEffect } from 'react';
-import { useDropzone, type Accept } from 'react-dropzone';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-
-import { cn } from '@/lib/helper';
-
-interface DropFileInputProps {
-  name: string;
-  label?: string;
-  bottomLabel?: string;
-  caption?: string;
-  values?: File[];
-  accept?: Accept;
-  required?: boolean;
-  maxFiles?: number; // defaults to 1
-  maxSize?: number; // defaults to 2097152 (2 MB)
-  isError?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  onChange?: (files: File[]) => void;
-  onDelete?: (index: number) => void;
-  className?: {
-    wrapper?: string;
-    inputContainer?: string;
-    label?: string;
-    inputWrapper?: string;
-    caption?: string;
-    bottomLabel?: string;
-    errorMessage?: string;
-    fileItemContainer?: string;
-  };
-}
-
-const DropFileInput: React.FC<DropFileInputProps> = ({
-  name,
-  label,
-  bottomLabel,
-  caption = 'Seret atau Pilih Dokumen',
-  values,
-  accept,
-  required,
-  maxFiles = Infinity,
-  maxSize,
-  isError,
-  errorMessage,
-  disabled,
-  onChange,
-  onDelete,
-  className,
-}) => {
-  const isDisabled =
-    Boolean(values && maxFiles && values.length >= maxFiles) || disabled;
-
-  const {
-    acceptedFiles,
-    getRootProps,
-    getInputProps,
-    isFocused,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({
-    maxSize,
-    maxFiles,
-    accept: accept,
-    disabled: isDisabled,
-  });
-
-  useEffect(() => {
-    if (values && maxFiles && values.length <= maxFiles) {
-      onChange?.([...values, ...acceptedFiles]);
-    }
-  }, [acceptedFiles]);
-
-  return (
-    <div className={cn('w-full', className?.wrapper)}>
-      <div
-        className={cn(
-          'w-full flex flex-col gap-2 text-start',
-          className?.inputContainer
-        )}
-      >
-        {label && (
-          <label
-            htmlFor={name}
-            className={cn(
-              'w-full text-sm font-normal leading-5',
-              className?.label
-            )}
-          >
-            {label}
-            {required && (
-              <>
-                {' '}
-                <span className='tooltip tooltip-error' data-tip='required'>
-                  <span className='text-error'>*</span>
-                </span>
-              </>
-            )}
-          </label>
-        )}
-
-        <div
-          {...getRootProps({
-            'aria-disabled': isDisabled,
-            className: cn(
-              'dropzone w-full px-4 py-2 border border-dashed border-gray-300 rounded cursor-pointer transition-all',
-              'hover:border-primary hover:bg-primary/10',
-              {
-                'border-success bg-success/10': isDragAccept,
-                'border-error bg-error/10': isDragReject || isError,
-                'border-primary bg-primary/10': isFocused,
-                'bg-gray-200/20 cursor-not-allowed': isDisabled,
-              },
-              className?.inputWrapper
-            ),
-          })}
-        >
-          <input
-            {...getInputProps({
-              id: name,
-              name,
-              disabled: isDisabled,
-              'aria-disabled': isDisabled,
-            })}
-          />
-          {caption && (
-            <p className={cn('text-gray-500 text-sm', className?.caption)}>
-              {caption}
-            </p>
-          )}
-        </div>
-
-        {!isError && bottomLabel && (
-          <p
-            className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
-          >
-            {bottomLabel}
-          </p>
-        )}
-        {isError && (
-          <p
-            className={cn('w-full text-sm text-error', className?.errorMessage)}
-          >
-            {errorMessage}
-          </p>
-        )}
-      </div>
-
-      {values && values.length > 0 && (
-        <div
-          className={cn(
-            'w-full mt-1.5 flex flex-col gap-1.5',
-            className?.fileItemContainer
-          )}
-        >
-          {values.map((file, idx) => (
-            <div
-              key={idx}
-              className={cn('w-full flex flex-row items-center gap-2')}
-            >
-              <div className='p-2 rounded-full bg-primary/10'>
-                <Icon
-                  icon='basil:file-solid'
-                  width={24}
-                  height={24}
-                  className='text-blue-500'
-                />
-              </div>
-
-              <div className='w-full text-sm'>
-                <p>{file.name}</p>
-              </div>
-
-              <Button
-                variant='ghost'
-                color='error'
-                onClick={() => {
-                  onDelete?.(idx);
-                }}
-                className='rounded-full text-error focus-visible:text-error-content hover:text-error-content'
-              >
-                <Icon icon='fluent:delete-12-regular' width={24} height={24} />
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DropFileInput;

src/components/input/NumberInput.tsx

@@ -49,8 +49,8 @@ const NumberInput = ({
       onValueChange={valueChangeHandler}
       decimalScale={decimalScale}
       allowNegative={allowNegative}
-      inputPrefix={inputPrefix}
+      startAdornment={inputPrefix}
-      inputSuffix={inputSuffix}
+      endAdornment={inputSuffix}
       {...restProps}
     />
   );

src/components/input/PatternInput.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import { ChangeEvent } from 'react';
-import {
-  PatternFormat,
-  NumberFormatBase,
-  NumberFormatBaseProps,
-  OnValueChange,
-} from 'react-number-format';
-import TextInput, { TextInputProps } from '@/components/input/TextInput';
-
-interface PatternInputProps extends Omit<TextInputProps, 'type'> {
-  /**
-   * Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
-   */
-  format: string;
-  /** Mask karakter kosong, misal "_" */
-  mask?: string;
-  /** Menampilkan mask walau value kosong */
-  allowEmptyFormatting?: boolean;
-  /** Placeholder karakter format, default: "#" */
-  patternChar?: string;
-  /** Jika true, izinkan huruf (A-Z) selain angka */
-  inputVehicleNumber?: boolean;
-  type?: 'text' | 'password' | 'tel';
-}
-
-/**
- * PatternInput – tetap backward-compatible dengan Storybook
- * tapi bisa menerima huruf jika `allowCharacters={true}`
- */
-const PatternInput = ({
-  type = 'text',
-  format,
-  mask = '_',
-  allowEmptyFormatting = false,
-  patternChar = '#',
-  inputVehicleNumber = false,
-  onChange,
-  ...restProps
-}: PatternInputProps) => {
-  const handleValueChange: OnValueChange = (values, { event }) => {
-    const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
-    if (newEvent) {
-      newEvent.target.value = values.value.toUpperCase();
-      onChange?.(newEvent);
-    }
-  };
-
-  if (inputVehicleNumber) {
-    return (
-      <NumberFormatBase
-        {...restProps}
-        type={type}
-        customInput={TextInput}
-        format={(value) => {
-          const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
-
-          const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
-          if (!match) return clean;
-          const [, prefix, number, suffix] = match;
-          return [prefix, number, suffix].filter(Boolean).join(' ');
-        }}
-        removeFormatting={(val) => val.replace(/\s+/g, '')}
-        isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
-        getCaretBoundary={(val) =>
-          Array(val.length + 1)
-            .fill(true)
-            .map(Boolean)
-        }
-        onValueChange={handleValueChange}
-      />
-    );
-  }
-
-  return (
-    <PatternFormat
-      {...restProps}
-      type={type}
-      format={format}
-      mask={mask}
-      allowEmptyFormatting={allowEmptyFormatting}
-      patternChar={patternChar}
-      customInput={TextInput}
-      onValueChange={handleValueChange}
-    />
-  );
-};
-
-export default PatternInput;

src/components/input/RadioInput.tsx

@@ -1,11 +1,6 @@
 'use client';
 
-import {
+import { ChangeEventHandler, ReactNode } from 'react';
-  ChangeEventHandler,
-  ReactNode,
-  createContext,
-  useContext,
-} from 'react';
 import { cn } from '@/lib/helper';
 
 export interface RadioOption {
@@ -13,74 +8,37 @@ export interface RadioOption {
   value: string;
 }
 
-// DaisyUI Radio Colors
+export interface RadioInputProps {
-export type RadioColor =
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'success'
-  | 'warning'
-  | 'info'
-  | 'error';
-
-// DaisyUI Radio Sizes
-export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-// Context untuk RadioGroup
-interface RadioGroupContextValue {
-  name: string;
-  value?: string;
-  color?: RadioColor;
-  size?: RadioSize;
-  disabled?: boolean;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-}
-
-const RadioGroupContext = createContext<RadioGroupContextValue | undefined>(
-  undefined
-);
-
-const useRadioGroup = () => {
-  const context = useContext(RadioGroupContext);
-  if (!context) {
-    throw new Error('RadioGroupItem must be used within RadioGroup');
-  }
-  return context;
-};
-
-// RadioGroup Component
-export interface RadioGroupProps {
   label?: string;
   bottomLabel?: string;
   name: string;
   value?: string;
-  options?: RadioOption[];
+  options: RadioOption[];
-  color?: RadioColor;
+  variant?: string;
-  size?: RadioSize;
   className?: {
     wrapper?: string;
     label?: string;
     radioWrapper?: string;
+    radio?: string;
   };
   isError?: boolean;
+  isValid?: boolean;
   errorMessage?: string;
   required?: boolean;
   disabled?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  children?: ReactNode;
 }
 
-export const RadioGroup = ({
+const RadioInput = ({
   label,
   bottomLabel,
   name,
   value,
   options,
-  color = 'primary',
+  variant = 'radio-primary',
-  size = 'md',
   className,
   isError,
   errorMessage,
@@ -88,125 +46,68 @@ export const RadioGroup = ({
   disabled = false,
   onChange,
   onBlur,
-  children,
+}: RadioInputProps) => {
-}: RadioGroupProps) => {
-  const contextValue: RadioGroupContextValue = {
-    name,
-    value,
-    color,
-    size,
-    disabled,
-    onChange,
-    onBlur,
-  };
-
   return (
-    <RadioGroupContext.Provider value={contextValue}>
+    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
-      <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+      {/* Label atas */}
-        {/* Label atas */}
+      {label && (
-        {label && (
+        <label
-          <label
-            className={cn(
-              'w-full text-sm font-normal leading-5',
-              { 'text-error': isError },
-              className?.label
-            )}
-          >
-            {label}
-            {required && (
-              <span className='text-error ml-1' title='required'>
-                *
-              </span>
-            )}
-          </label>
-        )}
-
-        {/* Daftar opsi radio */}
-        <div
           className={cn(
-            'flex flex-row flex-wrap gap-4 items-center',
+            'w-full text-sm font-normal leading-5',
-            className?.radioWrapper
+            { 'text-error': isError },
+            className?.label
           )}
         >
-          {/* Jika options diberikan, render otomatis */}
+          {label}
-          {options &&
+          {required && (
-            options.map((option) => (
+            <span className='text-error ml-1' title='required'>
-              <RadioGroupItem
+              *
-                key={option.value}
+            </span>
-                value={option.value}
+          )}
-                label={option.label}
+        </label>
-              />
-            ))}
-
-          {/* Atau gunakan children untuk custom rendering */}
-          {children}
-        </div>
-
-        {/* Label bawah */}
-        {!isError && bottomLabel && (
-          <p className='text-sm opacity-60'>{bottomLabel}</p>
-        )}
-
-        {/* Pesan error */}
-        {isError && errorMessage && (
-          <p className='text-sm text-error'>{errorMessage}</p>
-        )}
-      </div>
-    </RadioGroupContext.Provider>
-  );
-};
-
-// RadioGroupItem Component
-export interface RadioGroupItemProps {
-  value: string;
-  label?: string;
-  className?: string;
-  disabled?: boolean;
-  color?: RadioColor;
-  size?: RadioSize;
-}
-
-export const RadioGroupItem = ({
-  value,
-  label,
-  className,
-  disabled: itemDisabled,
-  color: itemColor,
-  size: itemSize,
-}: RadioGroupItemProps) => {
-  const {
-    name,
-    value: groupValue,
-    color: groupColor,
-    size: groupSize,
-    disabled: groupDisabled,
-    onChange,
-    onBlur,
-  } = useRadioGroup();
-
-  const isDisabled = itemDisabled ?? groupDisabled;
-  const radioColor = itemColor ?? groupColor;
-  const radioSize = itemSize ?? groupSize;
-
-  return (
-    <label
-      className={cn(
-        'flex flex-row items-center gap-2 cursor-pointer',
-        isDisabled && 'opacity-60 cursor-not-allowed',
-        className
       )}
-    >
+
-      <input
+      {/* Daftar opsi radio */}
-        type='radio'
+      <div
-        name={name}
+        className={cn(
-        value={value}
+          'flex flex-row flex-wrap gap-4 items-center',
-        checked={groupValue === value}
+          className?.radioWrapper
-        onChange={onChange}
+        )}
-        onBlur={onBlur}
+      >
-        disabled={isDisabled}
+        {options.map((option) => (
-        className={cn('radio', `radio-${radioColor}`, `radio-${radioSize}`)}
+          <label
-      />
+            key={option.value}
-      {label && <span className='text-sm'>{label}</span>}
+            className={cn(
-    </label>
+              'flex flex-row items-center gap-2 cursor-pointer',
+              disabled && 'opacity-60 cursor-not-allowed'
+            )}
+          >
+            <input
+              type='radio'
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn('radio', variant, className?.radio)}
+            />
+            <span className='text-sm'>{option.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {/* Label bawah */}
+      {!isError && bottomLabel && (
+        <p className='text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {/* Pesan error */}
+      {isError && errorMessage && (
+        <p className='text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
   );
 };
+
+export default RadioInput;

src/components/input/SelectInput.tsx

@@ -1,23 +1,22 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
 import Select, {
   OptionProps,
   GroupBase,
   InputActionMeta,
   MultiValue,
   SingleValue,
-  components as ReactSelectComponents,
-  ControlProps,
 } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
-import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
-import { BaseApiResponse } from '@/types/api/api-general';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
@@ -54,8 +53,6 @@ interface SelectInputBaseProps<T = OptionType> {
   openMenu?: boolean;
   delay?: number;
   onInputChange?: (search: string) => void;
-  startAdornment?: ReactNode;
-  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -66,33 +63,6 @@ interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
 
 const animatedComponents = makeAnimated();
 
-const CustomControl = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: ControlProps<Option, IsMulti, Group>
-) => {
-  const { children } = props;
-
-  const customProps = props.selectProps as unknown as {
-    shouldShowAdornment?: boolean;
-    startAdornment?: ReactNode;
-  };
-
-  const shouldShowAdornment = customProps.shouldShowAdornment ?? false;
-  const startAdornment = customProps.startAdornment;
-
-  return (
-    <ReactSelectComponents.Control {...props}>
-      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
-        {shouldShowAdornment && startAdornment}
-        {children}
-      </div>
-    </ReactSelectComponents.Control>
-  );
-};
-
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const {
     label,
@@ -117,25 +87,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     delay = 300,
     createables = false,
     onInputChange,
-    startAdornment,
-    menuPortalTarget,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
   const [debouncedInputValue] = useDebounce(internalInputValue, delay);
 
-  const shouldShowAdornment = startAdornment && !internalInputValue;
-
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    const customComponents = { ...base, IndicatorSeparator: () => null };
+    return { ...base, IndicatorSeparator: () => null };
-
+  }, [isAnimated]);
-    if (startAdornment) {
-      customComponents.Control = CustomControl;
-    }
-
-    return customComponents;
-  }, [isAnimated, startAdornment]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -179,12 +139,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <>
+            <span className='tooltip tooltip-error' data-tip='required'>
-              {' '}
+              <span className='text-error'> *</span>
-              <span className='tooltip tooltip-error' data-tip='required'>
+            </span>
-                <span className='text-error'>*</span>
-              </span>
-            </>
           )}
         </span>
       )}
@@ -192,12 +149,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
         value={value ?? (isMulti ? [] : null)}
-        onChange={onChange ? handleChange : undefined}
+        onChange={handleChange}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
         onInputChange={internalInputChangeHandler}
-        onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
         isDisabled={isDisabled}
         isLoading={isLoading}
@@ -207,19 +163,17 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         placeholder={placeholder}
         className={cn('w-full', className?.select)}
         classNames={{
-          ...(!startAdornment && {
+          control: ({ isFocused, isDisabled }) =>
-            control: ({ isFocused, isDisabled }) =>
+            cn(
-              cn(
+              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+              {
-                {
+                'border-red-500! ring-2 ring-red-200': isError,
-                  'border-red-500! ring-2 ring-red-200': isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-gray-300': !isError && !isFocused,
-                  'border-gray-300': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+              }
-                }
+            ),
-              ),
+          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
-            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
-          }),
           placeholder: () =>
             cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
           singleValue: () =>
@@ -236,7 +190,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -257,14 +211,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
         }}
-        {...(startAdornment && {
-          shouldShowAdornment,
-          startAdornment,
-        })}
         menuPortalTarget={
-          typeof document !== 'undefined'
+          typeof document !== 'undefined' ? document.body : undefined
-            ? (menuPortalTarget ?? document.body)
-            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -281,8 +229,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T | string,
+  valueKey: keyof T,
-  labelKey: keyof T | string,
+  labelKey: keyof T,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -293,7 +241,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey, params]);
+  }, [inputValue, searchKey]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;
 

src/components/input/TextArea.tsx

@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/input/TextInput.tsx

@@ -31,8 +31,6 @@ export interface TextInputProps {
   errorMessage?: string;
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
-  inputPrefix?: ReactNode;
-  inputSuffix?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -50,8 +48,6 @@ const TextInput = ({
   errorMessage,
   startAdornment,
   endAdornment,
-  inputPrefix,
-  inputSuffix,
   disabled = false,
   required = false,
   onChange,
@@ -89,117 +85,39 @@ const TextInput = ({
         </label>
       )}
 
-      {inputPrefix || inputSuffix ? (
+      <div
-        <div className='relative flex'>
+        className={cn(
-          {inputPrefix && (
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
-            <div
+          {
-              className={cn(
+            'border-error': isError,
-                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+            'border-success!': isValid,
-                {
+          },
-                  'bg-gray-100 border-gray-300': !disabled,
+          className?.inputWrapper
-                  'bg-gray-50 border-gray-200': disabled,
+        )}
-                }
+      >
-              )}
+        {startAdornment && startAdornment}
-            >
-              {inputPrefix}
-            </div>
-          )}
 
-          <div
+        <input
-            className={cn(
+          type={type}
-              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+          id={name}
-              {
+          name={name}
-                'border-error': isError,
+          placeholder={placeholder}
-                'border-success!': isValid,
+          value={value}
-                'rounded-l-none!': inputPrefix,
+          onChange={onChange}
-                'rounded-r-none!': inputSuffix,
+          onBlur={onBlur}
-                'input-disabled': disabled,
+          disabled={disabled}
-                'cursor-not-allowed': disabled,
+          className={cn('grow', className?.input)}
-                'bg-gray-50': disabled,
+          readOnly={readOnly}
-              },
+        />
-              className?.inputWrapper
-            )}
-          >
-            {startAdornment && startAdornment}
 
-            <input
+        {(isLoading || endAdornment) && (
-              type={type}
+          <div className='flex flex-row gap-2'>
-              id={name}
+            {isLoading && <span className='loading loading-spinner' />}
-              name={name}
-              placeholder={placeholder}
-              value={value}
-              onChange={onChange}
-              onBlur={onBlur}
-              disabled={disabled}
-              className={cn(
-                'grow bg-transparent outline-none',
-                {
-                  'cursor-not-allowed': disabled,
-                  'text-gray-500': disabled,
-                },
-                className?.input
-              )}
-              readOnly={readOnly}
-            />
 
-            {(isLoading || endAdornment) && (
+            {endAdornment && endAdornment}
-              <div className='flex flex-row gap-2'>
-                {isLoading && <span className='loading loading-spinner' />}
-
-                {endAdornment && endAdornment}
-              </div>
-            )}
           </div>
-
+        )}
-          {inputSuffix && (
+      </div>
-            <div
-              className={cn(
-                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-                {
-                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </div>
-          )}
-        </div>
-      ) : (
-        <div
-          className={cn(
-            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {startAdornment && startAdornment}
-
-          <input
-            type={type}
-            id={name}
-            name={name}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            disabled={disabled}
-            className={cn('grow', className?.input)}
-            readOnly={readOnly}
-          />
-
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-
-              {endAdornment && endAdornment}
-            </div>
-          )}
-        </div>
-      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

src/components/menu/Menu.tsx

@@ -1,32 +1,16 @@
 import { ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
-import { Size } from '@/types/theme';
 
 interface MenuProps {
   children?: ReactNode;
-  size?: Size;
-  direction?: 'vertical' | 'horizontal';
   className?: string;
 }
 
-const Menu = ({
+const Menu = ({ children, className }: MenuProps) => {
-  children,
+  return (
-  size = 'md',
+    <ul className={cn('menu w-full p-0 gap-0.5', className)}>{children}</ul>
-  direction = 'vertical',
+  );
-  className,
-}: MenuProps) => {
-  const menuBaseClassName = cn('menu w-full', {
-    'menu-xs': size === 'xs',
-    'menu-sm': size === 'sm',
-    'menu-md': size === 'md',
-    'menu-lg': size === 'lg',
-    'menu-xl': size === 'xl',
-    'menu-vertical': direction === 'vertical',
-    'menu-horizontal': direction === 'horizontal',
-  });
-
-  return <ul className={cn(menuBaseClassName, className)}>{children}</ul>;
 };
 
 export default Menu;

src/components/menu/MenuItem.tsx

@@ -8,7 +8,6 @@ interface MenuItemProps {
   href?: string;
   icon?: string;
   active?: boolean;
-  isLoading?: boolean;
   onClick?: () => void;
   className?: string;
 }
@@ -18,7 +17,6 @@ const MenuItem = ({
   href,
   icon,
   active = false,
-  isLoading = false,
   className,
   onClick,
 }: MenuItemProps) => {
@@ -52,28 +50,17 @@ const MenuItem = ({
 
   return (
     <li>
-      {!isLoading && href && (
+      {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!isLoading && !href && (
+      {!href && (
         <button className={menuItemBaseClassName} onClick={onClick}>
           {menuItemContent}
         </button>
       )}
-
-      {isLoading && (
-        <button className={menuItemBaseClassName}>
-          <span
-            className={cn('loading loading-dots loading-md mx-auto', {
-              'text-gray-400': !active,
-              'text-black': active,
-            })}
-          />
-        </button>
-      )}
     </li>
   );
 };

src/components/modal/ConfirmationModal.tsx

@@ -1,29 +1,35 @@
 'use client';
 
-import { MouseEventHandler, RefObject, useState } from 'react';
+import { RefObject } from 'react';
 
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
-import Button, { ButtonProps } from '@/components/Button';
+import Button from '@/components/Button';
 
 import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
 
-export interface ConfirmationModalProps {
+interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
   closeOnBackdrop?: boolean;
-  primaryButton?: ButtonProps & {
+  primaryButton?: {
     text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
   };
-  secondaryButton?: ButtonProps & {
+  secondaryButton?: {
     text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
   };
   className?: {
     modal?: string;
     modalBox?: string;
   };
-  children?: React.ReactNode;
 }
 
 const ConfirmationModal = ({
@@ -34,24 +40,11 @@ const ConfirmationModal = ({
   primaryButton,
   secondaryButton,
   className,
-  children,
 }: ConfirmationModalProps) => {
-  const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
-
   const closeModalHandler = () => {
     ref.current?.close();
   };
 
-  const primaryButtonClickHandler: MouseEventHandler<
-    HTMLButtonElement
-  > = async (event) => {
-    setIsPrimaryButtonLoading(true);
-
-    await primaryButton?.onClick?.(event);
-
-    setIsPrimaryButtonLoading(false);
-  };
-
   return (
     <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
       <div className='w-full flex flex-col gap-4'>
@@ -97,20 +90,13 @@ const ConfirmationModal = ({
           {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
         </p>
 
-        {children && <div className='w-full'>{children}</div>}
-
         <div className='w-full flex flex-row gap-2'>
           {secondaryButton && secondaryButton.text && (
             <Button
-              {...secondaryButton}
               variant='ghost'
-              color={secondaryButton?.color}
+              color={secondaryButton?.color ?? 'none'}
               isLoading={secondaryButton?.isLoading}
-              disabled={
+              disabled={secondaryButton?.isLoading}
-                secondaryButton?.isLoading !== undefined
-                  ? secondaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
               onClick={closeModalHandler}
               className='grow'
             >
@@ -120,19 +106,10 @@ const ConfirmationModal = ({
 
           {primaryButton && primaryButton.text && (
             <Button
-              {...primaryButton}
               color={primaryButton?.color ?? 'info'}
-              onClick={primaryButtonClickHandler}
+              onClick={primaryButton?.onClick}
-              isLoading={
+              isLoading={primaryButton?.isLoading}
-                primaryButton?.isLoading !== undefined
+              disabled={primaryButton?.isLoading}
-                  ? primaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
-              disabled={
-                primaryButton?.isLoading !== undefined
-                  ? primaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
               className='grow'
             >
               {primaryButton?.text ?? 'Ya'}

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useId, useState } from 'react';
-
-import ConfirmationModal, {
-  ConfirmationModalProps,
-} from '@/components/modal/ConfirmationModal';
-import TextArea from '@/components/input/TextArea';
-
-import { Color } from '@/types/theme';
-
-interface ConfirmationModalWithNotesProps
-  extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
-  rows?: number;
-  placeholder?: string;
-
-  primaryButton?: {
-    text?: string;
-    color?: Color;
-    isLoading?: boolean;
-    onClick?: (notes: string) => void;
-  };
-}
-
-const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
-  ref,
-  type = 'info',
-  text,
-  closeOnBackdrop,
-  primaryButton,
-  secondaryButton,
-  className,
-  rows = 3,
-  placeholder = 'Catatan...',
-}) => {
-  const randomId = useId();
-  const [notes, setNotes] = useState('');
-
-  const notesChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    setNotes(e.target.value);
-  };
-
-  return (
-    <ConfirmationModal
-      ref={ref}
-      type={type}
-      text={text}
-      closeOnBackdrop={closeOnBackdrop}
-      primaryButton={{
-        ...primaryButton,
-        onClick: () => {
-          primaryButton?.onClick?.(notes);
-          setNotes('');
-        },
-      }}
-      secondaryButton={secondaryButton}
-      className={className}
-    >
-      <TextArea
-        name={randomId}
-        placeholder={placeholder}
-        value={notes}
-        onChange={notesChangeHandler}
-        rows={rows}
-      />
-    </ConfirmationModal>
-  );
-};
-
-export default ConfirmationModalWithNotes;