Update .gitlab-ci.yml file

[FEAT/FE][US#284] Add Feature Perhitungan Sapronak Closing Report

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

.gitignore

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

.gitlab-ci.yml

@@ -2,61 +2,190 @@ stages:
   - build
   - deploy
 
-variables:
+.build_template: &build_template
-  DOCKER_BUILDKIT: "1"
-  COMPOSE_DOCKER_CLI_BUILD: "1"
-  DOCKER_DRIVER: overlay2
-  BUILDKIT_PROGRESS: plain
-  IMAGE_NAME: "$CI_REGISTRY_IMAGE/web-lti:development_${CI_COMMIT_SHORT_SHA}"
-  NODE_ENV: "production"
-  HUSKY_SKIP_INSTALL: "1"
-  NEXT_PUBLIC_API_BASE_URL: "${NEXT_PUBLIC_API_BASE_URL}"
-  NEXT_PUBLIC_LTI_API_START_URL: "${NEXT_PUBLIC_LTI_API_START_URL}"
-
-build-image:
   stage: build
-  image: docker:27.0.3
+  image: node:20-alpine
-  services:
+  cache:
-    - docker:dind
+    key: npm-cache
-
+    paths:
-  before_script:
+      - node_modules/
-    - echo "Login to registry"
+  variables:
-    - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" --password-stdin "$CI_REGISTRY"
+    NPM_CONFIG_PRODUCTION: 'false'
-
+    NODE_ENV: ''
   script:
-  - |
+    - echo "Installing dependencies..."
-    docker build \
+    - npm ci --no-audit --no-fund
-      --build-arg NEXT_PUBLIC_API_BASE_URL="$NEXT_PUBLIC_API_BASE_URL" \
+    - echo "Build env used:"
-      --build-arg NEXT_PUBLIC_LTI_API_START_URL="$NEXT_PUBLIC_LTI_API_START_URL" \
+    - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
-      --build-arg NODE_ENV="$NODE_ENV" \
+    - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
-      --build-arg HUSKY_SKIP_INSTALL="$HUSKY_SKIP_INSTALL" \
+    - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
-      --cache-from "$CI_REGISTRY_IMAGE/web-lti:latest" \
+    - echo "Building Next.js static export..."
-      -t "$IMAGE_NAME" .
+    - npx next build
-  - docker push "$IMAGE_NAME"
+    - |
-  - docker image prune -af --filter "until=72h"
+      mkdir -p out
+      cat <<EOF > out/build-info.json
+      {
+        "commit": "$CI_COMMIT_SHORT_SHA",
+        "pipeline": "$CI_PIPELINE_ID",
+        "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
+        "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
+        "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
+        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
+      }
+      EOF
+  artifacts:
+    name: 'out-$CI_COMMIT_SHORT_SHA'
+    paths:
+      - out/
+    expire_in: 1 week
 
-  after_script: "echo 'Build complete: $IMAGE_NAME' && docker system prune -af || true && docker volume prune -f || true"
+.deploy_template: &deploy_template
+  stage: deploy
+  image:
+    name: amazon/aws-cli:latest
+    entrypoint: ['/bin/sh', '-c']
+  script:
+    - set -e
+    - aws --version
+    - echo "Cleaning up newline characters in AWS credentials..."
+    - export AWS_ACCESS_KEY_ID=$(echo $AWS_ACCESS_KEY_ID | tr -d '\r\n')
+    - export AWS_SECRET_ACCESS_KEY=$(echo $AWS_SECRET_ACCESS_KEY | tr -d '\r\n')
+    - echo "Deploying to s3://$S3_BUCKET in region $AWS_REGION"
+    - aws s3api head-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" || aws s3api create-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" --create-bucket-configuration LocationConstraint="$AWS_REGION"
+    - aws s3 sync ./out "s3://$S3_BUCKET" --delete --region "$AWS_REGION" --endpoint-url "https://s3.ap-southeast-3.amazonaws.com"
 
+    # CloudFront invalidation
+    - |
+      STATUS="success"
+      if [ -n "$CLOUDFRONT_DISTRIBUTION_ID" ]; then
+        echo "Invalidating CloudFront cache..."
+        if ! aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID" --paths "/*"; then
+          echo "CloudFront invalidation failed."
+          STATUS="failed"
+        fi
+      else
+        echo "No CloudFront distribution specified — skipping invalidation"
+      fi
+
+    # Notifikasi Discord
+    - |
+      RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
+
+      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-DEV"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
+      else
+        ENVIRONMENT_NAME="UNKNOWN"
+      fi
+
+      if [ "$STATUS" = "success" ]; then
+        COLOR=3066993
+        TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
+        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` completed successfully."
+      else
+        COLOR=15158332
+        TITLE="❌ Deployment ${ENVIRONMENT_NAME} Failed"
+        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
+      fi
+
+      jq -n \
+        --arg title "$TITLE" \
+        --arg desc "$DESC" \
+        --arg color "$COLOR" \
+        --arg repo "$CI_PROJECT_PATH" \
+        --arg actor "$GITLAB_USER_LOGIN" \
+        --arg commit "$CI_COMMIT_SHA" \
+        --arg run_url "$RUN_URL" \
+        '{
+          username: "CI Bot - LTI WEB",
+          embeds: [{
+            title: $title,
+            description: $desc,
+            color: ($color|tonumber),
+            fields: [
+              {name: "Repository", value: $repo, inline: true},
+              {name: "Actor", value: $actor, inline: true},
+              {name: "Commit", value: $commit, inline: false},
+              {name: "Pipeline", value: ("[Open run](" + $run_url + ")"), inline: false}
+            ]
+          }]
+        }' > payload.json
+
+      curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
+
+# ====== DEVELOPMENT (Branch development) ======
+build:dev:
+  <<: *build_template
   rules:
     - if: '$CI_COMMIT_BRANCH == "development"'
+  environment:
+    name: development
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
-deploy-dev:
+deploy:dev:
-  stage: deploy
+  <<: *deploy_template
-  image: alpine:3.20
+  needs: ['build:dev']
-
-  before_script:
-  - apk add --no-cache openssh curl
-  - mkdir -p ~/.ssh
-  - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
-  - chmod 600 ~/.ssh/id_rsa
-  - eval $(ssh-agent -s)
-  - ssh-add ~/.ssh/id_rsa
-  - ssh-keyscan -H "$SERVER_IP" >> ~/.ssh/known_hosts
-
-  script:
-    - ssh -o StrictHostKeyChecking=no \"$SERVER_USER@$SERVER_IP\" \"docker stop dev-web-lti || true && docker rm dev-web-lti || true && docker pull $CI_REGISTRY_IMAGE/web-lti:development_${CI_COMMIT_SHORT_SHA} && docker run -d --name dev-web-lti --network dev-lti-network -p 3002:3000 $CI_REGISTRY_IMAGE/web-lti:development_${CI_COMMIT_SHORT_SHA}\"
-
-  after_script: "echo 'Deploy finished for $IMAGE_NAME'"
-
   rules:
-    - if: '$CI_COMMIT_BRANCH == "development"'
+    - if: '$CI_COMMIT_BRANCH == "development"'
+  variables:
+    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
+  environment:
+    name: development
+    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
+#   rules:
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
+#   environment:
+#     name: production
+
+# deploy:production:
+#   <<: *deploy_template
+#   needs: ["build:production"]
+#   rules:
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
+#   variables:
+#     S3_BUCKET: "lti-erp.mbugroup.id"
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
+#   environment:
+#     name: production
+

.husky/pre-commit

@@ -1,2 +1,3 @@
+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,6 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   output: 'export',
   images: { unoptimized: true },
+  trailingSlash: true,
 };
 
 export default nextConfig;

package.json

@@ -11,16 +11,18 @@
     "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",
-    "inputmask": "^5.0.9",
     "moment": "^2.30.1",
-    "next": "15.5.3",
+    "next": "15.5.7",
     "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",
@@ -34,13 +36,12 @@
     "@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.1.12",
+    "daisyui": "^5.5.8",
     "eslint": "^9",
-    "eslint-config-next": "15.5.3",
+    "eslint-config-next": "^15.5.7",
     "husky": "^9.1.7",
     "prettier": "^3.6.2",
     "tailwindcss": "^4",

src/app/closing/detail/page.tsx

@@ -0,0 +1,59 @@
+'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))
+  );
+
+  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;
+
+  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}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ClosingDetailPage;

src/app/closing/page.tsx

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

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

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

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

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

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

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

src/app/expense/realization/page.tsx

@@ -0,0 +1,67 @@
+'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,26 +7,39 @@
   default: false;
   prefersdark: false;
   color-scheme: 'light';
-  --color-base-100: oklch(98% 0.001 106.423);
+
-  --color-base-200: oklch(97% 0.001 106.424);
+  /* Primary Colors */
-  --color-base-300: oklch(92% 0.003 48.717);
+  --color-primary: oklch(39.4% 0.177 301.9);
-  --color-base-content: oklch(22.389% 0.031 278.072);
+  --color-primary-content: oklch(87.5% 0.038 274.5);
-  --color-primary: oklch(60% 0.126 221.723);
+
-  --color-primary-content: oklch(100% 0 0);
+  /* Secondary Colors */
-  --color-secondary: oklch(52% 0.105 223.128);
+  --color-secondary: oklch(60.1% 0.258 335.7);
-  --color-secondary-content: oklch(100% 0 0);
+  --color-secondary-content: oklch(99.4% 0.007 337.8);
-  --color-accent: oklch(45% 0.085 224.283);
+
-  --color-accent-content: oklch(100% 0 0);
+  /* Accent Colors */
-  --color-neutral: oklch(39% 0.07 227.392);
+  --color-accent: oklch(76.2% 0.155 170.8);
-  --color-neutral-content: oklch(100% 0 0);
+  --color-accent-content: oklch(7.2% 0.007 167.6);
-  --color-info: oklch(58% 0.158 241.966);
+
-  --color-info-content: oklch(100% 0 0);
+  /* Neutral Colors */
-  --color-success: oklch(62% 0.194 149.214);
+  --color-neutral: oklch(22.4% 0.032 258.8);
-  --color-success-content: oklch(100% 0 0);
+  --color-neutral-content: oklch(87.7% 0.016 257);
-  --color-warning: oklch(85% 0.199 91.936);
+
-  --color-warning-content: oklch(0% 0 0);
+  /* Base Colors */
-  --color-error: oklch(57% 0.245 27.325);
+  --color-base-100: oklch(100% 0 0); /* #ffffff */
-  --color-error-content: oklch(100% 0 0);
+  --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
+  --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
+  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+
+  /* 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;
@@ -43,8 +56,19 @@
 
 @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,8 +12,6 @@ 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;
@@ -26,9 +24,6 @@ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/marketing/detail/layout.tsx

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

src/app/marketing/detail/page.tsx

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

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

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

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

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

src/app/marketing/page.tsx

@@ -0,0 +1,11 @@
+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,11 +1,29 @@
-import { redirect } from 'next/navigation';
+'use client';
+
+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() {
-  redirect('/dashboard');
+  const { user, isLoadingUser } = useAuth();
 
-  return (
+  const router = useRouter();
-    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
+  const pathname = usePathname();
-      <h1>LTI ERP</h1>
+
-    </main>
+  useEffect(() => {
-  );
+    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

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

@@ -1,351 +0,0 @@
-'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/project-flock/add/page.tsx

@@ -1,10 +1,18 @@
 '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 p-4 flex flex-row justify-center'>
+    <section className='w-full flex flex-row justify-center'>
       <ProjectFlockForm formType='add' />
     </section>
   );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+'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='w-full p-4'>
+    <section className='size-full p-4'>
       <ProjectFlockTable />
     </section>
   );

src/app/production/recording/add/layout.tsx

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

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

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

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

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

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

@@ -8,91 +8,6 @@ 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();
@@ -114,33 +29,33 @@ const TransferToLayingEdit = () => {
     );
   }
 
-  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying ||
+    (!transferToLaying || isResponseError(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='detail'
+          type='edit'
           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,91 +8,6 @@ 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();
@@ -114,11 +29,9 @@ const TransferToLayingDetail = () => {
     );
   }
 
-  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying ||
+    (!transferToLaying || isResponseError(transferToLaying))
-      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
   ) {
     router.replace('/404');
     return;
@@ -129,18 +42,13 @@ 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

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

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

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

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

src/app/purchase/page.tsx

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

src/components/Button.tsx

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

src/components/Card.tsx

@@ -1,8 +1,11 @@
 'use client';
 
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, useState } 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'> {
@@ -10,8 +13,13 @@ 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;
@@ -20,6 +28,7 @@ export interface CardProps
     subtitle?: string;
     actions?: string;
     footer?: string;
+    collapsible?: string;
   };
   variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
   size?: 'sm' | 'md' | 'lg';
@@ -30,14 +39,27 @@ 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';
 
@@ -63,11 +85,31 @@ 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('w-32 h-32 object-cover', className?.image);
+      return cn('object-cover', className?.image);
     }
-    return cn('h-48 object-cover', className?.image);
+    return cn('w-full object-cover', className?.image);
   };
 
   const getBodyClasses = () => {
@@ -102,45 +144,98 @@ 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}>
-        <figure>
+        {renderCardContent()}
-          <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}>
-      {image && (
+      {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>
   );
 };

src/components/Collapse.tsx

@@ -26,6 +26,9 @@ 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;
@@ -44,6 +47,7 @@ export const Collapse = ({
   bordered,
   disabled,
   asRadio = false,
+  fullWidth,
   className,
   titleClassName,
   contentClassName,
@@ -68,9 +72,9 @@ export const Collapse = ({
     'collapse',
     variant === 'arrow' && 'collapse-arrow',
     variant === 'plus' && 'collapse-plus',
-    bordered && 'border base-content/20 border-opacity-20 rounded',
+    bordered && 'border base-content/20 border-opacity-20 rounded-box',
     disabled && 'opacity-60 pointer-events-none',
-    !open && 'w-fit',
+    !fullWidth && !open && 'w-fit',
     className
   );
 

src/components/Drawer.tsx

@@ -10,28 +10,102 @@ 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 = () => {
-    setOpen(false);
+    if (closeOnBackdropClick) {
+      setOpen(false);
+    }
+    onBackdropClick && onBackdropClick();
   };
 
   return (
     <div
-      className={cn('drawer', {
+      className={cn(
-        'lg:drawer-open': openOnLarge,
+        'drawer',
-      })}
+        {
+          'lg:drawer-open': openOnLarge,
+        },
+        varianClassName?.drawer,
+        className?.drawer
+      )}
     >
       <input
         type='checkbox'
@@ -40,16 +114,37 @@ const Drawer = ({
         className='drawer-toggle'
       />
 
-      <div className='drawer-content'>{children}</div>
+      {/* Drawer Content */}
+      <div
+        className={cn(varianClassName?.drawerContent, className?.drawerContent)}
+      >
+        {children}
+      </div>
 
-      <div className='drawer-side border-r border-solid border-gray-200 z-20'>
+      {/* Drawer Side */}
+      <div
+        className={cn(
+          varianClassName?.drawerSide,
+          className?.drawerSide,
+          zIndex
+        )}
+      >
         <label
           aria-label='close sidebar'
-          className='drawer-overlay'
+          className={cn(
+            varianClassName?.drawerOverlay,
+            className?.drawerOverlay
+          )}
           onClick={closeDrawer}
         />
 
-        <div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
+        {/* Sidebar Content */}
+        <div
+          className={cn(
+            varianClassName?.drawerSidebarContent,
+            className?.drawerContent
+          )}
+        >
           {sidebarContent}
         </div>
       </div>

src/components/FloatingActionsButton.tsx

@@ -0,0 +1,141 @@
+'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%]' : 'bottom-[-100%]';
+
+  // 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,161 +1,21 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback } 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 { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
-import { cn } from '@/lib/helper';
+import { isPathActive } from '@/lib/helper';
-
-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 = () => {
@@ -191,7 +51,7 @@ const MainDrawerContent = () => {
         </div>
       </div>
 
-      <MainDrawerMenu />
+      <SidebarMenu menu={MAIN_DRAWER_LINKS} activeLink={pathname} />
     </div>
   );
 };
@@ -216,9 +76,9 @@ const MainDrawer = ({
       const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
 
       if (!title) {
-        title += menu?.title;
+        title += menu?.text;
       } else {
-        title += ' - ' + menu?.title;
+        title += ' - ' + menu?.text;
       }
 
       if (!hasSubmenu || !menu.submenu) return;

src/components/Modal.tsx

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

src/components/Navbar.tsx

@@ -1,9 +1,17 @@
 '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/Dropdown';
+
+import { useAuth } from '@/services/hooks/useAuth';
+import { AuthApi } from '@/services/api/auth';
+import { isResponseError } from '@/lib/api-helper';
 
 interface NavbarProps {
   title: string;
@@ -11,6 +19,21 @@ 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'>
@@ -30,22 +53,21 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
       </div>
 
       <div className='flex gap-2'>
-        <div className='dropdown dropdown-end'>
+        <Dropdown
-          <div
+          position='bottom-end'
-            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>
+          }
-
+          contentClassName='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='#' />
+          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
-            <MenuItem title='Logout' href='#' />
+            <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
-        </div>
+        </Dropdown>
       </div>
     </div>
   );

src/components/Pagination.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { ChangeEventHandler, ReactNode } from 'react';
+
 import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
@@ -17,16 +19,18 @@ const PaginationButton = ({
   disabled?: boolean;
   onClick?: () => void;
 }) => (
-  <button
+  <Button
-    className={cn(
+    variant='ghost'
-      'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square',
+    color='none'
-      '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 = ({
@@ -48,7 +52,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'
             )}
           >
             ...
@@ -57,7 +61,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}>
@@ -76,7 +80,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'
           )}
         >
           ...
@@ -90,16 +94,20 @@ 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
@@ -107,30 +115,139 @@ 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>
+    <div className='@container'>
-      <div className='join w-full justify-between items-center gap-3'>
+      <div className='flex flex-row justify-center items-center'>
-        <button
+        <div className='hidden @md:block'>
-          disabled={currentPage === 1}
+          <DisplayedRowCountSelect />
-          onClick={onPrevPage}
+        </div>
-          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>
 
-        {totalPages <= 7 && (
+        <div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
-          <div className='join-item join gap-0.5'>
+          <div className='hidden @md:block'>
-            {range(1, totalPages).map((pageNumber) => (
+            <GoToFirstPageButton />
+          </div>
+
+          <div className='hidden @md:block'>
+            <PrevPageButton />
+          </div>
+
+          {totalPages <= 7 &&
+            range(1, totalPages).map((pageNumber) => (
               <PaginationButton
                 key={pageNumber}
                 content={pageNumber}
@@ -138,195 +255,168 @@ const Pagination = ({
                 onClick={() => pageChangeHandler(pageNumber)}
               />
             ))}
-          </div>
-        )}
 
-        {totalPages > 7 && (
+          {totalPages > 7 && (
-          <div className='join-item join gap-0.5'>
+            <>
-            <PaginationButton
-              content={1}
-              disabled={currentPage === 1}
-              onClick={() => pageChangeHandler(1)}
-            />
-
-            {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={1}
-                disabled={currentPage === totalPages}
+                disabled={currentPage === 1}
-                onClick={() => pageChangeHandler(totalPages)}
+                onClick={() => pageChangeHandler(1)}
               />
-            )}
-          </div>
-        )}
 
-        <button
+              {totalPages >= 2 &&
-          disabled={currentPage === totalPages}
+                (currentPage <= 3 || currentPage >= totalPages - 2) && (
-          onClick={onNextPage}
+                  <PaginationButton
-          className={cn(
+                    content={2}
-            '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={currentPage === 2}
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+                    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)}
+                />
+              )}
+            </>
           )}
-        >
+
-          Next{' '}
+          <div className='hidden @md:block'>
-          <Icon
+            <NextPageButton />
-            icon='uil:arrow-right'
+          </div>
-            width={20}
+
-            height={20}
+          <div className='hidden @md:block'>
-            className='text-gray-400 group-disabled:text-gray-300'
+            <GoToLastPageButton />
-          />
+          </div>
-        </button>
+        </div>
+
+        <div className='hidden @md:block'>
+          <PageInfo />
+        </div>
       </div>
 
-      <div className='flex gap-2 mt-2 sm:hidden'>
+      <div className='flex @md:hidden flex-col justify-center items-end gap-2'>
-        <button
+        <div className='flex flex-row items-center gap-0.5'>
-          disabled={currentPage === 1}
+          <GoToFirstPageButton />
-          onClick={onPrevPage}
+          <PrevPageButton />
-          className={cn(
+          <NextPageButton />
-            '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',
+          <GoToLastPageButton />
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+        </div>
-          )}
-        >
-          <Icon
-            icon='uil:arrow-left'
-            width={20}
-            height={20}
-            className='text-gray-400 group-disabled:text-gray-300'
-          />{' '}
-          Previous
-        </button>
 
-        <button
+        <div className='flex flex-row items-center gap-4'>
-          disabled={currentPage === totalPages}
+          <DisplayedRowCountSelect />
-          onClick={onNextPage}
+
-          className={cn(
+          <PageInfo />
-            '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'
-          )}
-        >
-          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,6 +13,8 @@ import {
   FilterFn,
   SortingState,
   OnChangeFn,
+  Row,
+  HeaderContext,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -30,6 +32,9 @@ interface TableClassNames {
   tableBodyClassName?: string;
   bodyRowClassName?: string;
   bodyColumnClassName?: string;
+  tableFooterClassName?: string;
+  footerRowClassName?: string;
+  footerColumnClassName?: string;
   paginationClassName?: string;
 }
 
@@ -37,6 +42,7 @@ 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;
@@ -50,6 +56,10 @@ 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[];
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -62,40 +72,57 @@ 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 = {
+  className = TABLE_DEFAULT_STYLING,
-    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],
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
     page !== undefined &&
     onPageChange !== undefined;
 
+  const tableClassNames = {
+    ...TABLE_DEFAULT_STYLING,
+    ...className,
+  };
+
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: pageSize,
@@ -150,6 +177,10 @@ 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;
 
@@ -184,68 +215,106 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div className={className.containerClassName}>
+    <div className={tableClassNames.containerClassName}>
-      <div className={className.tableWrapperClassName}>
+      <div className={tableClassNames.tableWrapperClassName}>
-        <table className={className.tableClassName}>
+        <table className={tableClassNames.tableClassName}>
-          <thead className={className.tableHeaderClassName}>
+          <thead className={tableClassNames.tableHeaderClassName}>
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className={className.headerRowClassName}>
+              <tr
-                {headerGroup.headers.map((header) => (
+                key={headerGroup.id}
-                  <th
+                className={tableClassNames.headerRowClassName}
-                    key={header.id}
+              >
-                    colSpan={header.colSpan}
+                {headerGroup.headers.map((header) => {
-                    onClick={header.column.getToggleSortingHandler()}
+                  const columnRelativeDepth =
-                    className={cn(
+                    header.depth - header.column.depth;
-                      header.column.getCanSort()
+                  if (
-                        ? 'cursor-pointer select-none'
+                    !header.isPlaceholder &&
-                        : '',
+                    columnRelativeDepth > 1 &&
-                      className.headerColumnClassName
+                    header.id === header.column.id
-                    )}
+                  ) {
-                  >
+                    return null;
-                    <div className='flex items-center gap-1'>
+                  }
-                      {flexRender(
+                  let rowSpan = 1;
-                        header.column.columnDef.header,
+                  if (header.isPlaceholder) {
-                        header.getContext()
+                    const leafs = header.getLeafHeaders();
+                    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='flex items-center'>
+                          <div className='w-4 h-4 relative flex flex-col items-center'>
-                          <Icon
+                            <Icon
-                            icon='lucide:arrow-up'
+                              icon='heroicons:chevron-up-16-solid'
-                            width={12}
+                              width={18}
-                            height={12}
+                              height={18}
-                            className={cn(
+                              className={cn(
-                              'transition-all ease-in-out duration-200',
+                                'absolute -top-1',
-                              header.column.getIsSorted() === 'asc'
+                                'transition-all ease-in-out duration-200',
-                                ? 'text-black'
+                                header.column.getIsSorted() === 'asc'
-                                : 'text-black/30'
+                                  ? 'text-black'
-                            )}
+                                  : 'text-black/30'
-                          />
+                              )}
-                          <Icon
+                            />
-                            icon='lucide:arrow-down'
+                            <Icon
-                            width={12}
+                              icon='heroicons:chevron-down-16-solid'
-                            height={12}
+                              width={18}
-                            className={cn(
+                              height={18}
-                              'transition-all ease-in-out duration-200',
+                              className={cn(
-                              header.column.getIsSorted() === 'desc'
+                                'absolute -bottom-1.5',
-                                ? 'text-black'
+                                'transition-all ease-in-out duration-200',
-                                : 'text-black/30'
+                                header.column.getIsSorted() === 'desc'
-                            )}
+                                  ? 'text-black'
-                          />
+                                  : 'text-black/30'
-                        </div>
+                              )}
-                      )}
+                            />
-                    </div>
+                          </div>
-                  </th>
+                        )}
-                ))}
+                      </div>
+                    </th>
+                  );
+                })}
               </tr>
             ))}
           </thead>
 
-          <tbody className={className.tableBodyClassName}>
+          <tbody className={tableClassNames.tableBodyClassName}>
             {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={className.bodyRowClassName}>
+              <tr key={row.id} className={tableClassNames.bodyRowClassName}>
                 {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className={className.bodyColumnClassName}>
+                  <td
+                    key={cell.id}
+                    className={cn(
+                      { 'first:w-9 first:pr-0': withCheckbox },
+                      tableClassNames.bodyColumnClassName
+                    )}
+                  >
                     {!isLoading &&
                       flexRender(cell.column.columnDef.cell, cell.getContext())}
 
@@ -255,6 +324,28 @@ const Table = <TData extends object>({
               </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>
         </table>
       </div>
 
@@ -263,7 +354,7 @@ const Table = <TData extends object>({
         emptyContent}
 
       {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-        <div className={cn('mt-5', className.paginationClassName)}>
+        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
           <Pagination
             totalItems={isServerSideTable ? totalItems : table.getRowCount()}
             itemsPerPage={table.getState().pagination.pageSize}
@@ -275,6 +366,8 @@ const Table = <TData extends object>({
             onPrevPage={prevPageClickHandler}
             onNextPage={nextPageClickHandler}
             onPageChange={pageChangeHandler}
+            rowOptions={rowOptions}
+            onRowChange={onPageSizeChange}
           />
         </div>
       )}

src/components/Tabs.tsx

@@ -0,0 +1,129 @@
+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
+    | {
+        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 { wrapper: wrapperClassName, tab: tabClassName } =
+    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 : undefined
+      )}
+    >
+      <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='mt-4'>{activeContent}</div>}
+    </div>
+  );
+};
+
+export default Tabs;

src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+  align?: 'start' | 'center' | 'end';
+  hover?: boolean;
+  className?: string;
+  contentClassName?: string;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  position = 'bottom',
+  align = 'start',
+  hover = false,
+  className,
+  contentClassName,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Build position classes
+  const getPositionClasses = () => {
+    const classes: string[] = [];
+
+    // Handle combined positions like 'top-start'
+    if (position.includes('-')) {
+      const [pos, al] = position.split('-');
+      classes.push(`dropdown-${pos}`);
+      classes.push(`dropdown-${al}`);
+    } else {
+      classes.push(`dropdown-${position}`);
+      if (align !== 'start') {
+        classes.push(`dropdown-${align}`);
+      }
+    }
+
+    return classes.join(' ');
+  };
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // alert('clicked');
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={cn(
+        'dropdown',
+        getPositionClasses(),
+        hover && 'dropdown-hover',
+        isOpen && 'dropdown-open',
+        className
+      )}
+    >
+      {/* Trigger Button */}
+      <div onClick={handleToggle} className='cursor-pointer'>
+        {trigger}
+      </div>
+
+      {/* Dropdown Content - Only render when open */}
+      {isOpen && (
+        <div
+          tabIndex={-1}
+          className={cn('dropdown-content z-[10]', contentClassName)}
+          onClick={() => setIsOpen(false)} // Close on item click
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/helper/RequireAuth.tsx

@@ -1,197 +1,87 @@
 'use client';
 
 import { ReactNode, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
-import useSWRImmutable from 'swr/immutable';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { GetMeResponse } from '@/types/api/api-general';
+import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
-
+import { AxiosError } from 'axios';
-// TODO: delete this later, DONT HARDCODE USER DATA
+import { redirectToSSO } from '@/lib/auth-helper';
-const DUMMY_USER = {
-  id: 1,
-  email: 'admin@mbugroup.id',
-  npk: '0001',
-  name: 'Super Admin',
-  image: null,
-  created_at: '2025-09-30T03:24:20.899229Z',
-  updated_at: '2025-09-30T03:24:20.899229Z',
-  roles: [
-    {
-      id: 1,
-      key: 'mbu.super_admin',
-      name: 'MBU Administrator',
-      client: {
-        id: 1,
-        name: 'PT Mitra Berlian Unggas',
-        alias: 'MBU',
-      },
-      permissions: [
-        {
-          id: 1,
-          name: 'mbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 2,
-          name: 'mbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 3,
-          name: 'mbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-      ],
-    },
-    {
-      id: 2,
-      key: 'lti.super_admin',
-      name: 'LTI Administrator',
-      client: {
-        id: 2,
-        name: 'PT Lumbung Telur Indonesia',
-        alias: 'LTI',
-      },
-      permissions: [
-        {
-          id: 4,
-          name: 'lti:purchase:read',
-          action: 'read',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 5,
-          name: 'lti:purchase:create',
-          action: 'create',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 6,
-          name: 'lti:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-      ],
-    },
-    {
-      id: 3,
-      key: 'manbu.super_admin',
-      name: 'MANBU Administrator',
-      client: {
-        id: 3,
-        name: 'PT Mandiri Berlian Unggas',
-        alias: 'MANBU',
-      },
-      permissions: [
-        {
-          id: 7,
-          name: 'manbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 8,
-          name: 'manbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 9,
-          name: 'manbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-      ],
-    },
-  ],
-};
 
 interface RequireAuthProps {
   children?: ReactNode;
 }
 
 const RequireAuth = ({ children }: RequireAuthProps) => {
-  const router = useRouter();
+  const { user, setUser, setIsLoadingUser } = useAuth();
-  const { setUser, setIsLoadingUser } = useAuth();
 
-  const { data: userResponse, isLoading: isLoadingUserResponse } =
+  const {
-    useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
+    data: userResponse,
-      '/auth/sso/userinfo',
+    isLoading: isLoadingUserResponse,
-      httpClientFetcher,
+    error: userErrorResponse,
-      {
+  } = useSWR<
-        shouldRetryOnError: false,
+    GetMeResponse & { ok?: boolean },
-        revalidateOnFocus: false,
+    AxiosError<BaseApiResponse>,
-        revalidateOnReconnect: false,
+    SWRHttpKey
-        refreshInterval: 0,
+  >('/sso/userinfo', httpClientFetcher, {
-      }
+    shouldRetryOnError: false,
-    );
+  });
-
-  useEffect(() => {
-    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, setIsLoadingUser, setUser]);
+  }, [userResponse, setUser]);
 
-  // TODO: uncomment this later
+  // Explicitly handle 401 redirect from the component level
-  // if (isLoadingUserResponse && !userResponse) {
+  useEffect(() => {
-  //   return (
+    if (
-  //     <div className='w-full flex flex-row justify-center items-center p-4'>
+      isResponseError(userResponse) &&
-  //       <span className='loading loading-spinner loading-xl' />
+      userErrorResponse?.response?.status === 401
-  //     </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]);
 
-  return <>{children}</>;
+  useEffect(() => {
+    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/drawer/DrawerHeader.tsx

@@ -0,0 +1,104 @@
+'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,6 +9,11 @@ interface FormActionsProps<T> {
   editUrl?: string;
   onDelete?: () => void;
   disableSubmit?: boolean;
+  onApprove?: () => void;
+  onReject?: () => void;
+  isApproveLoading?: boolean;
+  isRejectLoading?: boolean;
+  showApproveReject?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -17,25 +22,32 @@ 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' && onDelete && (
+      {type !== 'add' && (
         <div className='flex flex-row justify-start gap-2'>
-          <Button
+          {onDelete && (
-            type='button'
+            <Button
-            color='error'
+              type='button'
-            onClick={onDelete}
+              color='error'
-            className='px-4'
+              onClick={onDelete}
-          >
+              className='px-4'
-            <Icon
+            >
-              icon='material-symbols:delete-outline-rounded'
+              <Icon
-              width={24}
+                icon='material-symbols:delete-outline-rounded'
-              height={24}
+                width={24}
-              className='justify-start text-sm'
+                height={24}
-            />
+                className='justify-start text-sm'
-            Delete
+              />
-          </Button>
+              Delete
+            </Button>
+          )}
           {type !== 'edit' && editUrl && (
             <Button
               type='button'
@@ -52,6 +64,46 @@ 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,15 +2,27 @@ 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 = ({ type, title, backUrl }: FormHeaderProps) => {
+export const FormHeader = ({
+  type,
+  title,
+  backUrl,
+  onBackClick,
+}: FormHeaderProps) => {
   return (
     <header className='flex flex-col gap-4'>
-      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+      <Button
+        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>
@@ -18,6 +30,7 @@ export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
         {type === 'add' && `Tambah ${title}`}
         {type === 'edit' && `Edit ${title}`}
         {type === 'detail' && `Detail ${title}`}
+        {!type && title}
       </h1>
     </header>
   );

src/components/input/CheckboxInput.tsx

@@ -2,8 +2,9 @@
 
 import { HTMLProps, useEffect, useRef } from 'react';
 import { cn } from '@/lib/helper';
+import { Size } from '@/types/theme';
 
-interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
   name: string;
   label?: string;
   indeterminate?: boolean;
@@ -16,6 +17,7 @@ interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
   isError?: boolean;
   isValid?: boolean;
   errorMessage?: string;
+  size?: Size;
 }
 
 const CheckboxInput = ({
@@ -27,10 +29,19 @@ 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;
@@ -53,7 +64,7 @@ const CheckboxInput = ({
           id={name}
           name={name}
           className={cn(
-            'checkbox cursor-pointer',
+            checkboxBaseClassName,
             {
               'border-error': isError,
               'border-success': isValid,

src/components/input/DateInput.tsx

@@ -1,14 +1,23 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import {
-
+  ChangeEventHandler,
-import { cn } from '@/lib/helper';
+  FocusEventHandler,
+  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;
+  value?: string | { from?: string; to?: string };
   placeholder?: string;
   min?: string;
   max?: string;
@@ -24,9 +33,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>;
 }
@@ -36,22 +45,148 @@ const DateInput = ({
   bottomLabel,
   name,
   value,
-  placeholder,
+  placeholder = 'dd/mm/yyyy',
   min,
   max,
   className,
-  isError,
+  isError: externalError,
-  isValid,
+  isValid: externalValid,
-  errorMessage,
+  errorMessage: externalErrorMessage,
-  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(
@@ -64,65 +199,136 @@ 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 className='text-error'>*</span>
+            </span>
-              </span>
-            </>
           )}
         </label>
       )}
 
       <div
         className={cn(
-          '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',
+          'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
           {
-            'border-error': isError,
+            'border-error': finalIsError,
-            'border-success!': isValid,
+            'border-success': externalValid && !finalIsError,
           },
           className?.inputWrapper
         )}
       >
-        {startAdornment && startAdornment}
-
         <input
-          type='date'
+          type='text'
           id={name}
           name={name}
-          placeholder={placeholder}
+          placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
-          value={value}
+          value={displayValue}
-          onChange={onChange}
+          onBlur={handleBlur}
-          onBlur={onBlur}
+          onClick={handleClick}
-          min={min}
-          max={max}
           disabled={disabled}
-          className={cn('grow bg-transparent cursor-pointer', className?.input)}
+          readOnly // ✅ tidak bisa diketik manual
-          readOnly={readOnly}
+          className={cn(
+            'grow bg-transparent cursor-pointer focus:outline-none',
+            className?.input
+          )}
         />
 
-        {(isLoading || endAdornment) && (
+        {isLoading && (
           <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
+            <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>
 
-      {!isError && bottomLabel && (
+      {!finalIsError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
-      {isError && errorMessage && (
+      {finalIsError && finalErrorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+        <p className='w-full text-sm text-error'>{finalErrorMessage}</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

@@ -0,0 +1,44 @@
+'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/DropFileInput.tsx

@@ -0,0 +1,194 @@
+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}
-      startAdornment={inputPrefix}
+      inputPrefix={inputPrefix}
-      endAdornment={inputSuffix}
+      inputSuffix={inputSuffix}
       {...restProps}
     />
   );

src/components/input/PatternInput.tsx

@@ -0,0 +1,90 @@
+'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,6 +1,11 @@
 'use client';
 
-import { ChangeEventHandler, ReactNode } from 'react';
+import {
+  ChangeEventHandler,
+  ReactNode,
+  createContext,
+  useContext,
+} from 'react';
 import { cn } from '@/lib/helper';
 
 export interface RadioOption {
@@ -8,37 +13,74 @@ export interface RadioOption {
   value: string;
 }
 
-export interface RadioInputProps {
+// DaisyUI Radio Colors
-  label?: string;
+export type RadioColor =
-  bottomLabel?: string;
+  | '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;
-  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;
 }
 
-const RadioInput = ({
+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[];
+  color?: RadioColor;
+  size?: RadioSize;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    radioWrapper?: string;
+  };
+  isError?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  children?: ReactNode;
+}
+
+export const RadioGroup = ({
   label,
   bottomLabel,
   name,
   value,
   options,
-  variant = 'radio-primary',
+  color = 'primary',
+  size = 'md',
   className,
   isError,
   errorMessage,
@@ -46,68 +88,125 @@ const RadioInput = ({
   disabled = false,
   onChange,
   onBlur,
-}: RadioInputProps) => {
+  children,
-  return (
+}: RadioGroupProps) => {
-    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+  const contextValue: RadioGroupContextValue = {
-      {/* Label atas */}
+    name,
-      {label && (
+    value,
-        <label
+    color,
-          className={cn(
+    size,
-            'w-full text-sm font-normal leading-5',
+    disabled,
-            { 'text-error': isError },
+    onChange,
-            className?.label
+    onBlur,
-          )}
+  };
-        >
-          {label}
-          {required && (
-            <span className='text-error ml-1' title='required'>
-              *
-            </span>
-          )}
-        </label>
-      )}
 
-      {/* Daftar opsi radio */}
+  return (
-      <div
+    <RadioGroupContext.Provider value={contextValue}>
-        className={cn(
+      <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
-          'flex flex-row flex-wrap gap-4 items-center',
+        {/* Label atas */}
-          className?.radioWrapper
+        {label && (
-        )}
-      >
-        {options.map((option) => (
           <label
-            key={option.value}
             className={cn(
-              'flex flex-row items-center gap-2 cursor-pointer',
+              'w-full text-sm font-normal leading-5',
-              disabled && 'opacity-60 cursor-not-allowed'
+              { 'text-error': isError },
+              className?.label
             )}
           >
-            <input
+            {label}
-              type='radio'
+            {required && (
-              name={name}
+              <span className='text-error ml-1' title='required'>
-              value={option.value}
+                *
-              checked={value === option.value}
+              </span>
-              onChange={onChange}
+            )}
-              onBlur={onBlur}
-              disabled={disabled}
-              className={cn('radio', variant, className?.radio)}
-            />
-            <span className='text-sm'>{option.label}</span>
           </label>
-        ))}
+        )}
+
+        {/* Daftar opsi radio */}
+        <div
+          className={cn(
+            'flex flex-row flex-wrap gap-4 items-center',
+            className?.radioWrapper
+          )}
+        >
+          {/* Jika options diberikan, render otomatis */}
+          {options &&
+            options.map((option) => (
+              <RadioGroupItem
+                key={option.value}
+                value={option.value}
+                label={option.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>
-      {/* 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;
+// 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
+        type='radio'
+        name={name}
+        value={value}
+        checked={groupValue === value}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={isDisabled}
+        className={cn('radio', `radio-${radioColor}`, `radio-${radioSize}`)}
+      />
+      {label && <span className='text-sm'>{label}</span>}
+    </label>
+  );
+};

src/components/input/SelectInput.tsx

@@ -1,22 +1,23 @@
 '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 { isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -53,6 +54,8 @@ interface SelectInputBaseProps<T = OptionType> {
   openMenu?: boolean;
   delay?: number;
   onInputChange?: (search: string) => void;
+  startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -63,6 +66,33 @@ 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,
@@ -87,15 +117,25 @@ 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 : {};
-    return { ...base, IndicatorSeparator: () => null };
+    const customComponents = { ...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);
@@ -139,9 +179,12 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className='tooltip tooltip-error' data-tip='required'>
+            <>
-              <span className='text-error'> *</span>
+              {' '}
-            </span>
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'>*</span>
+              </span>
+            </>
           )}
         </span>
       )}
@@ -149,11 +192,12 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
         value={value ?? (isMulti ? [] : null)}
-        onChange={handleChange}
+        onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
         onInputChange={internalInputChangeHandler}
+        onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
         isDisabled={isDisabled}
         isLoading={isLoading}
@@ -163,17 +207,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         placeholder={placeholder}
         className={cn('w-full', className?.select)}
         classNames={{
-          control: ({ isFocused, isDisabled }) =>
+          ...(!startAdornment && {
-            cn(
+            control: ({ isFocused, isDisabled }) =>
-              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+              cn(
-              {
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-                'border-red-500! ring-2 ring-red-200': isError,
+                {
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-red-500! ring-2 ring-red-200': isError,
-                'border-gray-300': !isError && !isFocused,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                  'border-gray-300': !isError && !isFocused,
-              }
+                  '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: () =>
@@ -190,7 +236,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 cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -211,8 +257,14 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
         }}
+        {...(startAdornment && {
+          shouldShowAdornment,
+          startAdornment,
+        })}
         menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -229,8 +281,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T,
+  valueKey: keyof T | string,
-  labelKey: keyof T,
+  labelKey: keyof T | string,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -241,7 +293,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;
 

src/components/input/TextArea.tsx

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

@@ -1,35 +1,29 @@
 'use client';
 
-import { RefObject } from 'react';
+import { MouseEventHandler, RefObject, useState } from 'react';
 
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
-import Button from '@/components/Button';
+import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
-import { Color } from '@/types/theme';
 
-interface ConfirmationModalProps {
+export interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
   closeOnBackdrop?: boolean;
-  primaryButton?: {
+  primaryButton?: ButtonProps & {
     text?: string;
-    color?: Color;
-    isLoading?: boolean;
-    onClick?: () => void;
   };
-  secondaryButton?: {
+  secondaryButton?: ButtonProps & {
     text?: string;
-    color?: Color;
-    isLoading?: boolean;
-    onClick?: () => void;
   };
   className?: {
     modal?: string;
     modalBox?: string;
   };
+  children?: React.ReactNode;
 }
 
 const ConfirmationModal = ({
@@ -40,11 +34,24 @@ 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'>
@@ -90,13 +97,20 @@ 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 ?? 'none'}
+              color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
-              disabled={secondaryButton?.isLoading}
+              disabled={
+                secondaryButton?.isLoading !== undefined
+                  ? secondaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
               onClick={closeModalHandler}
               className='grow'
             >
@@ -106,10 +120,19 @@ const ConfirmationModal = ({
 
           {primaryButton && primaryButton.text && (
             <Button
+              {...primaryButton}
               color={primaryButton?.color ?? 'info'}
-              onClick={primaryButton?.onClick}
+              onClick={primaryButtonClickHandler}
-              isLoading={primaryButton?.isLoading}
+              isLoading={
-              disabled={primaryButton?.isLoading}
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              disabled={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
               className='grow'
             >
               {primaryButton?.text ?? 'Ya'}

src/components/modal/ConfirmationModalWithNotes.tsx

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

src/components/molecules/SidebarMenu.tsx

@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import Menu from '@/components/menu/Menu';
+import { Icon } from '@iconify/react';
+import { cn, isPathActive } from '@/lib/helper';
+
+export interface SidebarMenuItem {
+  type?: 'item' | 'title';
+  text: string;
+  link: string;
+  icon?: string;
+  submenu?: SidebarMenuItem[];
+}
+
+interface SidebarMenuItemProps {
+  item: SidebarMenuItem;
+  activeLink: string;
+}
+
+interface SidebarMenuProps {
+  menu: SidebarMenuItem[];
+  activeLink: string;
+}
+
+const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const isItemActive = isPathActive(activeLink, item.link);
+
+  const menuItemWithoutSubmenu = (
+    <li>
+      <Link
+        href={item.link}
+        className={cn(
+          {
+            'menu-active border-2 border-solid border-base-300': isItemActive,
+          },
+          'px-3 py-1.5'
+        )}
+      >
+        {item.icon && <Icon icon={item.icon} width={20} height={20} />}
+
+        <span className='text-base'>{item.text}</span>
+      </Link>
+    </li>
+  );
+
+  if (!item.submenu || item.submenu.length === 0) {
+    return menuItemWithoutSubmenu;
+  }
+
+  const menuItemWithSubmenu = (
+    <li>
+      <details open={isItemActive}>
+        <summary
+          className={cn({
+            'text-primary': isItemActive,
+          })}
+        >
+          {item.icon && <Icon icon={item.icon} width={20} height={20} />}
+
+          <span className='text-base'>{item.text}</span>
+        </summary>
+
+        <ul>
+          {item.submenu.map((submenuItem, submenuIdx) => (
+            <SidebarMenuItem
+              key={`submenu#${submenuIdx}`}
+              item={submenuItem}
+              activeLink={activeLink}
+            />
+          ))}
+        </ul>
+      </details>
+    </li>
+  );
+
+  return menuItemWithSubmenu;
+};
+
+const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
+  return (
+    <Menu>
+      {menu.map((menuItem, menuIdx) => (
+        <SidebarMenuItem
+          key={menuIdx}
+          item={menuItem}
+          activeLink={activeLink}
+        />
+      ))}
+    </Menu>
+  );
+};
+
+export default SidebarMenu;

src/components/pages/ApprovalSteps.tsx

@@ -4,12 +4,21 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
 import { cn, formatDate } from '@/lib/helper';
-import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import {
+  BaseApiResponse,
+  BaseApproval,
+  BaseGroupedApproval,
+} from '@/types/api/api-general';
 import { ApprovalLine } from '@/types/config/constant';
+import useSWR from 'swr';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useCallback, useMemo } from 'react';
 
 export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
 
 export type ApprovalStepLog = {
+  action: string;
   action_by?: string;
   date?: string;
   notes?: string | null;
@@ -57,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
                 position='right'
                 className={{
                   wrapper: 'md:tooltip-bottom',
+                  content: 'p-0 rounded overflow-hidden',
                 }}
                 content={
                   <>
                     {approval.logs && approval.logs.length > 0 && (
-                      <div className='flex flex-col gap-2'>
+                      <div className='flex flex-col gap-0'>
-                        {approval.logs?.map((approvalLog, logIdx) => (
+                        {approval.logs?.map((approvalLog, logIdx) => {
-                          <div
+                          const action =
-                            key={logIdx}
+                            approvalLog.action === 'CREATED'
-                            className='flex flex-col text-base text-start'
+                              ? 'Dibuat'
-                          >
+                              : approvalLog.action === 'UPDATED'
-                            {approvalLog.date && (
+                                ? 'Diperbarui'
-                              <span>
+                                : approvalLog.action === 'APPROVED'
-                                {formatDate(
+                                  ? 'Disetujui'
-                                  approvalLog.date,
+                                  : approvalLog.action === 'REJECTED'
-                                  'YYYY-MM-DD, HH:mm:ss'
+                                    ? 'Ditolak'
-                                )}
+                                    : '-';
-                              </span>
+
-                            )}
+                          return (
-                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                            <div
-                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                              key={logIdx}
-                          </div>
+                              className={cn(
-                        ))}
+                                'p-2 flex flex-col text-base text-start',
+                                {
+                                  'bg-success text-success-content':
+                                    approvalLog.action === 'APPROVED',
+                                  'bg-error text-error-content':
+                                    approvalLog.action === 'REJECTED',
+                                  'bg-info text-info-content':
+                                    approvalLog.action === 'CREATED',
+                                  'bg-warning text-warning-content':
+                                    approvalLog.action === 'UPDATED',
+                                }
+                              )}
+                            >
+                              {approvalLog.date && (
+                                <span>
+                                  {formatDate(
+                                    approvalLog.date,
+                                    'YYYY-MM-DD, HH:mm:ss'
+                                  )}
+                                </span>
+                              )}
+                              <span>Aksi: {action}</span>
+                              <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                              <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                            </div>
+                          );
+                        })}
                       </div>
                     )}
                   </>
@@ -108,65 +144,98 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
 
 export const formatGroupedApprovalsToApprovalSteps = (
   approvalLine: ApprovalLine,
-  groupedApprovals: BaseGroupedApproval[],
+  groupedApprovals: BaseGroupedApproval[] | undefined,
-  latestApproval: BaseApproval
+  latestApproval: BaseApproval | undefined
 ): ApprovalStepsProps['approvals'] => {
   const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
     approvalLine.map((approvalLineItem) => {
-      const approvalGroup = groupedApprovals.find(
+      const approvalGroup = groupedApprovals?.find(
         (approvalGroupItem) =>
           approvalGroupItem.step_number === approvalLineItem.step_number
       );
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1].step_number;
+        groupedApprovals?.[groupedApprovals.length - 1]?.step_number;
 
-      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
+      const isLatestApprovalRejected = latestApproval?.action === 'REJECTED';
-        throw new Error(
+
-          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+      // Only throw error if we have a valid lastStepNumber to compare against
-        );
+      if (
+        !approvalGroup &&
+        lastStepNumber !== undefined &&
+        currentStepNumber <= lastStepNumber
+      ) {
+        // throw new Error(
+        //   `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        // );
       }
 
       if (!approvalGroup) {
-        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+        // Check if this step is waiting (only if we have latestApproval)
+        const isWaiting =
+          latestApproval?.step_number !== undefined &&
+          currentStepNumber === latestApproval.step_number + 1;
+
+        // Check if previous approval was rejected
+        const isPreviousApprovalRejected =
+          groupedApprovals &&
+          groupedApprovals.length > 0 &&
+          groupedApprovals[groupedApprovals.length - 1]?.approvals?.[0]
+            ?.action === 'REJECTED';
 
         return {
           name: approvalLineItem.step_name,
-          status: isWaiting ? 'WAITING' : 'IDLE',
+          status: isPreviousApprovalRejected
+            ? 'IDLE'
+            : isWaiting
+              ? 'WAITING'
+              : 'IDLE',
         };
       }
 
-      let approvalStatus: ApprovalStepStatus;
+      let approvalStatus: ApprovalStepStatus = 'IDLE';
 
-      if (approvalGroup.step_number <= latestApproval.step_number) {
+      // Only compare if latestApproval and its step_number exist
-        switch (approvalGroup.approvals[0].action) {
+      if (
-          case 'CREATED':
+        latestApproval?.step_number !== undefined &&
-          case 'APPROVED':
+        approvalGroup.step_number <= latestApproval.step_number
-            approvalStatus = 'APPROVED';
+      ) {
-            break;
+        if (approvalGroup.approvals) {
+          switch (approvalGroup?.approvals[0]?.action) {
+            case 'CREATED':
+            case 'UPDATED':
+            case 'APPROVED':
+              approvalStatus = 'APPROVED';
+              break;
 
-          case 'REJECTED':
+            case 'REJECTED':
-            approvalStatus = 'REJECTED';
+              approvalStatus = 'REJECTED';
-            break;
+              break;
 
-          default:
+            default:
-            approvalStatus = 'IDLE';
+              approvalStatus = 'IDLE';
-            break;
+              break;
+          }
         }
-      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+      } else if (
+        latestApproval?.step_number !== undefined &&
+        approvalGroup.step_number === latestApproval.step_number + 1 &&
+        !isLatestApprovalRejected
+      ) {
         approvalStatus = 'WAITING';
       } else {
         approvalStatus = 'IDLE';
       }
 
-      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
-        (approval) => ({
+        ? approvalGroup.approvals.map((approval) => ({
-          action_by: approval.action_by.name,
+            action_by: approval.action_by.name,
-          date: approval.action_at,
+            date: approval.action_at,
-          notes: approval.notes,
+            notes: approval.notes,
-        })
+            action: approval.action,
-      );
+          }))
+        : [];
 
       return {
         name: approvalGroup.step_name,
@@ -179,3 +248,197 @@ export const formatGroupedApprovalsToApprovalSteps = (
 };
 
 export default ApprovalSteps;
+
+/**
+ * Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
+ */
+const groupApprovalsByStep = (
+  approvals: BaseApproval[]
+): BaseGroupedApproval[] => {
+  const groups: Record<number, BaseGroupedApproval> = {};
+  for (const approval of approvals) {
+    if (!groups[approval.step_number]) {
+      groups[approval.step_number] = {
+        step_number: approval.step_number,
+        step_name: approval.step_name,
+        approvals: [],
+      };
+    }
+    groups[approval.step_number].approvals.push(approval);
+  }
+  return Object.values(groups);
+};
+
+/**
+ * Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
+ */
+const flattenGroupedApprovals = (
+  groupedApprovals: BaseGroupedApproval[]
+): BaseApproval[] => {
+  return groupedApprovals.flatMap((group) => group.approvals);
+};
+
+/**
+ * Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
+ */
+const isGroupedApprovalData = (
+  data: BaseApproval[] | BaseGroupedApproval[]
+): data is BaseGroupedApproval[] => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  const firstElement = data[0];
+  return (
+    typeof firstElement === 'object' &&
+    firstElement !== null &&
+    'approvals' in firstElement &&
+    Array.isArray(firstElement.approvals)
+  );
+};
+
+const useApprovalSteps = ({
+  latestApproval,
+  approvalLines,
+  moduleName,
+  moduleId,
+  params,
+}: {
+  latestApproval: BaseApproval | undefined;
+  approvalLines: ApprovalLine;
+  moduleName: string;
+  moduleId: string;
+  params?: {
+    page?: number;
+    limit: number;
+    search?: string;
+    group_step_number?: boolean;
+  };
+}) => {
+  // Membuat URL Parameters
+  const paramString = new URLSearchParams({
+    page: params?.page?.toString() || '',
+    limit: params?.limit?.toString() || '',
+    search: params?.search || '',
+  }).toString();
+
+  // fetching data approvals
+  const SWR_KEY_APPROVALS =
+    moduleName && moduleId
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
+          params ? `&${paramString}` : ''
+        }`
+      : null;
+
+  const {
+    data: approvalData,
+    isLoading: approvalIsLoading,
+    mutate: mutateApprovals,
+  } = useSWR(SWR_KEY_APPROVALS, async (url) => {
+    return await httpClientFetcher<
+      BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
+    >(url);
+  });
+
+  // Fungsi Refresh
+  const refresh = useCallback(async () => {
+    await mutateApprovals();
+  }, [mutateApprovals]);
+
+  const { groupedApprovals } = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    let processedGroupedApprovals: BaseGroupedApproval[] = [];
+
+    if (rawData) {
+      if (isGroupedApprovalData(rawData)) {
+        processedGroupedApprovals = rawData;
+      } else {
+        processedGroupedApprovals = groupApprovalsByStep(
+          rawData as BaseApproval[]
+        );
+      }
+    }
+
+    return {
+      groupedApprovals: processedGroupedApprovals,
+    };
+  }, [approvalData]);
+
+  const isLoading = approvalIsLoading;
+
+  // Formatting Akhir
+  const approvals = useMemo(() => {
+    if (isLoading || !approvalLines.length) {
+      return [];
+    }
+
+    // Try to derive latestApproval from groupedApprovals if not provided
+    let effectiveLatestApproval = latestApproval;
+
+    if (!effectiveLatestApproval && groupedApprovals.length > 0) {
+      // Get all approvals from grouped data
+      const allApprovals = groupedApprovals.flatMap((group) => group.approvals);
+
+      if (allApprovals.length > 0) {
+        // Use the most recent approval (last in array)
+        effectiveLatestApproval = allApprovals[allApprovals.length - 1];
+      }
+    }
+
+    // If still no latestApproval, return empty
+    if (!effectiveLatestApproval) {
+      return [];
+    }
+
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        approvalLines,
+        groupedApprovals,
+        effectiveLatestApproval
+      );
+    } catch (error) {
+      console.warn('Gagal memformat approval steps:', error);
+      return [];
+    }
+  }, [isLoading, approvalLines, groupedApprovals, latestApproval]);
+
+  // Raw Data Approvals
+  const rawDataApprovals = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    if (!rawData) {
+      return undefined;
+    }
+
+    const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
+    const wantsGrouped = params?.group_step_number !== false;
+
+    if (wantsGrouped) {
+      if (isDataCurrentlyGrouped) {
+        return rawData as BaseGroupedApproval[];
+      } else {
+        return groupApprovalsByStep(rawData as BaseApproval[]);
+      }
+    } else {
+      if (isDataCurrentlyGrouped) {
+        return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
+      } else {
+        return rawData as BaseApproval[];
+      }
+    }
+  }, [approvalData, params?.group_step_number]);
+
+  // Return Hook
+  return {
+    approvals,
+    isLoading,
+    rawDataApprovals: rawDataApprovals,
+    refresh,
+  };
+};
+
+export { useApprovalSteps };

src/components/pages/closing/ClosingDetail.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+} from '@/types/api/closing';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
+import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
+import SalesReportTable from './sale/SalesReportTable';
+
+interface ClosingDetailProps {
+  id: number;
+  initialValue?: ClosingGeneralInformation;
+  salesData?: BaseClosingSales;
+}
+
+const ClosingDetail: React.FC<ClosingDetailProps> = ({
+  id,
+  initialValue,
+  salesData,
+}) => {
+  const [activeTab, setActiveTab] = useState<string>('sapronak');
+
+  const closingDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'sapronak',
+        label: 'Sapronak',
+        content: <ClosingSapronakTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'perhitunganSapronak',
+        label: 'Perhitungan Sapronak',
+        content: <ClosingSapronakCalculationTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'penjualan',
+        label: 'Penjualan',
+        content: <SalesReportTable initialValues={salesData} />,
+      },
+      {
+        id: 'overhead',
+        label: 'Overhead',
+        content: <ClosingOverheadTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'hppEkspedisi',
+        label: 'HPP Ekspedisi',
+        content: 'HPP Ekspedisi',
+      },
+      {
+        id: 'dataProduksi',
+        label: 'Data Produksi',
+        content: 'Data Produksi',
+      },
+      {
+        id: 'keuangan',
+        label: 'Keuangan',
+        content: 'Keuangan',
+      },
+    ];
+
+    return validTabs;
+  }, [initialValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-7xl pb-16'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/closing'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
+        </header>
+
+        <ClosingGeneralInformationTable initialValue={initialValue} />
+
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={closingDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'w-full mt-4',
+          }}
+        />
+      </section>
+    </>
+  );
+};
+
+export default ClosingDetail;

src/components/pages/closing/ClosingGeneralInformationTable.tsx

@@ -0,0 +1,100 @@
+import { ClosingGeneralInformation } from '@/types/api/closing';
+
+interface ClosingGeneralInformationProps {
+  initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingGeneralInformationTable = ({
+  initialValue,
+}: ClosingGeneralInformationProps) => {
+  return (
+    <div className='w-full my-4 @container'>
+      <div className='flex flex-col @sm:flex-row gap-4'>
+        <div className='w-full'>
+          <div className='overflow-x-auto'>
+            <table className='table table-zebra table-sm'>
+              <tbody>
+                <tr>
+                  <td>Lokasi</td>
+                  <td>:</td>
+                  <td>{initialValue?.location_name}</td>
+                </tr>
+                <tr>
+                  <td>Periode</td>
+                  <td>:</td>
+                  <td>{initialValue?.period}</td>
+                </tr>
+                <tr>
+                  <td>Kategori</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_category}</td>
+                </tr>
+                <tr>
+                  <td>Populasi</td>
+                  <td>:</td>
+                  <td>{initialValue?.population} Ekor</td>
+                </tr>
+                <tr>
+                  <td>Jenis Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_type}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Kandang Aktif</td>
+                  <td>:</td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Pembayaran Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValue?.sales_payment_status}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_status}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Closing</td>
+                  <td>:</td>
+                  <td>{initialValue?.closing_status}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className='w-full hidden @sm:block'>
+          <div className='overflow-x-auto'>
+            <table className='table table-zebra table-sm'>
+              <tbody>
+                <tr>
+                  <td>Kandang Aktif</td>
+                  <td>:</td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
+                </tr>
+                <tr>
+                  <td>Status Pembayaran Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValue?.sales_payment_status}</td>
+                </tr>
+                <tr>
+                  <td>Status Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_status}</td>
+                </tr>
+                <tr>
+                  <td>Status Closing</td>
+                  <td>:</td>
+                  <td>{initialValue?.closing_status}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingGeneralInformationTable;

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingIncomingSapronak } from '@/types/api/closing';
+
+interface ClosingIncomingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingIncomingSapronaksTable = ({
+  projectFlockId,
+}: ClosingIncomingSapronaksTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming`,
+      ClosingApi.getAllIncomingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(incomingSapronaks)
+          ? incomingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [incomingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Masuk</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Masuk'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingIncomingSapronak>
+            data={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.data
+                : []
+            }
+            columns={incomingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingIncomingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(incomingSapronaks) &&
+                  incomingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingIncomingSapronaksTable;

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingOutgoingSapronak } from '@/types/api/closing';
+
+interface ClosingOutgoingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingOutgoingSapronaksTable = ({
+  projectFlockId,
+}: ClosingOutgoingSapronaksTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing`,
+      ClosingApi.getAllOutgoingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronaks)
+          ? outgoingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Keluar'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingOutgoingSapronak>
+            data={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.data
+                : []
+            }
+            columns={outgoingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingOutgoingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronaks) &&
+                  outgoingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingOutgoingSapronaksTable;

src/components/pages/closing/ClosingOverheadTabContent.tsx

@@ -0,0 +1,19 @@
+import ClosingOverheadTable from '@/components/pages/closing/ClosingOverheadTable';
+
+interface ClosingOverheadTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingOverheadTabContent = ({
+  projectFlockId,
+}: ClosingOverheadTabContentProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <ClosingOverheadTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default ClosingOverheadTabContent;

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -0,0 +1,162 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import { Overhead, OverheadTotal } from '@/types/api/closing';
+import { ColumnDef } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+interface ClosingOverheadTableProps {
+  type?: 'detail';
+  projectFlockId: number;
+}
+
+const ClosingOverheadTable = ({
+  type,
+  projectFlockId,
+}: ClosingOverheadTableProps) => {
+  const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/overhead`,
+    () => ClosingApi.getOverhead(projectFlockId),
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  // Helper function to create columns with footer support
+  const createColumns = (total?: OverheadTotal): ColumnDef<Overhead>[] => [
+    // Group untuk kolom tanpa footer
+    {
+      header: 'Nama Item',
+      accessorFn: (props) => props.item_name,
+      footer: 'Total Pengeluaran Overhead',
+    },
+    {
+      header: 'Satuan',
+      accessorFn: (props) => props.uom_name,
+    },
+    {
+      header: 'Budget Pengajuan',
+      footer: '',
+      columns: [
+        {
+          id: 'budget_quantity',
+          header: 'Jumlah',
+          accessorFn: (props) =>
+            props.budget_quantity ? formatNumber(props.budget_quantity) : '-',
+          footer: total ? () => formatNumber(total.budget_quantity) : '',
+        },
+        {
+          id: 'budget_unit_price',
+          header: 'Harga Satuan',
+          accessorFn: (props) =>
+            props.budget_unit_price
+              ? formatCurrency(props.budget_unit_price)
+              : '-',
+          footer: '',
+        },
+        {
+          id: 'budget_total_amount',
+          header: 'Total',
+          accessorFn: (props) =>
+            props.budget_total_amount
+              ? formatCurrency(props.budget_total_amount)
+              : '-',
+          footer: total ? () => formatCurrency(total.budget_total_amount) : '',
+        },
+      ],
+    },
+    {
+      header: 'Realisasi',
+      footer: '',
+      columns: [
+        {
+          id: 'actual_date',
+          header: 'Tanggal',
+          accessorFn: (props) =>
+            props.actual_date
+              ? formatDate(props.actual_date, 'DD MMM, YYYY')
+              : '-',
+          footer: '',
+        },
+        {
+          id: 'actual_quantity',
+          header: 'Jumlah',
+          accessorFn: (props) =>
+            props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
+          footer: total ? () => formatNumber(total.actual_quantity) : '',
+        },
+        {
+          id: 'actual_unit_price',
+          header: 'Harga Satuan',
+          accessorFn: (props) =>
+            props.actual_unit_price
+              ? formatCurrency(props.actual_unit_price)
+              : '-',
+          footer: '',
+        },
+        {
+          id: 'actual_total_amount',
+          header: 'Total',
+          accessorFn: (props) =>
+            props.actual_total_amount
+              ? formatCurrency(props.actual_total_amount)
+              : '-',
+          footer: total ? () => formatCurrency(total.actual_total_amount) : '',
+        },
+      ],
+    },
+    {
+      id: 'cost_per_bird',
+      header: 'Rp/Ekor',
+      accessorFn: (props) =>
+        props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
+      footer: total ? () => formatCurrency(total.cost_per_bird) : '',
+    },
+  ];
+
+  const columns = useMemo(
+    () =>
+      isResponseSuccess(overhead)
+        ? createColumns(overhead.data?.total)
+        : createColumns(),
+    [overhead]
+  );
+
+  return (
+    <>
+      <Card
+        title='Pengeluaran Overhead'
+        collapsible
+        defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
+      >
+        <Table<Overhead>
+          data={
+            isResponseSuccess(overhead) ? (overhead.data?.overheads ?? []) : []
+          }
+          columns={columns}
+          className={{
+            containerClassName: 'my-4',
+            headerColumnClassName: cn(
+              TABLE_DEFAULT_STYLING.headerColumnClassName,
+              'whitespace-nowrap'
+            ),
+          }}
+          renderFooter={
+            isResponseSuccess(overhead)
+              ? overhead.data?.overheads.length > 0
+              : false
+          }
+        />
+      </Card>
+    </>
+  );
+};
+
+export default ClosingOverheadTable;

src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
+import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
+import ClosingSapronakCalculationTable from '@/components/pages/closing/ClosingSapronakCalculationTable';
+
+interface ClosingSapronakCalculationTabContentProps {
+  projectFlockId?: number;
+}
+
+const ClosingSapronakCalculationTabContent = ({
+  projectFlockId,
+}: ClosingSapronakCalculationTabContentProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <>
+          <ClosingSapronakCalculationTable projectFlockId={projectFlockId} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ClosingSapronakCalculationTabContent;

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import Card from '@/components/Card';
+
+import Table from '@/components/Table';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import {
+  RowSapronakCalculation,
+  TotalSapronakCalculation,
+} from '@/types/api/closing';
+import { ColumnDef } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+interface ClosingSapronakCalculationTableProps {
+  type?: 'detail';
+  projectFlockId: number;
+}
+
+const ClosingSapronakCalculationTable = ({
+  type,
+  projectFlockId,
+}: ClosingSapronakCalculationTableProps) => {
+  const { data: sapronakCalculation, isLoading } = useSWR(
+    `/closing/sapronak-calculation/${projectFlockId}`,
+    () => ClosingApi.getPerhitunganSapronak(projectFlockId),
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  // Helper function to create columns with footer support
+  const createColumns = (
+    total?: TotalSapronakCalculation
+  ): ColumnDef<RowSapronakCalculation>[] => [
+    {
+      header: 'Tanggal',
+      accessorKey: 'tanggal',
+      cell: (props) => (props.getValue() as string) || '-',
+      footer: 'Total',
+    },
+    {
+      header: 'No. Referensi',
+      accessorKey: 'no_referensi',
+      cell: (props) => (props.getValue() as string) || '-',
+      footer: '',
+    },
+    {
+      header: 'QTY Masuk',
+      accessorKey: 'qty_masuk',
+      cell: (props) => formatNumber(props.getValue() as number),
+      footer: total
+        ? () => (
+            <div className='font-semibold text-gray-900'>
+              {formatNumber(total.qty_masuk)}
+            </div>
+          )
+        : '',
+    },
+    {
+      header: 'QTY Keluar',
+      accessorKey: 'qty_keluar',
+      cell: (props) => formatNumber(props.getValue() as number),
+      footer: total
+        ? () => (
+            <div className='font-semibold text-gray-900'>
+              {formatNumber(total.qty_keluar)}
+            </div>
+          )
+        : '',
+    },
+    {
+      header: 'QTY Pakai',
+      accessorKey: 'qty_pakai',
+      cell: (props) => formatNumber(props.getValue() as number),
+      footer: total
+        ? () => (
+            <div className='font-semibold text-gray-900'>
+              {formatNumber(total.qty_pakai)}
+            </div>
+          )
+        : '',
+    },
+    {
+      header: 'Uraian',
+      accessorKey: 'uraian',
+      cell: (props) => (props.getValue() as string) || '-',
+      footer: '',
+    },
+    {
+      header: 'Kategori Produk',
+      accessorKey: 'kategori_produk',
+      cell: (props) => (props.getValue() as string) || '-',
+      footer: '',
+    },
+    {
+      header: 'Harga Beli/Qty (Rp)',
+      accessorKey: 'harga_beli_per_qty',
+      cell: (props) => formatCurrency(props.getValue() as number),
+      footer: total
+        ? () => (
+            <div className='font-semibold text-gray-900'>
+              {formatCurrency(total.harga_beli_per_qty)}
+            </div>
+          )
+        : '',
+    },
+    {
+      header: 'Total Harga (Rp)',
+      accessorKey: 'total_harga',
+      cell: (props) => formatCurrency(props.getValue() as number),
+      footer: total
+        ? () => (
+            <div className='font-semibold text-gray-900'>
+              {formatCurrency(total.total_harga)}
+            </div>
+          )
+        : '',
+    },
+    {
+      header: 'Keterangan',
+      accessorKey: 'keterangan',
+      cell: (props) => (props.getValue() as string) || '-',
+      footer: '',
+    },
+  ];
+
+  // Memoize columns untuk setiap kategori
+  const docBroilerColumns = useMemo(
+    () =>
+      isResponseSuccess(sapronakCalculation)
+        ? createColumns(sapronakCalculation.data?.doc_broiler.total)
+        : createColumns(),
+    [sapronakCalculation]
+  );
+
+  const ovkColumns = useMemo(
+    () =>
+      isResponseSuccess(sapronakCalculation)
+        ? createColumns(sapronakCalculation.data?.ovk.total)
+        : createColumns(),
+    [sapronakCalculation]
+  );
+
+  const pakanColumns = useMemo(
+    () =>
+      isResponseSuccess(sapronakCalculation)
+        ? createColumns(sapronakCalculation.data?.pakan.total)
+        : createColumns(),
+    [sapronakCalculation]
+  );
+
+  return (
+    <div className='flex flex-col gap-4'>
+      {isResponseSuccess(sapronakCalculation) && (
+        <>
+          <Card
+            title='DOC Broiler'
+            collapsible
+            defaultCollapsed={false}
+            className={{
+              wrapper: 'w-full',
+              body: 'p-4 shadow',
+            }}
+          >
+            <Table<RowSapronakCalculation>
+              data={sapronakCalculation.data?.doc_broiler.rows ?? []}
+              columns={docBroilerColumns}
+              className={{
+                containerClassName: 'my-4',
+              }}
+              renderFooter
+            />
+          </Card>
+
+          <Card
+            title='OVK'
+            variant='bordered'
+            collapsible
+            defaultCollapsed={true}
+            className={{
+              wrapper: 'w-full',
+            }}
+          >
+            <Table<RowSapronakCalculation>
+              data={sapronakCalculation.data?.ovk.rows ?? []}
+              columns={ovkColumns}
+              className={{
+                containerClassName: 'my-4',
+              }}
+              renderFooter
+            />
+          </Card>
+
+          <Card
+            title='Pakan'
+            variant='bordered'
+            collapsible
+            defaultCollapsed={true}
+            className={{
+              wrapper: 'w-full',
+            }}
+          >
+            <Table<RowSapronakCalculation>
+              data={sapronakCalculation.data?.pakan.rows ?? []}
+              columns={pakanColumns}
+              className={{
+                containerClassName: 'my-4',
+              }}
+              renderFooter
+            />
+          </Card>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ClosingSapronakCalculationTable;

src/components/pages/closing/ClosingSapronakTabContent.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
+import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
+
+interface ClosingSapronakTableProps {
+  projectFlockId?: number;
+}
+
+const ClosingSapronakTabContent = ({
+  projectFlockId,
+}: ClosingSapronakTableProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <>
+          <ClosingIncomingSapronaksTable projectFlockId={projectFlockId} />
+
+          <ClosingOutgoingSapronaksTable projectFlockId={projectFlockId} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ClosingSapronakTabContent;

src/components/pages/closing/ClosingsTable.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { LocationApi } from '@/services/api/master-data';
+import { Location } from '@/types/api/master-data/location';
+import { ClosingApi } from '@/services/api/closing';
+import { Closing } from '@/types/api/closing';
+
+const PROJECT_STATUS_OPTIONS = [
+  {
+    value: 1,
+    label: 'Pengajuan',
+  },
+  {
+    value: 2,
+    label: 'Aktif',
+  },
+];
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Closing, unknown>;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      {/* TODO: apply RBAC */}
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <Button
+          href={`/closing/detail/?closingId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </div>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const ClosingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+      transactionDate: '',
+      realizationDate: '',
+      locationId: '',
+      projectStatus: '',
+      userId: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      transactionDate: 'transaction_date',
+      realizationDate: 'realization_date',
+      locationId: 'location_id',
+      projectStatus: 'project_status',
+      userId: 'user_id',
+    },
+  });
+
+  const { data: closings, isLoading: isLoadingClosings } = useSWR(
+    `${ClosingApi.basePath}${getTableFilterQueryString()}`,
+    ClosingApi.getAllFetcher
+  );
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const closingsColumns: ColumnDef<Closing>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'location_name',
+      header: 'Lokasi',
+    },
+    {
+      accessorKey: 'project_category',
+      header: 'Kategori',
+    },
+    {
+      accessorKey: 'period',
+      header: 'Periode',
+    },
+    {
+      accessorKey: 'closing_date',
+      header: 'Periode',
+      cell: (props) =>
+        formatDate(props.row.original.closing_date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'shed_label',
+      header: 'Jumlah Kandang',
+    },
+    {
+      accessorKey: 'sales_paid_amount',
+      header: 'Jumlah Sudah Bayar',
+      cell: (props) => (
+        <span className='text-success'>
+          {formatCurrency(props.row.original.sales_paid_amount)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'sales_remaining_amount',
+      header: 'Jumlah Sisa Bayar',
+      cell: (props) => (
+        <span className='text-error'>
+          {formatCurrency(props.row.original.sales_remaining_amount)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'sales_payment_status',
+      header: 'Status Pembayaran',
+    },
+    {
+      accessorKey: 'project_status',
+      header: 'Status',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
+
+        return (
+          <>
+            {currentPageSize > 3 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu type='dropdown' props={props} />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 3 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu type='collapse' props={props} />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'locationId',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedProjectStatus, setSelectedProjectStatus] =
+    useState<OptionType | null>(null);
+
+  const projectStatusChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedProjectStatus(val as OptionType);
+    updateFilter(
+      'projectStatus',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-end items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Closing'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+
+            <div className='grid grid-cols-12 justify-end gap-2'>
+              <SelectInput
+                label='Lokasi'
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-6',
+                }}
+              />
+
+              <SelectInput
+                label='Status Project'
+                placeholder='Pilih Status'
+                options={PROJECT_STATUS_OPTIONS}
+                value={selectedProjectStatus}
+                onChange={projectStatusChangeHandler}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-6',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <Table<Closing>
+          data={isResponseSuccess(closings) ? closings?.data : []}
+          columns={closingsColumns}
+          pageSize={tableFilterState.pageSize}
+          onPageSizeChange={setPageSize}
+          rowOptions={[10, 20, 50, 100]}
+          page={isResponseSuccess(closings) ? closings?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(closings) ? closings?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoadingClosings}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'w-full mb-20':
+                isResponseSuccess(closings) && closings?.data?.length === 0,
+            }),
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ClosingsTable;