diff --git a/.gitignore b/.gitignore
index 82965e2d..e47b8ec3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,8 +40,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# prettier
-.prettierrc
-
 # idea
 .idea
+
+# claude
+.claude
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index efda72f0..ee8a79a5 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,76 +1,191 @@
-stages: [notify]
+stages:
+  - build
+  - deploy
 
-# --- Notify when MR is opened/updated ---
-notify_discord_mr:
-  stage: notify
-  image: alpine:3.20
-  rules:
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+.build_template: &build_template
+  stage: build
+  image: node:20-alpine
+  cache:
+    key: npm-cache
+    paths:
+      - node_modules/
   variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
-  before_script:
-    - apk add --no-cache curl jq
-  script: |
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    NPM_CONFIG_PRODUCTION: 'false'
+    NODE_ENV: ''
+  script:
+    - echo "Installing dependencies..."
+    - npm ci --no-audit --no-fund
+    - echo "Build env used:"
+    - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
+    - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
+    - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
+    - echo "Building Next.js static export..."
+    - npx next build
+    - |
+      mkdir -p out
+      cat <<EOF > out/build-info.json
+      {
+        "commit": "$CI_COMMIT_SHORT_SHA",
+        "pipeline": "$CI_PIPELINE_ID",
+        "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
+        "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
+        "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
+        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
+      }
+      EOF
+  artifacts:
+    name: 'out-$CI_COMMIT_SHORT_SHA'
+    paths:
+      - out/
+    expire_in: 1 week
 
-    jq -n \
-      --arg repo "$CI_PROJECT_PATH" \
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
-      --arg url "$MR_URL" \
-      --arg requestor "${GITLAB_USER_LOGIN:-$GITLAB_USER_NAME}" \
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
-      '{
-        username: "CI Bot - FE",
-        embeds: [{
-          title: "📣 [LTI WEB CLIENT] Merge Request Opened/Updated",
-          description: ($mr + " in " + $repo),
-          url: $url,
-          color: 3447003,
-          fields: [
-            {name: "Author", value: $requestor, inline: true},
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
-            {name: "Title", value: $title}
-          ]
-        }]
-      }' \
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
+.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"
 
-# --- Notify when MR is merged ---
-notify_discord_merge:
-  stage: notify
-  image: alpine:3.20
+    # 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:
-    # Only run for merge request pipelines that are in merged state
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" && $CI_MERGE_REQUEST_STATE == "merged"'
+    - if: '$CI_COMMIT_BRANCH == "development"'
+  environment:
+    name: development
   variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
-  before_script:
-    - apk add --no-cache curl jq
-  script: |
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    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_template
+  needs: ['build:dev']
+  rules:
+    - 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
 
-    jq -n \
-      --arg repo "$CI_PROJECT_PATH" \
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
-      --arg url "$MR_URL" \
-      --arg requestor "${CI_MERGE_REQUEST_AUTHOR}" \
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
-      '{
-        username: "CI Bot - FE",
-        embeds: [{
-          title: "✅ [LTI WEB CLIENT] Merge Request Merged",
-          description: ($mr + " has been merged into " + $repo),
-          url: $url,
-          color: 3066993,
-          fields: [
-            {name: "Author", value: $requestor, inline: true},
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
-            {name: "Title", value: $title}
-          ]
-        }]
-      }' \
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 66ff6a67..3782914b 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,3 @@
+npm run format
 npm run lint
-npm run build
+npm run build
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..a3a2e197
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,25 @@
+FROM node:20-alpine
+
+RUN apk add --no-cache git bash build-base curl
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+# Buat config agar Next tahu output: export
+RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+
+# Build project (Next.js 15 otomatis static export)
+RUN NEXT_DISABLE_TURBOPACK=1 npx next build
+
+# Copy static assets dan hasil build agar bisa diakses
+RUN mkdir -p .next/server/app/_next && \
+    cp -r .next/static .next/server/app/_next/static && \
+    cp -r public/* .next/server/app/
+
+EXPOSE 3000
+
+CMD ["npx", "serve", ".next/server/app", "-l", "3000"]
\ No newline at end of file
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 00000000..b89f441b
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,39 @@
+version: '3.9'
+
+services:
+  dev-web-lti:
+    container_name: dev-web-lti
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3002:3000'
+    env_file:
+      - .env
+    environment:
+      NODE_ENV: production
+      APP_ENV: production
+    networks:
+      - dev-lti-network
+    restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: '3.0'
+          memory: 3G
+        reservations:
+          cpus: '1.0'
+          memory: 512M
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    # Optional: aktifkan healthcheck jika punya endpoint
+    # healthcheck:
+    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
+    #   interval: 10s
+    #   timeout: 3s
+    #   retries: 10
+    #   start_period: 15s
+
+networks:
+  dev-lti-network:
+    external: true
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 719cea2b..fa167c8d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,14 +10,14 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
   },
 ];
diff --git a/next.config.ts b/next.config.ts
index c781a8ac..b2d25eb6 100644
--- a/next.config.ts
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index e1f28d3e..f0212474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,18 @@
       "name": "lti-web-client",
       "version": "0.1.0",
       "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",
@@ -31,14 +33,14 @@
         "@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",
         "typescript": "^5"
       }
@@ -195,6 +197,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
@@ -1074,15 +1082,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.3.tgz",
-      "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
+      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.3.tgz",
-      "integrity": "sha512-SdhaKdko6dpsSr0DldkESItVrnPYB1NS2NpShCSX5lc7SSQmLZt5Mug6t2xbiuVWEVDLZSuIAoQyYVBYp0dR5g==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.7.tgz",
+      "integrity": "sha512-DtRU2N7BkGr8r+pExfuWHwMEPX5SD57FeA6pxdgCHODo+b/UgIgjE+rgWKtJAbEbGhVZ2jtHn4g3wNhWFoNBQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1090,9 +1098,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",
-      "integrity": "sha512-nzbHQo69+au9wJkGKTU9lP7PXv0d1J5ljFpvb+LnEomLtSbJkbZyEs6sbF3plQmiOB2l9OBtN2tNSvCH1nQ9Jg==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
       "cpu": [
         "arm64"
       ],
@@ -1106,9 +1114,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.3.tgz",
-      "integrity": "sha512-w83w4SkOOhekJOcA5HBvHyGzgV1W/XvOfpkrxIse4uPWhYTTRwtGEM4v/jiXwNSJvfRvah0H8/uTLBKRXlef8g==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
       "cpu": [
         "x64"
       ],
@@ -1122,9 +1130,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.3.tgz",
-      "integrity": "sha512-+m7pfIs0/yvgVu26ieaKrifV8C8yiLe7jVp9SpcIzg7XmyyNE7toC1fy5IOQozmr6kWl/JONC51osih2RyoXRw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
       "cpu": [
         "arm64"
       ],
@@ -1138,9 +1146,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.3.tgz",
-      "integrity": "sha512-u3PEIzuguSenoZviZJahNLgCexGFhso5mxWCrrIMdvpZn6lkME5vc/ADZG8UUk5K1uWRy4hqSFECrON6UKQBbQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
       "cpu": [
         "arm64"
       ],
@@ -1154,9 +1162,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.3.tgz",
-      "integrity": "sha512-lDtOOScYDZxI2BENN9m0pfVPJDSuUkAD1YXSvlJF0DKwZt0WlA7T7o3wrcEr4Q+iHYGzEaVuZcsIbCps4K27sA==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
       "cpu": [
         "x64"
       ],
@@ -1170,9 +1178,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.3.tgz",
-      "integrity": "sha512-9vWVUnsx9PrY2NwdVRJ4dUURAQ8Su0sLRPqcCCxtX5zIQUBES12eRVHq6b70bbfaVaxIDGJN2afHui0eDm+cLg==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
       "cpu": [
         "x64"
       ],
@@ -1186,9 +1194,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.3.tgz",
-      "integrity": "sha512-1CU20FZzY9LFQigRi6jM45oJMU3KziA5/sSG+dXeVaTm661snQP6xu3ykGxxwU5sLG3sh14teO/IOEPVsQMRfA==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
       "cpu": [
         "arm64"
       ],
@@ -1202,9 +1210,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.3.tgz",
-      "integrity": "sha512-JMoLAq3n3y5tKXPQwCK5c+6tmwkuFDa2XAxz8Wm4+IVthdBZdZGh+lmiLUHg9f9IDwIQpUjp+ysd6OkYTyZRZw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
       "cpu": [
         "x64"
       ],
@@ -1265,6 +1273,180 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.2.tgz",
+      "integrity": "sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.0.3.tgz",
+      "integrity": "sha512-N1qQDZr6phXYQOp033Hvm2nkUkx2LkszjGPbmRavs9VOYzi4sp31MaccMKptL24ii6UhBh/z9yPUhnuNe/qHwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/types": "^2.9.1",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.3.tgz",
+      "integrity": "sha512-lvP5ryzYM3wpbO9bvqLZYwEr5XBDX9jcaRICvtnoRqdJOo7PRrMnmB4MMScyb+Xw10mGeIubZAAomNAG5ONQZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/png-js": "^3.0.0",
+        "jay-peg": "^1.1.1"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.4.1.tgz",
+      "integrity": "sha512-GVzdlWoZWldRDzlWj3SttRXmVDxg7YfraAohwy+o9gb9hrbDJaaAV6jV3pc630Evd3K46OAzk8EFu8EgPDuVuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/image": "^3.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/pdfkit": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-4.0.4.tgz",
+      "integrity": "sha512-/nITLggsPlB66bVLnm0X7MNdKQxXelLGZG6zB5acF5cCgkFwmXHnLNyxYOUD4GMOMg1HOPShXDKWrwk2ZeHsvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/png-js": "^3.0.0",
+        "browserify-zlib": "^0.2.0",
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.2",
+        "jay-peg": "^1.1.1",
+        "linebreak": "^1.1.0",
+        "vite-compatible-readable-stream": "^3.6.1"
+      }
+    },
+    "node_modules/@react-pdf/png-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-3.0.0.tgz",
+      "integrity": "sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.1.1.tgz",
+      "integrity": "sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-1.1.4.tgz",
+      "integrity": "sha512-oTQDiR/t4Z/Guxac88IavpU2UgN7eR0RMI9DRKvKnvPz2DUasGjXfChAdMqDNmJJxxV26mMy9xQOUV2UU5/okg==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.3.1.tgz",
+      "integrity": "sha512-v1WAaAhQShQZGcBxfjkEThGCHVH9CSuitrZ1bIOLvB5iBKM14abYK5D6djKhWCwF6FTzYeT2WRjRMVgze/ND2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^1.9.1",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.3.1.tgz",
+      "integrity": "sha512-dPKHiwGTaOsKqNWCHPYYrx8CDfAGsUnV4tvRsEu0VPGxuot1AOq/M+YgfN/Pb+MeXCTe2/lv6NvA8haUtj3tsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/layout": "^4.4.1",
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/reconciler": "^1.1.4",
+        "@react-pdf/render": "^4.3.1",
+        "@react-pdf/types": "^2.9.1",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.1.1.tgz",
+      "integrity": "sha512-Iyw0A3wRIeQLN4EkaKf8yF9MvdMxiZ8JjoyzLzDHSxnKYoOA4UGu84veCb8dT9N8MxY5x7a0BUv/avTe586Plg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/types": "^2.9.1",
+        "color-string": "^1.9.1",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^1.0.3",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-6.0.0.tgz",
+      "integrity": "sha512-fDt19KWaJRK/n2AaFoVm31hgGmpygmTV7LsHGJNGZkgzXcFyLsx+XUl63DTDPH3iqxj3xUX128t104GtOz8tTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "bidi-js": "^1.0.2",
+        "hyphen": "^1.6.4",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.9.1.tgz",
+      "integrity": "sha512-5GoCgG0G5NMgpPuHbKG2xcVRQt7+E5pg3IyzVIIozKG3nLcnsXW4zy25vG1ZBQA0jmo39q34au/sOnL/0d1A4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1638,13 +1820,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/inputmask": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@types/inputmask/-/inputmask-5.0.7.tgz",
-      "integrity": "sha512-uojbVPWzBQ/n/0jc/d16fLqmGasFIptbrLD2WrCPWArlk+5PgblOqH4EDkI3AoobXLAlOK5yF01V8jMmvMG5qg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2260,6 +2435,12 @@
         "win32"
       ]
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2516,6 +2697,15 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2585,6 +2775,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2609,6 +2828,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2710,6 +2947,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2736,9 +2982,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2795,6 +3050,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2802,9 +3063,9 @@
       "license": "MIT"
     },
     "node_modules/daisyui": {
-      "version": "5.3.10",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.3.10.tgz",
-      "integrity": "sha512-vmjyPmm0hvFhA95KB6uiGmWakziB2pBv6CUcs5Ka/3iMBMn9S+C3SZYx9G9l2JrgTZ1EFn61F/HrPcwaUm2kLQ==",
+      "version": "5.5.8",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.8.tgz",
+      "integrity": "sha512-6psL9jIEOFOw68V10j/BKCWcRgx8dh81mmNxShr+g7HDM6UHNoPharlp9zq/PQkHNuGU1ZQsajR3HgpvavbRKQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2872,6 +3133,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2969,6 +3246,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3013,6 +3296,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -3282,13 +3571,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.3.tgz",
-      "integrity": "sha512-e6j+QhQFOr5pfsc8VJbuTD9xTXJaRvMHYjEeLPA2pFkheNlgPLCkxdvhxhfuM4KGcqSZj2qEnpHisdTVs3BxuQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.7.tgz",
+      "integrity": "sha512-nU/TRGHHeG81NeLW5DeQT5t6BDUqbpsNQTvef1ld/tqHT+/zTx60/TIhKnmPISTTe++DVo+DLxDmk4rnwHaZVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "15.5.3",
+        "@next/eslint-plugin-next": "15.5.7",
         "@rushstack/eslint-patch": "^1.10.3",
         "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
@@ -3646,11 +3935,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -3720,6 +4017,18 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3797,6 +4106,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4150,6 +4476,21 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -4166,6 +4507,12 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.6.tgz",
+      "integrity": "sha512-fXHXcGFTXOvZTSkPJuGOQf5Lv5T/R2itiiCVPg9LxAje5D00O0pP83yJShFq5V89Ly//Gt6acj7z8pbBr34stw==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4202,11 +4549,11 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inputmask": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9.tgz",
-      "integrity": "sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ==",
-      "license": "MIT"
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
     },
     "node_modules/internal-slot": {
       "version": "1.1.0",
@@ -4584,6 +4931,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -4662,6 +5015,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -4679,9 +5041,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5064,6 +5426,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5136,6 +5517,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-engine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
+      "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==",
+      "license": "MIT"
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -5267,12 +5654,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.3.tgz",
-      "integrity": "sha512-r/liNAx16SQj4D+XH/oI1dlpv9tdKJ6cONYPwwcCC46f2NjpaRWY+EKCzULfgQYV6YKXjHBchff2IZBSlZmJNw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
+      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.3",
+        "@next/env": "15.5.7",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -5285,14 +5672,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.3",
-        "@next/swc-darwin-x64": "15.5.3",
-        "@next/swc-linux-arm64-gnu": "15.5.3",
-        "@next/swc-linux-arm64-musl": "15.5.3",
-        "@next/swc-linux-x64-gnu": "15.5.3",
-        "@next/swc-linux-x64-musl": "15.5.3",
-        "@next/swc-win32-arm64-msvc": "15.5.3",
-        "@next/swc-win32-x64-msvc": "15.5.3",
+        "@next/swc-darwin-arm64": "15.5.7",
+        "@next/swc-darwin-x64": "15.5.7",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
+        "@next/swc-linux-arm64-musl": "15.5.7",
+        "@next/swc-linux-x64-gnu": "15.5.7",
+        "@next/swc-linux-x64-musl": "15.5.7",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
+        "@next/swc-win32-x64-msvc": "15.5.7",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {
@@ -5346,6 +5733,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5536,6 +5932,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5566,6 +5968,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5659,6 +6067,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5669,6 +6083,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5702,6 +6132,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5732,6 +6171,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
+      "integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -5744,6 +6204,23 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.3.8",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
+      "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
@@ -5870,6 +6347,15 @@
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
       "license": "MIT"
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5909,6 +6395,12 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -5964,6 +6456,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6209,6 +6721,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6248,6 +6775,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6438,6 +6974,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/swr": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
@@ -6488,6 +7030,12 @@
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
       "license": "MIT"
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -6736,6 +7284,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -6816,6 +7390,26 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vite-compatible-readable-stream": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
+      "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6953,6 +7547,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
     "node_modules/yup": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
diff --git a/package.json b/package.json
index b371e4e7..52fc6ce2 100644
--- a/package.json
+++ b/package.json
@@ -7,19 +7,22 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
-    "prepare": "husky"
+    "prepare": "husky",
+    "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",
@@ -33,14 +36,14 @@
     "@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",
     "typescript": "^5"
   }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index c7bcb4b1..ba720fe5 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;
diff --git a/public/assets/img/mbu-logo.png b/public/assets/img/mbu-logo.png
new file mode 100644
index 00000000..0decc231
Binary files /dev/null and b/public/assets/img/mbu-logo.png differ
diff --git a/src/app/closing/detail/layout.tsx b/src/app/closing/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/closing/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;
diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
new file mode 100644
index 00000000..1b4ebc45
--- /dev/null
+++ b/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;
diff --git a/src/app/closing/page.tsx b/src/app/closing/page.tsx
new file mode 100644
index 00000000..acaa3ee8
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/add/page.tsx b/src/app/expense/add/page.tsx
new file mode 100644
index 00000000..afa40f48
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/detail/edit/page.tsx b/src/app/expense/detail/edit/page.tsx
new file mode 100644
index 00000000..e254f01d
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/detail/layout.tsx b/src/app/expense/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/expense/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;
diff --git a/src/app/expense/detail/page.tsx b/src/app/expense/detail/page.tsx
new file mode 100644
index 00000000..a0d90f70
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/page.tsx b/src/app/expense/page.tsx
new file mode 100644
index 00000000..d6b00286
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/realization/edit/page.tsx b/src/app/expense/realization/edit/page.tsx
new file mode 100644
index 00000000..95e27eef
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/realization/layout.tsx b/src/app/expense/realization/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/expense/realization/page.tsx b/src/app/expense/realization/page.tsx
new file mode 100644
index 00000000..027e8d65
--- /dev/null
+++ b/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;
diff --git a/src/app/globals.css b/src/app/globals.css
index 97be6978..10b48ad5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,30 +3,43 @@
 @import '../styles/daisyui.css';
 
 @plugin "daisyui/theme" {
-  name: "lti";
+  name: 'lti';
   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);
-  --color-base-300: oklch(92% 0.003 48.717);
-  --color-base-content: oklch(22.389% 0.031 278.072);
-  --color-primary: oklch(60% 0.126 221.723);
-  --color-primary-content: oklch(100% 0 0);
-  --color-secondary: oklch(52% 0.105 223.128);
-  --color-secondary-content: oklch(100% 0 0);
-  --color-accent: oklch(45% 0.085 224.283);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(39% 0.07 227.392);
-  --color-neutral-content: oklch(100% 0 0);
-  --color-info: oklch(58% 0.158 241.966);
-  --color-info-content: oklch(100% 0 0);
-  --color-success: oklch(62% 0.194 149.214);
-  --color-success-content: oklch(100% 0 0);
-  --color-warning: oklch(85% 0.199 91.936);
-  --color-warning-content: oklch(0% 0 0);
-  --color-error: oklch(57% 0.245 27.325);
-  --color-error-content: oklch(100% 0 0);
+  color-scheme: 'light';
+
+  /* Primary Colors */
+  --color-primary: oklch(39.4% 0.177 301.9);
+  --color-primary-content: oklch(87.5% 0.038 274.5);
+
+  /* Secondary Colors */
+  --color-secondary: oklch(60.1% 0.258 335.7);
+  --color-secondary-content: oklch(99.4% 0.007 337.8);
+
+  /* Accent Colors */
+  --color-accent: oklch(76.2% 0.155 170.8);
+  --color-accent-content: oklch(7.2% 0.007 167.6);
+
+  /* Neutral Colors */
+  --color-neutral: oklch(22.4% 0.032 258.8);
+  --color-neutral-content: oklch(87.7% 0.016 257);
+
+  /* Base Colors */
+  --color-base-100: oklch(100% 0 0); /* #ffffff */
+  --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
+  --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
+  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+
+  /* 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;
@@ -37,16 +50,25 @@
   --noise: 0;
 }
 
-
-
 :root {
   --color-primary: #1f74bf;
 }
 
 @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;
+}
diff --git a/src/app/inventory/adjustment/add/page.tsx b/src/app/inventory/adjustment/add/page.tsx
index 3bd64573..e20eedfc 100644
--- a/src/app/inventory/adjustment/add/page.tsx
+++ b/src/app/inventory/adjustment/add/page.tsx
@@ -1,11 +1,11 @@
-import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
 
 const CreateInventoryAdjustment = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <InventoryAdjustmentForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <InventoryAdjustmentForm />
     </section>
   );
-}
+};
 
-export default CreateInventoryAdjustment;
\ No newline at end of file
+export default CreateInventoryAdjustment;
diff --git a/src/app/inventory/adjustment/detail/layout.tsx b/src/app/inventory/adjustment/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/inventory/adjustment/detail/layout.tsx
+++ b/src/app/inventory/adjustment/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/inventory/adjustment/detail/page.tsx b/src/app/inventory/adjustment/detail/page.tsx
index 5e96c86a..eb13647d 100644
--- a/src/app/inventory/adjustment/detail/page.tsx
+++ b/src/app/inventory/adjustment/detail/page.tsx
@@ -7,12 +7,11 @@ import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 
 const DetailInventoryAdjustment = () => {
   const router = useRouter();
-  const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
+  const [inventoryAdjustment, setInventoryAdjustment] =
+    useState<InventoryAdjustment | null>(null);
 
   // Ambil data dari router state
   useEffect(() => {
-    console.log("Router State");
-    console.log(window.history.state);
     const state = window.history.state?.usr as
       | { inventoryAdjustment?: InventoryAdjustment }
       | undefined;
@@ -24,20 +23,17 @@ const DetailInventoryAdjustment = () => {
   }, [router]);
 
   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">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <InventoryAdjustmentForm initialValues={finalData} />
     </section>
   );
diff --git a/src/app/inventory/product/detail/layout.tsx b/src/app/inventory/product/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/inventory/product/detail/page.tsx b/src/app/inventory/product/detail/page.tsx
new file mode 100644
index 00000000..6daa7a86
--- /dev/null
+++ b/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;
diff --git a/src/app/inventory/product/page.tsx b/src/app/inventory/product/page.tsx
new file mode 100644
index 00000000..4815b8a1
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/add/delivery-orders/layout.tsx b/src/app/marketing/add/delivery-orders/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/add/delivery-orders/page.tsx b/src/app/marketing/add/delivery-orders/page.tsx
new file mode 100644
index 00000000..4d92acda
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/add/sales-orders/page.tsx b/src/app/marketing/add/sales-orders/page.tsx
new file mode 100644
index 00000000..9e33d304
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/delivery-orders/edit/layout.tsx b/src/app/marketing/detail/delivery-orders/edit/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/delivery-orders/edit/page.tsx b/src/app/marketing/detail/delivery-orders/edit/page.tsx
new file mode 100644
index 00000000..32625026
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/layout.tsx b/src/app/marketing/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/page.tsx b/src/app/marketing/detail/page.tsx
new file mode 100644
index 00000000..902251e8
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/sales-orders/edit/layout.tsx b/src/app/marketing/detail/sales-orders/edit/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/detail/sales-orders/edit/page.tsx b/src/app/marketing/detail/sales-orders/edit/page.tsx
new file mode 100644
index 00000000..19a098c5
--- /dev/null
+++ b/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;
diff --git a/src/app/marketing/page.tsx b/src/app/marketing/page.tsx
new file mode 100644
index 00000000..c30ee501
--- /dev/null
+++ b/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;
diff --git a/src/app/master-data/customer/add/page.tsx b/src/app/master-data/customer/add/page.tsx
index a1096f02..dd75c679 100644
--- a/src/app/master-data/customer/add/page.tsx
+++ b/src/app/master-data/customer/add/page.tsx
@@ -1,11 +1,11 @@
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const AddCustomer = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <CustomerForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <CustomerForm />
     </section>
   );
-}
+};
 
-export default AddCustomer;
\ No newline at end of file
+export default AddCustomer;
diff --git a/src/app/master-data/customer/detail/page.tsx b/src/app/master-data/customer/detail/page.tsx
index 263458c2..d778f83b 100644
--- a/src/app/master-data/customer/detail/page.tsx
+++ b/src/app/master-data/customer/detail/page.tsx
@@ -1,45 +1,47 @@
-'use client'
+'use client';
 
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 import { CustomerApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const CustomerDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const costumerId = searchParams.get("customerId");
+  const costumerId = searchParams.get('customerId');
 
   const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
     costumerId,
     (id: number) => CustomerApi.getSingle(id)
   );
 
-  if(!costumerId){
+  if (!costumerId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
-    router.replace("/404");
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingCostumer && isResponseSuccess(costumer) && (
-        <CustomerForm formType="detail" initialValues={costumer.data} />
+        <CustomerForm formType='detail' initialValues={costumer.data} />
       )}
     </div>
-  )
+  );
 };
 
 export default CustomerDetail;
diff --git a/src/app/master-data/customer/page.tsx b/src/app/master-data/customer/page.tsx
index b80401f1..8aec1088 100644
--- a/src/app/master-data/customer/page.tsx
+++ b/src/app/master-data/customer/page.tsx
@@ -1,11 +1,11 @@
-import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
+import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <CustomersTable />
     </section>
-  )
+  );
 };
 
-export default Customer;
\ No newline at end of file
+export default Customer;
diff --git a/src/app/master-data/flock/add/page.tsx b/src/app/master-data/flock/add/page.tsx
index 5ee3958e..d038d414 100644
--- a/src/app/master-data/flock/add/page.tsx
+++ b/src/app/master-data/flock/add/page.tsx
@@ -1,11 +1,11 @@
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
 
 const AddFlock = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <FlockForm />
     </section>
   );
-}
+};
 
 export default AddFlock;
diff --git a/src/app/master-data/flock/detail/edit/page.tsx b/src/app/master-data/flock/detail/edit/page.tsx
index c9651727..babc6653 100644
--- a/src/app/master-data/flock/detail/edit/page.tsx
+++ b/src/app/master-data/flock/detail/edit/page.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockEdit = () => {
   const router = useRouter();
@@ -44,6 +44,6 @@ const FlockEdit = () => {
       )}
     </div>
   );
-}
+};
 
-export default FlockEdit;
\ No newline at end of file
+export default FlockEdit;
diff --git a/src/app/master-data/flock/detail/layout.tsx b/src/app/master-data/flock/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/master-data/flock/detail/layout.tsx
+++ b/src/app/master-data/flock/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/master-data/flock/detail/page.tsx b/src/app/master-data/flock/detail/page.tsx
index 8a805911..e9620d33 100644
--- a/src/app/master-data/flock/detail/page.tsx
+++ b/src/app/master-data/flock/detail/page.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockDetail = () => {
   const router = useRouter();
@@ -14,33 +14,36 @@ const FlockDetail = () => {
   const flockId = searchParams.get('flockId');
 
   // Fetch Data
-  const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
 
-  if(!flockId){
+  if (!flockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingFlock && (!flock || isResponseError(flock))){
+  if (!isLoadingFlock && (!flock || isResponseError(flock))) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingFlock && (
-        <span className="loading loading-spinner loading-xl" />
+        <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingFlock && isResponseSuccess(flock) && (
-        <FlockForm formType="detail" initialValues={flock.data} />
+        <FlockForm formType='detail' initialValues={flock.data} />
       )}
     </div>
   );
-}
+};
 
-export default FlockDetail;
\ No newline at end of file
+export default FlockDetail;
diff --git a/src/app/master-data/flock/page.tsx b/src/app/master-data/flock/page.tsx
index b317091a..76cc32c1 100644
--- a/src/app/master-data/flock/page.tsx
+++ b/src/app/master-data/flock/page.tsx
@@ -1,11 +1,11 @@
-import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
   return (
-    <section className="w-full p-4">
-      <FlockTable/>
+    <section className='w-full p-4'>
+      <FlockTable />
     </section>
-  );   
-}
+  );
+};
 
 export default Flock;
diff --git a/src/app/master-data/product-category/add/page.tsx b/src/app/master-data/product-category/add/page.tsx
index 0993ba7a..2331159e 100644
--- a/src/app/master-data/product-category/add/page.tsx
+++ b/src/app/master-data/product-category/add/page.tsx
@@ -1,11 +1,11 @@
-import ProductCategoryForm from "@/components/pages/master-data/product-category/form/ProductCategoryForm";
+import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
 
 const AddProductCategory = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductCategoryForm />
     </div>
   );
 };
 
-export default AddProductCategory;
\ No newline at end of file
+export default AddProductCategory;
diff --git a/src/app/master-data/product-category/detail/edit/page.tsx b/src/app/master-data/product-category/detail/edit/page.tsx
index 6bc10644..4cb7eb5a 100644
--- a/src/app/master-data/product-category/detail/edit/page.tsx
+++ b/src/app/master-data/product-category/detail/edit/page.tsx
@@ -9,39 +9,44 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const ProductCategoryEdit = () => {
-    const router = useRouter();
-    const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
-    const productCategoryId = searchParams.get('productCategoryId');
+  const productCategoryId = searchParams.get('productCategoryId');
 
-    const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
-        productCategoryId,
-        (id: number) => ProductCategoryApi.getSingle(id)
-    );
+  const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
+    productCategoryId,
+    (id: number) => ProductCategoryApi.getSingle(id)
+  );
 
-    if (!productCategoryId) {
-        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 (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
-        router.replace('/404');
-        return;
-    }
+  if (!productCategoryId) {
+    router.back();
 
     return (
-        <div className='w-full p-4 flex flex-row justify-center'>
-        {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
-        {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-            <ProductCategoryForm type='edit' initialValues={productCategory.data} />
-        )}
-        </div>
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
     );
-}
+  }
 
-export default ProductCategoryEdit;
\ No newline at end of file
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+        <ProductCategoryForm type='edit' initialValues={productCategory.data} />
+      )}
+    </div>
+  );
+};
+
+export default ProductCategoryEdit;
diff --git a/src/app/master-data/product-category/detail/page.tsx b/src/app/master-data/product-category/detail/page.tsx
index cba06fdb..c1a21aaf 100644
--- a/src/app/master-data/product-category/detail/page.tsx
+++ b/src/app/master-data/product-category/detail/page.tsx
@@ -29,16 +29,24 @@ const ProductCategoryDetail = () => {
     );
   }
 
-  if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
     router.replace('/404');
     return;
   }
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-        <ProductCategoryForm type='detail' initialValues={productCategory.data} />
+        <ProductCategoryForm
+          type='detail'
+          initialValues={productCategory.data}
+        />
       )}
     </div>
   );
diff --git a/src/app/master-data/product-category/page.tsx b/src/app/master-data/product-category/page.tsx
index 5ec6d555..78a4fda3 100644
--- a/src/app/master-data/product-category/page.tsx
+++ b/src/app/master-data/product-category/page.tsx
@@ -1,11 +1,11 @@
-import ProductCategoryTable from "@/components/pages/master-data/product-category/ProductCategoryTable";
+import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <ProductCategoryTable />
     </section>
   );
 };
 
-export default ProductCategory;
\ No newline at end of file
+export default ProductCategory;
diff --git a/src/app/master-data/product/add/page.tsx b/src/app/master-data/product/add/page.tsx
index 7cc995b6..37f42691 100644
--- a/src/app/master-data/product/add/page.tsx
+++ b/src/app/master-data/product/add/page.tsx
@@ -2,10 +2,10 @@ import ProductForm from '@/components/pages/master-data/product/form/ProductForm
 
 const AddProduct = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductForm />
     </div>
   );
 };
 
-export default AddProduct;
\ No newline at end of file
+export default AddProduct;
diff --git a/src/app/master-data/product/detail/edit/page.tsx b/src/app/master-data/product/detail/edit/page.tsx
index 96cfdc42..8916a98e 100644
--- a/src/app/master-data/product/detail/edit/page.tsx
+++ b/src/app/master-data/product/detail/edit/page.tsx
@@ -13,9 +13,8 @@ const ProductEdit = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductEdit = () => {
   );
 };
 
-export default ProductEdit;
\ No newline at end of file
+export default ProductEdit;
diff --git a/src/app/master-data/product/detail/page.tsx b/src/app/master-data/product/detail/page.tsx
index 916a44d0..34743e1f 100644
--- a/src/app/master-data/product/detail/page.tsx
+++ b/src/app/master-data/product/detail/page.tsx
@@ -13,9 +13,8 @@ const ProductDetail = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductDetail = () => {
   );
 };
 
-export default ProductDetail;
\ No newline at end of file
+export default ProductDetail;
diff --git a/src/app/master-data/product/page.tsx b/src/app/master-data/product/page.tsx
index 6014aeb9..a385d411 100644
--- a/src/app/master-data/product/page.tsx
+++ b/src/app/master-data/product/page.tsx
@@ -1,11 +1,11 @@
-import ProductsTable from "@/components/pages/master-data/product/ProductTable";
+import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
   return (
-    <section className="w-full p-4">
-        <ProductsTable />
+    <section className='w-full p-4'>
+      <ProductsTable />
     </section>
   );
 };
 
-export default Product;
\ No newline at end of file
+export default Product;
diff --git a/src/app/master-data/supplier/add/page.tsx b/src/app/master-data/supplier/add/page.tsx
index 8a95c3c6..37df33b0 100644
--- a/src/app/master-data/supplier/add/page.tsx
+++ b/src/app/master-data/supplier/add/page.tsx
@@ -8,4 +8,4 @@ const AddSupplier = () => {
   );
 };
 
-export default AddSupplier;
\ No newline at end of file
+export default AddSupplier;
diff --git a/src/app/master-data/supplier/detail/page.tsx b/src/app/master-data/supplier/detail/page.tsx
index 433fa043..a34ad72e 100644
--- a/src/app/master-data/supplier/detail/page.tsx
+++ b/src/app/master-data/supplier/detail/page.tsx
@@ -46,4 +46,4 @@ const SupplierDetail = () => {
   );
 };
 
-export default SupplierDetail;
\ No newline at end of file
+export default SupplierDetail;
diff --git a/src/app/master-data/supplier/page.tsx b/src/app/master-data/supplier/page.tsx
index 1f54bd0d..8000be0a 100644
--- a/src/app/master-data/supplier/page.tsx
+++ b/src/app/master-data/supplier/page.tsx
@@ -1,4 +1,4 @@
-import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
   return (
diff --git a/src/app/page.tsx b/src/app/page.tsx
index db9638df..9cc0177d 100644
--- a/src/app/page.tsx
+++ b/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 (
-    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
-      <h1>LTI ERP</h1>
-    </main>
-  );
+  const router = useRouter();
+  const pathname = usePathname();
+
+  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...</>;
 }
diff --git a/src/app/production/chickin/add/layout.tsx b/src/app/production/chickin/add/layout.tsx
deleted file mode 100644
index b41c70f9..00000000
--- a/src/app/production/chickin/add/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
-
-const Layout = ({
-  children
-}: Readonly<{
-  children: React.ReactNode
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
-
-export default Layout;
\ No newline at end of file
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
deleted file mode 100644
index 3ef73396..00000000
--- a/src/app/production/chickin/add/page.tsx
+++ /dev/null
@@ -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;
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/chickin/detail/layout.tsx
deleted file mode 100644
index b41c70f9..00000000
--- a/src/app/production/chickin/detail/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
-
-const Layout = ({
-  children
-}: Readonly<{
-  children: React.ReactNode
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
-
-export default Layout;
\ No newline at end of file
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
deleted file mode 100644
index 96647c55..00000000
--- a/src/app/production/chickin/detail/page.tsx
+++ /dev/null
@@ -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;
diff --git a/src/app/production/chickin/page.tsx b/src/app/production/chickin/page.tsx
deleted file mode 100644
index ad662f65..00000000
--- a/src/app/production/chickin/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import ChickinTable from "@/components/pages/production/chickin/ChickinTable";
-
-const Chickin = () => {
-  return (
-    <section className="w-full p-4">
-      <ChickinTable/>
-    </section>
-  );
-}
-export default Chickin;
\ No newline at end of file
diff --git a/src/app/production/project-flock/add/page.tsx b/src/app/production/project-flock/add/page.tsx
index 60141d80..2eb2c090 100644
--- a/src/app/production/project-flock/add/page.tsx
+++ b/src/app/production/project-flock/add/page.tsx
@@ -1,13 +1,21 @@
-'use client'
+'use client';
 
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+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">
-      <ProjectFlockForm formType="add"/>
+    <section className='w-full flex flex-row justify-center'>
+      <ProjectFlockForm formType='add' />
     </section>
   );
-}
+};
 
-export default AddProjectFlock;
\ No newline at end of file
+export default AddProjectFlock;
diff --git a/src/app/production/project-flock/chickin/add/kandang/layout.tsx b/src/app/production/project-flock/chickin/add/kandang/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/production/project-flock/chickin/add/kandang/page.tsx b/src/app/production/project-flock/chickin/add/kandang/page.tsx
new file mode 100644
index 00000000..c3a93a80
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app/production/project-flock/chickin/add/layout.tsx b/src/app/production/project-flock/chickin/add/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/production/project-flock/chickin/add/page.tsx b/src/app/production/project-flock/chickin/add/page.tsx
new file mode 100644
index 00000000..831979cb
--- /dev/null
+++ b/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;
diff --git a/src/app/production/project-flock/chickin/page.tsx b/src/app/production/project-flock/chickin/page.tsx
new file mode 100644
index 00000000..d40c39a3
--- /dev/null
+++ b/src/app/production/project-flock/chickin/page.tsx
@@ -0,0 +1,10 @@
+import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
+
+const Chickin = () => {
+  return (
+    <section className='w-full'>
+      <ChickinTable />
+    </section>
+  );
+};
+export default Chickin;
diff --git a/src/app/production/project-flock/closing/layout.tsx b/src/app/production/project-flock/closing/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/production/project-flock/closing/page.tsx b/src/app/production/project-flock/closing/page.tsx
new file mode 100644
index 00000000..d10bdfa2
--- /dev/null
+++ b/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;
diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx
index 858d0ca8..e5f88f19 100644
--- a/src/app/production/project-flock/detail/edit/page.tsx
+++ b/src/app/production/project-flock/detail/edit/page.tsx
@@ -1,46 +1,51 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockEdit = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlocks,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  if(!projectFlockId){
+  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 className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
+    <div className='w-full flex flex-col justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockEdit;
\ No newline at end of file
+export default ProjectFlockEdit;
diff --git a/src/app/production/project-flock/detail/layout.tsx b/src/app/production/project-flock/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/production/project-flock/detail/layout.tsx
+++ b/src/app/production/project-flock/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index bea96b84..29a078dd 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/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,15 +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) && (
-        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
+      {isResponseSuccess(projectFlock) && (
+        <ProjectFlockDetail projectFlock={projectFlock.data} />
       )}
     </div>
   );
 };
 
-export default ProjectFlockDetail;
+export default ProjectFlockDetailPage;
+ProjectFlockDetail;
+ProjectFlockDetail;
diff --git a/src/app/production/project-flock/layout.tsx b/src/app/production/project-flock/layout.tsx
new file mode 100644
index 00000000..3e9a65b7
--- /dev/null
+++ b/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>}
+      />
+    </>
+  );
+}
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
index d264d9e4..e93c6bc4 100644
--- a/src/app/production/project-flock/page.tsx
+++ b/src/app/production/project-flock/page.tsx
@@ -1,11 +1,11 @@
-import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 
 const ProjectFlock = () => {
   return (
-    <section className="w-full p-4">
-      <ProjectFlockTable/>
+    <section className='size-full p-4'>
+      <ProjectFlockTable />
     </section>
   );
-}
+};
 
 export default ProjectFlock;
diff --git a/src/app/production/recording/add/layout.tsx b/src/app/production/recording/add/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/production/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
index de53a354..ad6c6a9a 100644
--- a/src/app/production/recording/detail/edit/page.tsx
+++ b/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) {
diff --git a/src/app/production/recording/detail/page.tsx b/src/app/production/recording/detail/page.tsx
index 77b82a68..194365a3 100644
--- a/src/app/production/recording/detail/page.tsx
+++ b/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) {
diff --git a/src/app/production/transfer-to-laying/add/page.tsx b/src/app/production/transfer-to-laying/add/page.tsx
new file mode 100644
index 00000000..6f29085f
--- /dev/null
+++ b/src/app/production/transfer-to-laying/add/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+const AddTransferToLaying = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <TransferToLayingForm />
+    </div>
+  );
+};
+
+export default AddTransferToLaying;
diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
new file mode 100644
index 00000000..d5498e08
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/edit/page.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const TransferToLayingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  if (
+    isResponseSuccess(transferToLaying) &&
+    transferToLaying.data.approval.step_number === 2
+  ) {
+    router.replace('/production/transfer-to-laying');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='edit'
+          initialValues={transferToLaying.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;
diff --git a/src/app/production/transfer-to-laying/detail/layout.tsx b/src/app/production/transfer-to-laying/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
new file mode 100644
index 00000000..9ff6ed5e
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const TransferToLayingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;
diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
new file mode 100644
index 00000000..84513542
--- /dev/null
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <TransferToLayingsTable />
+    </section>
+  );
+};
+
+export default TransferToLaying;
diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
new file mode 100644
index 00000000..7e1cb9e7
--- /dev/null
+++ b/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;
diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
new file mode 100644
index 00000000..f93d1618
--- /dev/null
+++ b/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;
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
new file mode 100644
index 00000000..df0de97b
--- /dev/null
+++ b/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;
diff --git a/src/app/purchase/layout.tsx b/src/app/purchase/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;
diff --git a/src/app/purchase/page.tsx b/src/app/purchase/page.tsx
new file mode 100644
index 00000000..dc25a99d
--- /dev/null
+++ b/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;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7cad5b58..2f209ece 100644
--- a/src/components/Button.tsx
+++ b/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;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 06438390..ff4c35f2 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,19 +1,25 @@
 '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'> {
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
   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;
@@ -22,6 +28,7 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNa
     subtitle?: string;
     actions?: string;
     footer?: string;
+    collapsible?: string;
   };
   variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
   size?: 'sm' | 'md' | 'lg';
@@ -32,29 +39,42 @@ 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';
 
     const variantClasses = {
-      'default': '',
-      'compact': 'card-compact',
-      'bordered': 'border border-base-300',
-      'shadow': 'shadow-xl',
+      default: '',
+      compact: 'card-compact',
+      bordered: 'border border-base-300',
+      shadow: 'shadow-xl',
       'image-full': 'card-side card-compact shadow-xl',
     };
 
     const sizeClasses = {
-      'sm': 'w-64',
-      'md': 'w-96',
-      'lg': 'w-[28rem]',
+      sm: 'w-64',
+      md: 'w-96',
+      lg: 'w-[28rem]',
     };
 
     return cn(
@@ -65,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 = () => {
@@ -84,9 +124,9 @@ const Card = ({
 
   const getTitleClasses = () => {
     const sizeClasses = {
-      'sm': 'text-lg',
-      'md': 'text-xl',
-      'lg': 'text-2xl',
+      sm: 'text-lg',
+      md: 'text-xl',
+      lg: 'text-2xl',
     };
 
     return cn('card-title font-bold', sizeClasses[size], className?.title);
@@ -104,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>
-          <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>}
+        {renderCardContent()}
       </div>
     );
   }
 
   return (
     <div className={getCardClasses()} {...props}>
-      {image && (
-        <figure>
-          <img
-            src={image}
-            alt={imageAlt || title || 'Card image'}
-            className={getImageClasses()}
-          />
-        </figure>
-      )}
-      <div className={getBodyClasses()}>
-        {title && <h2 className={getTitleClasses()}>{title}</h2>}
-        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
-        {children}
-        {actions && <div className={getActionsClasses()}>{actions}</div>}
-      </div>
-      {footer && <div className={getFooterClasses()}>{footer}</div>}
+      {renderCardContent()}
     </div>
   );
 };
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 8506f65c..50d68017 100644
--- a/src/components/Collapse.tsx
+++ b/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
   );
 
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index f0efb417..17b8a56f 100644
--- a/src/components/Drawer.tsx
+++ b/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', {
-        'lg:drawer-open': openOnLarge,
-      })}
+      className={cn(
+        '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>
diff --git a/src/components/FloatingActionsButton.tsx b/src/components/FloatingActionsButton.tsx
new file mode 100644
index 00000000..c9ca3454
--- /dev/null
+++ b/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;
diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index be87f069..3a09c0b1 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -1,163 +1,30 @@
 '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';
-
-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>
-  );
-};
+import { isPathActive } from '@/lib/helper';
 
 const MainDrawerContent = () => {
+  const pathname = usePathname();
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,9 +34,24 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
-      <MainDrawerMenu />
+      <SidebarMenu menu={MAIN_DRAWER_LINKS} activeLink={pathname} />
     </div>
   );
 };
@@ -194,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;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a84c1827..5a1dc806 100644
--- a/src/components/Modal.tsx
+++ b/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);
-
-    ref.current?.showModal();
-  }, []);
+  }, [isNestingModal]);
 
   const closeModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.close();
     setOpen(false);
-    ref.current?.close();
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
-      closeModal();
-    } else {
-      openModal();
-    }
+    open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  if (ref.current) {
-    ref.current.addEventListener('close', () => {
-      closeModal();
-    });
-  }
+  useEffect(() => {
+    const dialog = ref.current;
+    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 (
-    <dialog ref={ref} className={cn('modal', className?.modal)}>
-      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (closeOnBackdrop && e.target === ref.current) {
+      ref.current?.close();
+    }
+  };
 
-      {closeOnBackdrop && (
-        <form method='dialog' className='modal-backdrop'>
-          <button>close</button>
-        </form>
-      )}
+  return (
+    <dialog
+      ref={ref}
+      className={cn('modal', className?.modal)}
+      onClick={handleBackdropClick}
+    >
+      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
     </dialog>
   );
 };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f7cfbb6a..bee92a57 100644
--- a/src/components/Navbar.tsx
+++ b/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'>
-          <div
-            tabIndex={0}
-            role='button'
-            className='btn btn-ghost btn-circle avatar'
-          >
-            <div className='w-10 rounded-full border grid place-items-center'>
-              <Icon icon='uil:user' width={40} height={40} />
+        <Dropdown
+          position='bottom-end'
+          trigger={
+            <div className='btn btn-ghost btn-circle avatar'>
+              <div className='w-10 rounded-full border flex justify-center items-center'>
+                <Icon icon='uil:user' width={40} height={40} />
+              </div>
             </div>
-          </div>
-
-          <Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
-            <MenuItem title='Settings' href='#' />
-            <MenuItem title='Logout' href='#' />
+          }
+          contentClassName='w-52 mt-3'
+        >
+          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+            <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
-        </div>
+        </Dropdown>
       </div>
     </div>
   );
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 86d3a67a..43b26d90 100644
--- a/src/components/Pagination.tsx
+++ b/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
-    className={cn(
-      'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square',
-      'disabled:text-gray-700 disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-gray-50 disabled:active:translate-y-0'
-    )}
+  <Button
+    variant='ghost'
+    color='none'
     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='join w-full justify-between items-center gap-3'>
-        <button
-          disabled={currentPage === 1}
-          onClick={onPrevPage}
-          className={cn(
-            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-          )}
-        >
-          <Icon
-            icon='uil:arrow-left'
-            width={20}
-            height={20}
-            className='text-gray-400 group-disabled:text-gray-300'
-          />{' '}
-          Previous
-        </button>
+    <div className='@container'>
+      <div className='flex flex-row justify-center items-center'>
+        <div className='hidden @md:block'>
+          <DisplayedRowCountSelect />
+        </div>
 
-        {totalPages <= 7 && (
-          <div className='join-item join gap-0.5'>
-            {range(1, totalPages).map((pageNumber) => (
+        <div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
+          <div className='hidden @md:block'>
+            <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 && (
-          <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 && (
+          {totalPages > 7 && (
+            <>
               <PaginationButton
-                content={totalPages}
-                disabled={currentPage === totalPages}
-                onClick={() => pageChangeHandler(totalPages)}
+                content={1}
+                disabled={currentPage === 1}
+                onClick={() => pageChangeHandler(1)}
               />
-            )}
-          </div>
-        )}
 
-        <button
-          disabled={currentPage === totalPages}
-          onClick={onNextPage}
-          className={cn(
-            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+              {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}
+                  disabled={currentPage === totalPages}
+                  onClick={() => pageChangeHandler(totalPages)}
+                />
+              )}
+            </>
           )}
-        >
-          Next{' '}
-          <Icon
-            icon='uil:arrow-right'
-            width={20}
-            height={20}
-            className='text-gray-400 group-disabled:text-gray-300'
-          />
-        </button>
+
+          <div className='hidden @md:block'>
+            <NextPageButton />
+          </div>
+
+          <div className='hidden @md:block'>
+            <GoToLastPageButton />
+          </div>
+        </div>
+
+        <div className='hidden @md:block'>
+          <PageInfo />
+        </div>
       </div>
 
-      <div className='flex gap-2 mt-2 sm:hidden'>
-        <button
-          disabled={currentPage === 1}
-          onClick={onPrevPage}
-          className={cn(
-            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-          )}
-        >
-          <Icon
-            icon='uil:arrow-left'
-            width={20}
-            height={20}
-            className='text-gray-400 group-disabled:text-gray-300'
-          />{' '}
-          Previous
-        </button>
+      <div className='flex @md:hidden flex-col justify-center items-end gap-2'>
+        <div className='flex flex-row items-center gap-0.5'>
+          <GoToFirstPageButton />
+          <PrevPageButton />
+          <NextPageButton />
+          <GoToLastPageButton />
+        </div>
 
-        <button
-          disabled={currentPage === totalPages}
-          onClick={onNextPage}
-          className={cn(
-            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
-            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
-          )}
-        >
-          Next{' '}
-          <Icon
-            icon='uil:arrow-right'
-            width={20}
-            height={20}
-            className='text-gray-400 group-disabled:text-gray-300'
-          />
-        </button>
+        <div className='flex flex-row items-center gap-4'>
+          <DisplayedRowCountSelect />
+
+          <PageInfo />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index d3498e33..9feb33e2 100644
--- a/src/components/Table.tsx
+++ b/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 = {
-    containerClassName: '',
-    tableWrapperClassName: '',
-    tableClassName: '',
-    tableHeaderClassName: '',
-    headerRowClassName: '',
-    headerColumnClassName: '',
-    tableBodyClassName: '',
-    bodyRowClassName: '',
-    bodyColumnClassName: '',
-    paginationClassName: '',
-  },
+  className = TABLE_DEFAULT_STYLING,
   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={className.tableWrapperClassName}>
-        <table className={className.tableClassName}>
-          <thead className={className.tableHeaderClassName}>
+    <div className={tableClassNames.containerClassName}>
+      <div className={tableClassNames.tableWrapperClassName}>
+        <table className={tableClassNames.tableClassName}>
+          <thead className={tableClassNames.tableHeaderClassName}>
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className={className.headerRowClassName}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    colSpan={header.colSpan}
-                    onClick={header.column.getToggleSortingHandler()}
-                    className={cn(
-                      header.column.getCanSort()
-                        ? 'cursor-pointer select-none'
-                        : '',
-                      className.headerColumnClassName
-                    )}
-                  >
-                    <div className='flex items-center gap-1'>
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
+              <tr
+                key={headerGroup.id}
+                className={tableClassNames.headerRowClassName}
+              >
+                {headerGroup.headers.map((header) => {
+                  const columnRelativeDepth =
+                    header.depth - header.column.depth;
+                  if (
+                    !header.isPlaceholder &&
+                    columnRelativeDepth > 1 &&
+                    header.id === header.column.id
+                  ) {
+                    return null;
+                  }
+                  let rowSpan = 1;
+                  if (header.isPlaceholder) {
+                    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() && (
-                        <div className='flex items-center'>
-                          <Icon
-                            icon='lucide:arrow-up'
-                            width={12}
-                            height={12}
-                            className={cn(
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'asc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                          <Icon
-                            icon='lucide:arrow-down'
-                            width={12}
-                            height={12}
-                            className={cn(
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'desc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </th>
-                ))}
+                        {header.column.getCanSort() && (
+                          <div className='w-4 h-4 relative flex flex-col items-center'>
+                            <Icon
+                              icon='heroicons:chevron-up-16-solid'
+                              width={18}
+                              height={18}
+                              className={cn(
+                                'absolute -top-1',
+                                'transition-all ease-in-out duration-200',
+                                header.column.getIsSorted() === 'asc'
+                                  ? 'text-black'
+                                  : 'text-black/30'
+                              )}
+                            />
+                            <Icon
+                              icon='heroicons:chevron-down-16-solid'
+                              width={18}
+                              height={18}
+                              className={cn(
+                                'absolute -bottom-1.5',
+                                'transition-all ease-in-out duration-200',
+                                header.column.getIsSorted() === 'desc'
+                                  ? 'text-black'
+                                  : 'text-black/30'
+                              )}
+                            />
+                          </div>
+                        )}
+                      </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>
       )}
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 00000000..2ad2477d
--- /dev/null
+++ b/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;
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
new file mode 100644
index 00000000..4489231d
--- /dev/null
+++ b/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;
diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 1d9d86b4..65adf48c 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -1,197 +1,87 @@
 'use client';
 
 import { ReactNode, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import useSWRImmutable from 'swr/immutable';
+import useSWR from 'swr';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { GetMeResponse } from '@/types/api/api-general';
-
-// TODO: delete this later, DONT HARDCODE USER DATA
-const DUMMY_USER = {
-  id: 1,
-  email: 'admin@mbugroup.id',
-  npk: '0001',
-  name: 'Super Admin',
-  image: null,
-  created_at: '2025-09-30T03:24:20.899229Z',
-  updated_at: '2025-09-30T03:24:20.899229Z',
-  roles: [
-    {
-      id: 1,
-      key: 'mbu.super_admin',
-      name: 'MBU Administrator',
-      client: {
-        id: 1,
-        name: 'PT Mitra Berlian Unggas',
-        alias: 'MBU',
-      },
-      permissions: [
-        {
-          id: 1,
-          name: 'mbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 2,
-          name: 'mbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 3,
-          name: 'mbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-      ],
-    },
-    {
-      id: 2,
-      key: 'lti.super_admin',
-      name: 'LTI Administrator',
-      client: {
-        id: 2,
-        name: 'PT Lumbung Telur Indonesia',
-        alias: 'LTI',
-      },
-      permissions: [
-        {
-          id: 4,
-          name: 'lti:purchase:read',
-          action: 'read',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 5,
-          name: 'lti:purchase:create',
-          action: 'create',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 6,
-          name: 'lti:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-      ],
-    },
-    {
-      id: 3,
-      key: 'manbu.super_admin',
-      name: 'MANBU Administrator',
-      client: {
-        id: 3,
-        name: 'PT Mandiri Berlian Unggas',
-        alias: 'MANBU',
-      },
-      permissions: [
-        {
-          id: 7,
-          name: 'manbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 8,
-          name: 'manbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 9,
-          name: 'manbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-      ],
-    },
-  ],
-};
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
+import { AxiosError } from 'axios';
+import { redirectToSSO } from '@/lib/auth-helper';
 
 interface RequireAuthProps {
   children?: ReactNode;
 }
 
 const RequireAuth = ({ children }: RequireAuthProps) => {
-  const router = useRouter();
-  const { setUser, setIsLoadingUser } = useAuth();
+  const { user, setUser, setIsLoadingUser } = useAuth();
 
-  const { data: userResponse, isLoading: isLoadingUserResponse } =
-    useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
-      httpClientFetcher,
-      {
-        shouldRetryOnError: false,
-        revalidateOnFocus: false,
-        revalidateOnReconnect: false,
-        refreshInterval: 0,
-      }
-    );
-
-  useEffect(() => {
-    setIsLoadingUser(isLoadingUserResponse);
-  }, [isLoadingUserResponse, setIsLoadingUser]);
+  const {
+    data: userResponse,
+    isLoading: isLoadingUserResponse,
+    error: userErrorResponse,
+  } = useSWR<
+    GetMeResponse & { ok?: boolean },
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >('/sso/userinfo', httpClientFetcher, {
+    shouldRetryOnError: false,
+  });
 
   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
-  // if (isLoadingUserResponse && !userResponse) {
-  //   return (
-  //     <div className='w-full flex flex-row justify-center items-center p-4'>
-  //       <span className='loading loading-spinner loading-xl' />
-  //     </div>
-  //   );
-  // }
+  // Explicitly handle 401 redirect from the component level
+  useEffect(() => {
+    if (
+      isResponseError(userResponse) &&
+      userErrorResponse?.response?.status === 401
+    ) {
+      // 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;
\ No newline at end of file
+export default RequireAuth;
diff --git a/src/components/helper/drawer/DrawerHeader.tsx b/src/components/helper/drawer/DrawerHeader.tsx
new file mode 100644
index 00000000..f9d70a04
--- /dev/null
+++ b/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;
diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 92c2a92c..4968f93e 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/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
-            type='button'
-            color='error'
-            onClick={onDelete}
-            className='px-4'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={24}
-              height={24}
-              className='justify-start text-sm'
-            />
-            Delete
-          </Button>
+          {onDelete && (
+            <Button
+              type='button'
+              color='error'
+              onClick={onDelete}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              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' && (
diff --git a/src/components/helper/form/FormHeader.tsx b/src/components/helper/form/FormHeader.tsx
index ebc1d7ae..de7ec882 100644
--- a/src/components/helper/form/FormHeader.tsx
+++ b/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>
   );
diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index fb0c95c7..32f14f94 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/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,
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index be485b75..2d55fe6d 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -3,16 +3,21 @@
 import {
   ChangeEventHandler,
   FocusEventHandler,
-  ReactNode,
+  useEffect,
+  useState,
 } from 'react';
-
-import { cn } from '@/lib/helper';
+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;
@@ -28,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>;
 }
@@ -40,22 +45,148 @@ const DateInput = ({
   bottomLabel,
   name,
   value,
-  placeholder,
+  placeholder = 'dd/mm/yyyy',
   min,
   max,
   className,
-  isError,
-  isValid,
-  errorMessage,
-  startAdornment,
-  endAdornment,
+  isError: externalError,
+  isValid: externalValid,
+  errorMessage: externalErrorMessage,
   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(
@@ -68,68 +199,136 @@ const DateInput = ({
           htmlFor={name}
           className={cn(
             'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
+            { 'text-error': finalIsError },
             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-success!': isValid,
+            'border-error': finalIsError,
+            'border-success': externalValid && !finalIsError,
           },
           className?.inputWrapper
         )}
       >
-        {startAdornment && startAdornment}
-
         <input
-          type='date'
+          type='text'
           id={name}
           name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          min={min}
-          max={max}
+          placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
+          value={displayValue}
+          onBlur={handleBlur}
+          onClick={handleClick}
           disabled={disabled}
+          readOnly // ✅ tidak bisa diketik manual
           className={cn(
-            'grow bg-transparent cursor-pointer',
+            'grow bg-transparent cursor-pointer focus:outline-none',
             className?.input
           )}
-          readOnly={readOnly}
         />
 
-        {(isLoading || endAdornment) && (
+        {isLoading && (
           <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-            {endAdornment && endAdornment}
+            <span className='loading loading-spinner' />
           </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 && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      {finalIsError && finalErrorMessage && (
+        <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>
   );
 };
diff --git a/src/components/input/DebouncedTextArea.tsx b/src/components/input/DebouncedTextArea.tsx
new file mode 100644
index 00000000..3df2c032
--- /dev/null
+++ b/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;
diff --git a/src/components/input/DropFileInput.tsx b/src/components/input/DropFileInput.tsx
new file mode 100644
index 00000000..e146a994
--- /dev/null
+++ b/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;
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 86100e40..aee7cb78 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -69,10 +69,7 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn(
-          'grow file-input w-full h-12 rounded',
-          className?.input
-        )}
+        className={cn('grow file-input w-full h-12 rounded', className?.input)}
         readOnly={readOnly}
       />
 
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 89b02845..e6e0e773 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { ChangeEvent, ReactNode } from "react";
-import { NumericFormat, OnValueChange } from "react-number-format";
-import TextInput, { TextInputProps } from "@/components/input/TextInput";
+import { ChangeEvent, ReactNode } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
-interface NumberInputProps extends Omit<TextInputProps, "type"> {
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   thousandSeparator?: string;
   decimalSeparator?: string;
   decimalScale?: number;
@@ -17,8 +17,8 @@ interface NumberInputProps extends Omit<TextInputProps, "type"> {
 }
 
 const NumberInput = ({
-  thousandSeparator = ",",
-  decimalSeparator = ".",
+  thousandSeparator = ',',
+  decimalSeparator = '.',
   decimalScale = 5,
   allowNegative = true,
   onChange,
@@ -28,7 +28,7 @@ const NumberInput = ({
 }: NumberInputProps) => {
   const valueChangeHandler: OnValueChange = (
     numberFormatValues,
-    sourceInfo,
+    sourceInfo
   ) => {
     const newChangeEvent = sourceInfo.event as
       | ChangeEvent<HTMLInputElement>
@@ -49,8 +49,8 @@ const NumberInput = ({
       onValueChange={valueChangeHandler}
       decimalScale={decimalScale}
       allowNegative={allowNegative}
-      startAdornment={inputPrefix}
-      endAdornment={inputSuffix}
+      inputPrefix={inputPrefix}
+      inputSuffix={inputSuffix}
       {...restProps}
     />
   );
diff --git a/src/components/input/PatternInput.tsx b/src/components/input/PatternInput.tsx
new file mode 100644
index 00000000..9af1b68e
--- /dev/null
+++ b/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;
diff --git a/src/components/input/RadioInput.tsx b/src/components/input/RadioInput.tsx
index 71a731aa..e508e7ba 100644
--- a/src/components/input/RadioInput.tsx
+++ b/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 {
-  label?: string;
-  bottomLabel?: string;
+// DaisyUI Radio Colors
+export type RadioColor =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'error';
+
+// DaisyUI Radio Sizes
+export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+// Context untuk RadioGroup
+interface RadioGroupContextValue {
   name: string;
   value?: string;
-  options: RadioOption[];
-  variant?: string;
-  className?: {
-    wrapper?: string;
-    label?: string;
-    radioWrapper?: string;
-    radio?: string;
-  };
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  required?: boolean;
+  color?: RadioColor;
+  size?: RadioSize;
   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) => {
-  return (
-    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
-      {/* Label atas */}
-      {label && (
-        <label
-          className={cn(
-            'w-full text-sm font-normal leading-5',
-            { 'text-error': isError },
-            className?.label
-          )}
-        >
-          {label}
-          {required && (
-            <span className='text-error ml-1' title='required'>
-              *
-            </span>
-          )}
-        </label>
-      )}
+  children,
+}: RadioGroupProps) => {
+  const contextValue: RadioGroupContextValue = {
+    name,
+    value,
+    color,
+    size,
+    disabled,
+    onChange,
+    onBlur,
+  };
 
-      {/* Daftar opsi radio */}
-      <div
-        className={cn(
-          'flex flex-row flex-wrap gap-4 items-center',
-          className?.radioWrapper
-        )}
-      >
-        {options.map((option) => (
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+        {/* Label atas */}
+        {label && (
           <label
-            key={option.value}
             className={cn(
-              'flex flex-row items-center gap-2 cursor-pointer',
-              disabled && 'opacity-60 cursor-not-allowed'
+              'w-full text-sm font-normal leading-5',
+              { 'text-error': isError },
+              className?.label
             )}
           >
-            <input
-              type='radio'
-              name={name}
-              value={option.value}
-              checked={value === option.value}
-              onChange={onChange}
-              onBlur={onBlur}
-              disabled={disabled}
-              className={cn('radio', variant, className?.radio)}
-            />
-            <span className='text-sm'>{option.label}</span>
+            {label}
+            {required && (
+              <span className='text-error ml-1' title='required'>
+                *
+              </span>
+            )}
           </label>
-        ))}
+        )}
+
+        {/* Daftar opsi radio */}
+        <div
+          className={cn(
+            'flex flex-row flex-wrap gap-4 items-center',
+            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>
-
-      {/* 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>
   );
 };
 
-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>
+  );
+};
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 9b57cabc..d35e7589 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -7,11 +7,17 @@ import Select, {
   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 } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import useSWR from 'swr';
+import { httpClientFetcher } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -48,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> {
@@ -58,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,
@@ -82,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 };
-  }, [isAnimated]);
+    const customComponents = { ...base, IndicatorSeparator: () => null };
+
+    if (startAdornment) {
+      customComponents.Control = CustomControl;
+    }
+
+    return customComponents;
+  }, [isAnimated, startAdornment]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -134,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>
       )}
@@ -144,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}
@@ -158,17 +207,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         placeholder={placeholder}
         className={cn('w-full', className?.select)}
         classNames={{
-          control: ({ isFocused, isDisabled }) =>
-            cn(
-              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-              {
-                'border-red-500! ring-2 ring-red-200': isError,
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                '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'),
+          ...(!startAdornment && {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+                {
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  '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'),
+          }),
           placeholder: () =>
             cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
           singleValue: () =>
@@ -182,10 +233,10 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            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,
@@ -206,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 }),
@@ -222,4 +279,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T | string,
+  labelKey: keyof T | string,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey, params]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 0e7891f7..550dbc6b 100644
--- a/src/components/input/TextArea.tsx
+++ b/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,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 4ee1f558..5936c85a 100644
--- a/src/components/input/TextInput.tsx
+++ b/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
-        className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
-        )}
-      >
-        {startAdornment && startAdornment}
+      {inputPrefix || inputSuffix ? (
+        <div className='relative flex'>
+          {inputPrefix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+                {
+                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-50 border-gray-200': disabled,
+                }
+              )}
+            >
+              {inputPrefix}
+            </div>
+          )}
 
-        <input
-          type={type}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          className={cn('grow', className?.input)}
-          readOnly={readOnly}
-        />
+          <div
+            className={cn(
+              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+              {
+                'border-error': isError,
+                'border-success!': isValid,
+                'rounded-l-none!': inputPrefix,
+                'rounded-r-none!': inputSuffix,
+                'input-disabled': disabled,
+                'cursor-not-allowed': disabled,
+                'bg-gray-50': disabled,
+              },
+              className?.inputWrapper
+            )}
+          >
+            {startAdornment && startAdornment}
 
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
+            <input
+              type={type}
+              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>
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index b3981065..ae74717d 100644
--- a/src/components/menu/Menu.tsx
+++ b/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) => {
-  return (
-    <ul className={cn('menu w-full p-0 gap-0.5', className)}>{children}</ul>
-  );
+const Menu = ({
+  children,
+  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;
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index 5046f8ff..dce81dac 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -49,14 +49,18 @@ const MenuItem = ({
   );
 
   return (
-    <li onClick={onClick}>
+    <li>
       {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
+      {!href && (
+        <button className={menuItemBaseClassName} onClick={onClick}>
+          {menuItemContent}
+        </button>
+      )}
     </li>
   );
 };
diff --git a/src/components/modal/ConfirmationModal.tsx b/src/components/modal/ConfirmationModal.tsx
index 04c221e6..00b63c86 100644
--- a/src/components/modal/ConfirmationModal.tsx
+++ b/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}
-              isLoading={primaryButton?.isLoading}
-              disabled={primaryButton?.isLoading}
+              onClick={primaryButtonClickHandler}
+              isLoading={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              disabled={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
               className='grow'
             >
               {primaryButton?.text ?? 'Ya'}
diff --git a/src/components/modal/ConfirmationModalWithNotes.tsx b/src/components/modal/ConfirmationModalWithNotes.tsx
new file mode 100644
index 00000000..f3403abf
--- /dev/null
+++ b/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;
diff --git a/src/components/molecules/SidebarMenu.tsx b/src/components/molecules/SidebarMenu.tsx
new file mode 100644
index 00000000..6a217dcc
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 4022e254..6ae7c13a 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -3,11 +3,33 @@ import Steps from '@/components/steps/Steps';
 import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
-import { formatDate } from '@/lib/helper';
-import { ApprovalsLine } from '@/types/api/api-general';
+import { cn, formatDate } from '@/lib/helper';
+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;
+};
 
 interface ApprovalStepsProps {
-  approvals: ApprovalsLine;
+  approvals: {
+    name?: string;
+    status: ApprovalStepStatus;
+    logs?: ApprovalStepLog[];
+  }[];
 }
 
 const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
@@ -15,45 +37,104 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
     <Steps direction='vertical' className='w-full md:steps-horizontal'>
       {approvals.map((approval, idx) => {
         const stepItemColor =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'success'
-            : approval.status === 'rejected'
-            ? 'error'
-            : undefined;
+            : approval.status === 'REJECTED'
+              ? 'error'
+              : approval.status === 'WAITING'
+                ? 'warning'
+                : undefined;
 
         const stepItemIcon =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'material-symbols:check-rounded'
-            : approval.status === 'rejected'
-            ? 'material-symbols:close-rounded'
-            : 'bxs:hourglass';
+            : approval.status === 'REJECTED'
+              ? 'material-symbols:close-rounded'
+              : approval.status === 'WAITING'
+                ? 'pajamas:dash-circle'
+                : approval.logs && approval.logs.length > 0
+                  ? 'material-symbols:info-outline-rounded'
+                  : 'bxs:hourglass';
 
         return (
           <StepItem
             key={idx}
             color={stepItemColor}
             icon={
-              approval.status !== 'waiting' && (
-                <Tooltip
-                  color={stepItemColor}
-                  position='right'
-                  className={{
-                    wrapper: 'md:tooltip-bottom',
-                  }}
-                  content={
-                    <div className='flex flex-col text-base'>
-                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
-                      <span>Oleh: {approval.action_by}</span>
-                      <span>Catatan: {approval.notes}</span>
-                    </div>
-                  }
-                >
-                  <Icon icon={stepItemIcon} width={24} height={24} />
-                </Tooltip>
-              )
+              <Tooltip
+                color={stepItemColor}
+                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-0'>
+                        {approval.logs?.map((approvalLog, logIdx) => {
+                          const action =
+                            approvalLog.action === 'CREATED'
+                              ? 'Dibuat'
+                              : approvalLog.action === 'UPDATED'
+                                ? 'Diperbarui'
+                                : approvalLog.action === 'APPROVED'
+                                  ? 'Disetujui'
+                                  : approvalLog.action === 'REJECTED'
+                                    ? 'Ditolak'
+                                    : '-';
+
+                          return (
+                            <div
+                              key={logIdx}
+                              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>
+                    )}
+                  </>
+                }
+              >
+                <Icon
+                  icon={stepItemIcon}
+                  width={24}
+                  height={24}
+                  className={cn({
+                    invisible:
+                      approval.status === 'IDLE' &&
+                      (!approval.logs ||
+                        (approval.logs && approval.logs.length === 0)),
+                  })}
+                />
+              </Tooltip>
             }
           >
-            {approval.role}
+            {approval.name}
           </StepItem>
         );
       })}
@@ -61,4 +142,303 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
   );
 };
 
+export const formatGroupedApprovalsToApprovalSteps = (
+  approvalLine: ApprovalLine,
+  groupedApprovals: BaseGroupedApproval[] | undefined,
+  latestApproval: BaseApproval | undefined
+): ApprovalStepsProps['approvals'] => {
+  const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
+    approvalLine.map((approvalLineItem) => {
+      const approvalGroup = groupedApprovals?.find(
+        (approvalGroupItem) =>
+          approvalGroupItem.step_number === approvalLineItem.step_number
+      );
+
+      const currentStepNumber = approvalLineItem.step_number;
+      const lastStepNumber =
+        groupedApprovals?.[groupedApprovals.length - 1]?.step_number;
+
+      const isLatestApprovalRejected = latestApproval?.action === 'REJECTED';
+
+      // 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) {
+        // 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: isPreviousApprovalRejected
+            ? 'IDLE'
+            : isWaiting
+              ? 'WAITING'
+              : 'IDLE',
+        };
+      }
+
+      let approvalStatus: ApprovalStepStatus = 'IDLE';
+
+      // Only compare if latestApproval and its step_number exist
+      if (
+        latestApproval?.step_number !== undefined &&
+        approvalGroup.step_number <= latestApproval.step_number
+      ) {
+        if (approvalGroup.approvals) {
+          switch (approvalGroup?.approvals[0]?.action) {
+            case 'CREATED':
+            case 'UPDATED':
+            case 'APPROVED':
+              approvalStatus = 'APPROVED';
+              break;
+
+            case 'REJECTED':
+              approvalStatus = 'REJECTED';
+              break;
+
+            default:
+              approvalStatus = 'IDLE';
+              break;
+          }
+        }
+      } else if (
+        latestApproval?.step_number !== undefined &&
+        approvalGroup.step_number === latestApproval.step_number + 1 &&
+        !isLatestApprovalRejected
+      ) {
+        approvalStatus = 'WAITING';
+      } else {
+        approvalStatus = 'IDLE';
+      }
+
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
+        ? approvalGroup.approvals.map((approval) => ({
+            action_by: approval.action_by.name,
+            date: approval.action_at,
+            notes: approval.notes,
+            action: approval.action,
+          }))
+        : [];
+
+      return {
+        name: approvalGroup.step_name,
+        status: approvalStatus,
+        logs: approvalLogs,
+      };
+    });
+
+  return formattedApprovalSteps;
+};
+
 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 };
diff --git a/src/components/pages/closing/ClosingDetail.tsx b/src/components/pages/closing/ClosingDetail.tsx
new file mode 100644
index 00000000..fd88fa49
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingGeneralInformationTable.tsx b/src/components/pages/closing/ClosingGeneralInformationTable.tsx
new file mode 100644
index 00000000..af21497a
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx b/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx
new file mode 100644
index 00000000..53e45710
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx b/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx
new file mode 100644
index 00000000..5662cff1
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingOverheadTabContent.tsx b/src/components/pages/closing/ClosingOverheadTabContent.tsx
new file mode 100644
index 00000000..458cff0f
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingOverheadTable.tsx b/src/components/pages/closing/ClosingOverheadTable.tsx
new file mode 100644
index 00000000..3df0844d
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx b/src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx
new file mode 100644
index 00000000..15e43bbc
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingSapronakCalculationTable.tsx b/src/components/pages/closing/ClosingSapronakCalculationTable.tsx
new file mode 100644
index 00000000..445b7d8c
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingSapronakTabContent.tsx b/src/components/pages/closing/ClosingSapronakTabContent.tsx
new file mode 100644
index 00000000..41c7aa05
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/ClosingsTable.tsx b/src/components/pages/closing/ClosingsTable.tsx
new file mode 100644
index 00000000..91e78c8c
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/closing/sale/SalesReportTable.tsx b/src/components/pages/closing/sale/SalesReportTable.tsx
new file mode 100644
index 00000000..89cb6615
--- /dev/null
+++ b/src/components/pages/closing/sale/SalesReportTable.tsx
@@ -0,0 +1,285 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import Badge from '@/components/Badge';
+import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { BaseClosingSales, BaseSales } from '@/types/api/closing';
+import { Product } from '@/types/api/master-data/product';
+import { Customer } from '@/types/api/master-data/customer';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+interface SalesReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseClosingSales;
+}
+
+const SalesReportTable = ({
+  type = 'detail',
+  initialValues,
+}: SalesReportTableProps) => {
+  const salesData: BaseSales[] = useMemo(() => {
+    return initialValues?.sales || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    if (salesData.length === 0) {
+      return {
+        totalQuantity: 0,
+        totalWeight: 0,
+        avgWeight: 0,
+        avgPricePartner: 0,
+        totalPartner: 0,
+      };
+    }
+
+    const totalQuantity = salesData.reduce(
+      (sum, item) => sum + (item.qty || 0),
+      0
+    );
+    const totalWeight = salesData.reduce(
+      (sum, item) => sum + (item.weight || 0),
+      0
+    );
+    const avgWeight = totalQuantity > 0 ? totalWeight / totalQuantity : 0;
+
+    const validPriceItems = salesData.filter(
+      (item) => item.price != null && item.price > 0
+    );
+    const avgPricePartner =
+      validPriceItems.length > 0
+        ? validPriceItems.reduce((sum, item) => sum + item.price, 0) /
+          validPriceItems.length
+        : 0;
+
+    const totalPartner = salesData.reduce(
+      (sum, item) => sum + (item.total_price || 0),
+      0
+    );
+
+    return {
+      totalQuantity,
+      totalWeight,
+      avgWeight,
+      avgPricePartner,
+      totalPartner,
+    };
+  }, [salesData]);
+
+  const salesColumns: ColumnDef<BaseSales>[] = useMemo(
+    () => [
+      {
+        id: 'realization_date',
+        accessorKey: 'realization_date',
+        header: 'Tanggal Realisasi',
+        cell: (props) => {
+          const date = props.row.original.realization_date;
+          return date ? formatDate(date, 'DD MMM YYYY') : '-';
+        },
+        footer: () => (
+          <div className='font-semibold text-gray-900'>Total Penjualan</div>
+        ),
+      },
+      {
+        id: 'age',
+        accessorKey: 'age',
+        header: 'Umur',
+        cell: (props) => props.getValue() || '-',
+      },
+      {
+        id: 'do_number',
+        accessorKey: 'do_number',
+        header: 'No. DO',
+        cell: (props) => props.getValue() || '-',
+      },
+      {
+        id: 'product',
+        accessorKey: 'product',
+        header: 'Produk',
+        cell: (props) => {
+          const product = props.getValue() as Product;
+          return product?.name || '-';
+        },
+      },
+      {
+        id: 'customer',
+        accessorKey: 'customer',
+        header: 'Customer',
+        cell: (props) => {
+          const customer = props.getValue() as Customer;
+          return customer?.name || '-';
+        },
+      },
+      {
+        id: 'jumlah',
+        header: 'Jumlah',
+        columns: [
+          {
+            id: 'qty',
+            accessorKey: 'qty',
+            header: 'Kuantitas',
+            cell: (props) => {
+              const value = props.getValue() as number;
+              return <div className='text-left'>{formatNumber(value)}</div>;
+            },
+            footer: () => (
+              <div className='text-left font-semibold text-gray-900'>
+                {formatNumber(totals.totalQuantity)}
+              </div>
+            ),
+          },
+          {
+            id: 'weight',
+            accessorKey: 'weight',
+            header: 'Kg',
+            cell: (props) => {
+              const value = props.getValue() as number;
+              return <div className='text-left'>{formatNumber(value)}</div>;
+            },
+            footer: () => (
+              <div className='text-left font-semibold text-gray-900'>
+                {formatNumber(totals.totalWeight)}
+              </div>
+            ),
+          },
+        ],
+      },
+      {
+        id: 'avg_weight',
+        accessorKey: 'avg_weight',
+        header: 'AVG (Kg)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-left'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-left font-semibold text-gray-900'>
+            {formatNumber(totals.avgWeight)}
+          </div>
+        ),
+      },
+      {
+        id: 'price_partner',
+        accessorKey: 'price',
+        header: 'Harga Mitra (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(totals.avgPricePartner)}
+          </div>
+        ),
+      },
+      {
+        id: 'total_mitra',
+        accessorKey: 'total_price',
+        header: 'Total Mitra (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(totals.totalPartner)}
+          </div>
+        ),
+      },
+      {
+        id: 'price_act',
+        accessorKey: 'price',
+        header: 'Harga Act (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+      },
+      {
+        id: 'total_act',
+        accessorKey: 'total_price',
+        header: 'Total Act (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+      },
+      {
+        id: 'kandang',
+        accessorKey: 'kandang',
+        header: 'Kandang',
+        cell: (props) => {
+          const kandang = props.getValue() as Kandang;
+          return kandang?.name || '-';
+        },
+      },
+      {
+        id: 'payment_status',
+        accessorKey: 'payment_status',
+        header: 'Status Pembayaran',
+        cell: (props) => {
+          const status = props.getValue() as string;
+          const getStatusColor = (status: string) => {
+            if (!status) return 'neutral';
+            switch (status.toLowerCase()) {
+              case 'paid':
+                return 'success';
+              case 'tempo':
+                return 'warning';
+              default:
+                return 'neutral';
+            }
+          };
+
+          return (
+            <Badge variant='soft' size='sm' color={getStatusColor(status)}>
+              {status || '-'}
+            </Badge>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>Penjualan</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={salesData}
+              columns={salesColumns}
+              renderFooter={salesData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default SalesReportTable;
diff --git a/src/components/pages/expense/ExpenseDetail.tsx b/src/components/pages/expense/ExpenseDetail.tsx
new file mode 100644
index 00000000..859b19ce
--- /dev/null
+++ b/src/components/pages/expense/ExpenseDetail.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ExpenseRequestContent from '@/components/pages/expense/ExpenseRequestContent';
+import ExpenseRealizationContent from '@/components/pages/expense/ExpenseRealizationContent';
+
+import { Expense } from '@/types/api/expense';
+
+interface ExpenseDetailProps {
+  initialValues?: Expense;
+}
+
+const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
+  const [activeTab, setActiveTab] = useState<string>('request');
+
+  const expenseDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'request',
+        label: 'Pengajuan',
+        content: <ExpenseRequestContent initialValues={initialValues} />,
+      },
+    ];
+
+    if (
+      initialValues?.latest_approval &&
+      initialValues?.latest_approval.step_number >= 4 &&
+      initialValues.latest_approval.action !== 'REJECTED'
+    ) {
+      validTabs.push({
+        id: 'realization',
+        label: 'Realisasi',
+        content: <ExpenseRealizationContent initialValues={initialValues} />,
+      });
+    }
+
+    return validTabs;
+  }, [initialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-7xl pb-16'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/expense'
+            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 Biaya Operasional
+          </h1>
+        </header>
+
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={expenseDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'max-w-5xl mx-auto mt-4',
+          }}
+        />
+      </section>
+    </>
+  );
+};
+
+export default ExpenseDetail;
diff --git a/src/components/pages/expense/ExpenseRealizationContent.tsx b/src/components/pages/expense/ExpenseRealizationContent.tsx
new file mode 100644
index 00000000..2b5b0a0a
--- /dev/null
+++ b/src/components/pages/expense/ExpenseRealizationContent.tsx
@@ -0,0 +1,327 @@
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import DropFileInput from '@/components/input/DropFileInput';
+
+import { Expense } from '@/types/api/expense';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import {
+  UploadRequestDocumentsFormSchema,
+  UploadRequestDocumentsFormValues,
+} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+
+interface ExpenseRealizationContentProps {
+  initialValues?: Expense;
+}
+
+const ExpenseRealizationContent = ({
+  initialValues,
+}: ExpenseRealizationContentProps) => {
+  const formik = useFormik<UploadRequestDocumentsFormValues>({
+    initialValues: {
+      documents: [],
+    },
+    validationSchema: UploadRequestDocumentsFormSchema,
+    onSubmit: async (values) => {
+      const addRealizationDocumentsRes =
+        await ExpenseApi.uploadRealizationDocuments(
+          initialValues?.id as number,
+          values.documents
+        );
+
+      if (isResponseSuccess(addRealizationDocumentsRes)) {
+        toast.success(addRealizationDocumentsRes.message);
+        window.location.reload();
+      } else {
+        toast.error(String(addRealizationDocumentsRes?.message));
+      }
+    },
+  });
+
+  const realizationDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const realizationDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRealizationDocuments = formik.values.documents;
+
+    newRealizationDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRealizationDocuments);
+  };
+
+  return (
+    <div>
+      <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
+        <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
+          {/* TODO: apply RBAC */}
+          <Button
+            type='button'
+            color='warning'
+            href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
+            className='px-4 grow sm:grow-0'
+          >
+            <Icon icon='mdi:pencil-outline' width={24} height={24} />
+            Edit Realisasi
+          </Button>
+        </div>
+      </div>
+
+      <div className='overflow-x-auto w-full max-w-5xl mx-auto'>
+        <table className='table table-sm table-zebra'>
+          <tbody>
+            <tr>
+              <th>Tanggal Realisasi</th>
+              <th>:</th>
+              <td>
+                {initialValues?.realization_date
+                  ? formatDate(initialValues?.realization_date, 'DD MMMM YYYY')
+                  : '-'}
+              </td>
+            </tr>
+            <tr>
+              <th>Dokumen Realisasi</th>
+              <th>:</th>
+              <td>
+                <div>
+                  {!initialValues?.realization_docs ||
+                    (initialValues?.realization_docs &&
+                      initialValues?.realization_docs.length === 0 &&
+                      '-')}
+
+                  {initialValues?.realization_docs &&
+                    initialValues?.realization_docs.length > 0 && (
+                      <ul className='list-disc'>
+                        {initialValues?.realization_docs.map(
+                          (realizationDocument, realizationDocumentIdx) => (
+                            <li key={realizationDocumentIdx}>
+                              <Link
+                                href={realizationDocument.path}
+                                target='_blank'
+                                rel='noopener noreferrer'
+                                className='text-blue-500 underline'
+                              >
+                                {realizationDocument.path}{' '}
+                                <Icon
+                                  icon='cuida:open-in-new-tab-outline'
+                                  width={12}
+                                  height={12}
+                                  className='inline'
+                                />
+                              </Link>
+                            </li>
+                          )
+                        )}
+                      </ul>
+                    )}
+                </div>
+
+                <div className='flex flex-col gap-2'>
+                  <DropFileInput
+                    name='documents'
+                    values={formik.values.documents}
+                    onChange={realizationDocumentsChangeHandler}
+                    onDelete={realizationDocumentsDeleteHandler}
+                    accept={{
+                      ...ACCEPTED_FILE_TYPE.PDF,
+                      ...ACCEPTED_FILE_TYPE.IMAGE,
+                    }}
+                    maxFiles={10}
+                    className={{
+                      wrapper: 'mt-2',
+                      inputWrapper: 'flex items-center',
+                    }}
+                  />
+
+                  {formik.values.documents &&
+                    formik.values.documents.length > 0 && (
+                      <Button
+                        onClick={formik.submitForm}
+                        disabled={formik.isSubmitting}
+                        isLoading={formik.isSubmitting}
+                        className='w-fit self-end'
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />
+                        Tambah
+                      </Button>
+                    )}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <div className='flex flex-row gap-4'>
+          <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
+            <div className='w-full flex flex-col gap-2'>
+              <h3 className='text-sm'>Nominal Pengajuan</h3>
+
+              <span className='text-xl'>
+                {formatCurrency(initialValues?.total_pengajuan as number)}
+              </span>
+
+              <span className='text-sm'>
+                Terbayar{' '}
+                {formatCurrency(initialValues?.total_realisasi as number)}
+              </span>
+            </div>
+          </Card>
+
+          <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
+            <div className='w-full flex flex-col gap-2'>
+              <h3 className='text-sm'>Nominal Realisasi</h3>
+
+              <span className='text-xl'>
+                {formatCurrency(initialValues?.total_realisasi as number)}
+              </span>
+
+              <span className='text-sm'>
+                Selisih{' '}
+                {formatCurrency(
+                  (initialValues?.total_realisasi as number) -
+                    (initialValues?.total_pengajuan as number)
+                )}
+              </span>
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <h2 className='font-bold text-xl text-center'>
+          Rincian Pengajuan Biaya Operasional
+        </h2>
+
+        <div className='w-full mt-2 flex flex-col gap-4'>
+          {initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseGrandTotal = 0;
+
+            kandangExpense.pengajuans?.forEach(
+              (item) => (expenseGrandTotal += item.price)
+            );
+
+            return (
+              <div
+                key={kandangExpenseIdx}
+                className='overflow-x-auto w-full mx-auto'
+              >
+                <table className='table table-sm table-zebra'>
+                  <thead>
+                    <tr>
+                      <th
+                        colSpan={5}
+                        className='font-bold text-center text-base-content text-lg'
+                      >
+                        Biaya {kandangExpense.name}
+                      </th>
+                    </tr>
+                    <tr>
+                      <th>Nonstock</th>
+                      <th>Total Kuantitas</th>
+                      <th>Total Biaya</th>
+                      <th>Catatan</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {kandangExpense.pengajuans?.map(
+                      (pengajuanItem, pengajuanIdx) => (
+                        <tr key={pengajuanIdx}>
+                          <td>{pengajuanItem.nonstock.name}</td>
+                          <td>{pengajuanItem.qty}</td>
+                          <td>{formatCurrency(pengajuanItem.price)}</td>
+                          <td className='w-xs'>{pengajuanItem.note ?? '-'}</td>
+                        </tr>
+                      )
+                    )}
+                  </tbody>
+                  <tfoot>
+                    <tr className='border-y'>
+                      <th colSpan={2} className='text-right'>
+                        Total Biaya Keseluruhan:
+                      </th>
+                      <th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <h2 className='font-bold text-xl text-center'>
+          Rincian Realisasi Biaya Operasional
+        </h2>
+
+        <div className='w-full mt-2 flex flex-col gap-4'>
+          {initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseGrandTotal = 0;
+
+            kandangExpense.realisasi?.forEach(
+              (item) => (expenseGrandTotal += item.price)
+            );
+
+            return (
+              <div
+                key={kandangExpenseIdx}
+                className='overflow-x-auto w-full mx-auto'
+              >
+                <table className='table table-sm table-zebra'>
+                  <thead>
+                    <tr>
+                      <th
+                        colSpan={5}
+                        className='font-bold text-center text-base-content text-lg'
+                      >
+                        Biaya {kandangExpense.name}
+                      </th>
+                    </tr>
+                    <tr>
+                      <th>Nonstock</th>
+                      <th>Total Kuantitas</th>
+                      <th>Total Biaya</th>
+                      <th>Catatan</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {kandangExpense.realisasi?.map(
+                      (realisasiItem, realisasiIdx) => (
+                        <tr key={realisasiIdx}>
+                          <td>{realisasiItem.nonstock.name}</td>
+                          <td>{realisasiItem.qty}</td>
+                          <td>{formatCurrency(realisasiItem.price)}</td>
+                          <td className='w-xs'>{realisasiItem.note ?? '-'}</td>
+                        </tr>
+                      )
+                    )}
+                  </tbody>
+                  <tfoot>
+                    <tr className='border-y'>
+                      <th colSpan={2} className='text-right'>
+                        Total Biaya Keseluruhan:
+                      </th>
+                      <th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExpenseRealizationContent;
diff --git a/src/components/pages/expense/ExpenseRequestContent.tsx b/src/components/pages/expense/ExpenseRequestContent.tsx
new file mode 100644
index 00000000..0d7d959d
--- /dev/null
+++ b/src/components/pages/expense/ExpenseRequestContent.tsx
@@ -0,0 +1,656 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import useSWR from 'swr';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Link from 'next/link';
+import Button from '@/components/Button';
+import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
+import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
+import DropFileInput from '@/components/input/DropFileInput';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ExpensePDFPreviewButton from '@/components/pages/expense//pdf/ExpensePDFButton';
+
+import { Expense } from '@/types/api/expense';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import {
+  UploadRequestDocumentsFormSchema,
+  UploadRequestDocumentsFormValues,
+} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { EXPENSE_REQUEST_APPROVAL_LINE } from '@/config/approval-line';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+interface ExpenseRequestContentProps {
+  initialValues?: Expense;
+}
+
+const ExpenseRequestContent = ({
+  initialValues,
+}: ExpenseRequestContentProps) => {
+  const router = useRouter();
+
+  const { approvals: approvalHistory, isLoading: isLoadingApprovalHistory } =
+    useApprovalSteps({
+      latestApproval: initialValues?.latest_approval,
+      approvalLines: EXPENSE_REQUEST_APPROVAL_LINE,
+      moduleName: 'EXPENSES',
+      moduleId: initialValues?.id.toString() ?? '',
+      params: {
+        page: 1,
+        limit: 100,
+      },
+    });
+
+  const isLatestApprovalRejected =
+    initialValues?.latest_approval.action === 'REJECTED';
+
+  const isLatestApprovalRejectedOrDone =
+    isLatestApprovalRejected ||
+    initialValues?.latest_approval.step_number === 5;
+
+  const isCurrentApprovalOnManager =
+    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number === 1;
+
+  const isCurrentApprovalOnFinance =
+    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number === 2;
+
+  const isCurrentApprovalOnRealization =
+    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number === 4;
+
+  const showEditButton =
+    initialValues?.latest_approval.step_number !== 5 &&
+    (initialValues?.latest_approval.step_number === 1 ||
+      initialValues?.latest_approval.step_number === 2 ||
+      initialValues?.latest_approval.step_number === 3);
+
+  const showRejectButton =
+    !isLatestApprovalRejected &&
+    (initialValues?.latest_approval.step_number === 1 ||
+      initialValues?.latest_approval.step_number === 2);
+
+  const isExpenseCanBeRealized =
+    !isLatestApprovalRejected &&
+    initialValues?.latest_approval.step_number === 3;
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const completeModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isCompleteLoading, setIsCompleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const formik = useFormik<UploadRequestDocumentsFormValues>({
+    initialValues: {
+      documents: [],
+    },
+    validationSchema: UploadRequestDocumentsFormSchema,
+    onSubmit: async (values) => {
+      const addRequestDocumentsRes = await ExpenseApi.uploadRequestDocuments(
+        initialValues?.id as number,
+        values.documents
+      );
+
+      if (isResponseSuccess(addRequestDocumentsRes)) {
+        toast.success(addRequestDocumentsRes.message);
+        window.location.reload();
+      } else {
+        toast.error(String(addRequestDocumentsRes?.message));
+      }
+    },
+  });
+
+  const deleteExpenseClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const completeExpenseClickHandler = () => {
+    completeModal.openModal();
+  };
+
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    try {
+      await ExpenseApi.delete(initialValues?.id as number);
+
+      toast.success('Berhasil menghapus data biaya operasional!');
+      router.push('/expense');
+    } catch (error) {
+      toast.error('Gagal menghapus data biaya operasional!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+    }
+  };
+
+  const confirmationModalCompleteClickHandler = async () => {
+    setIsCompleteLoading(true);
+
+    const completeRes = await ExpenseApi.complete(initialValues?.id as number);
+
+    if (isResponseSuccess(completeRes)) {
+      toast.success(completeRes.message);
+      router.push('/expense');
+    } else {
+      toast.error(completeRes?.message as string);
+    }
+
+    completeModal.closeModal();
+    setIsCompleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    let approveResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isCurrentApprovalOnManager) {
+      approveResponse = await ExpenseApi.approveManager(
+        initialValues.id,
+        notes
+      );
+    }
+
+    if (isCurrentApprovalOnFinance) {
+      approveResponse = await ExpenseApi.approveFinance(
+        initialValues.id,
+        notes
+      );
+    }
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success(approveResponse?.message);
+      router.push('/expense');
+    } else {
+      approveModal.closeModal();
+
+      toast.error(approveResponse?.message as string);
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    let rejectResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isCurrentApprovalOnManager) {
+      rejectResponse = await ExpenseApi.rejectManager(initialValues.id, notes);
+    }
+
+    if (isCurrentApprovalOnFinance) {
+      rejectResponse = await ExpenseApi.rejectFinance(initialValues.id, notes);
+    }
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success(rejectResponse.message);
+      router.push('/expense');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(rejectResponse?.message as string);
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const requestDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const requestDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRequestDocuments = formik.values.documents;
+
+    newRequestDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRequestDocuments);
+  };
+
+  return (
+    <>
+      <div>
+        {initialValues && !isLoadingApprovalHistory && approvalHistory && (
+          <div className='w-full max-w-5xl my-4 mx-auto'>
+            <ApprovalSteps approvals={approvalHistory} />
+          </div>
+        )}
+
+        <div className='w-full mt-4 flex flex-col gap-4'>
+          {/* TODO: apply RBAC */}
+
+          <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
+            {isCurrentApprovalOnManager && (
+              <Button
+                variant='outline'
+                color='info'
+                onClick={approveClickHandler}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='lucide-lab:farm' width={24} height={24} />
+                Approve Manager
+              </Button>
+            )}
+
+            {isCurrentApprovalOnFinance && (
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='tdesign:money' width={24} height={24} />
+                Approve Finance
+              </Button>
+            )}
+
+            {isCurrentApprovalOnRealization && (
+              <Button
+                variant='outline'
+                color='success'
+                onClick={completeExpenseClickHandler}
+                className='w-full sm:w-fit'
+              >
+                <Icon
+                  icon='material-symbols:done-all-rounded'
+                  width={24}
+                  height={24}
+                />
+                Selesai
+              </Button>
+            )}
+
+            {showRejectButton && (
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                className='w-full:w-fit'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            )}
+
+            {isExpenseCanBeRealized && (
+              <Button
+                variant='outline'
+                color='info'
+                href={`/expense/realization/?expenseId=${initialValues?.id}`}
+                className='w-full sm:w-fit'
+              >
+                <Icon
+                  icon='material-symbols:money-bag-rounded'
+                  width={24}
+                  height={24}
+                />
+                Realisasi
+              </Button>
+            )}
+
+            <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
+              {showEditButton && (
+                <Button
+                  type='button'
+                  color='warning'
+                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                  className='px-4 grow sm:grow-0'
+                >
+                  <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                  Edit
+                </Button>
+              )}
+
+              <Button
+                type='button'
+                color='error'
+                onClick={deleteExpenseClickHandler}
+                className='px-4 grow sm:grow-0'
+              >
+                <Icon
+                  icon='material-symbols:delete-outline-rounded'
+                  width={24}
+                  height={24}
+                  className='justify-start text-sm'
+                />
+                Delete
+              </Button>
+            </div>
+          </div>
+
+          <div className='overflow-x-auto w-full max-w-5xl mx-auto'>
+            <table className='table table-sm table-zebra'>
+              <tbody>
+                <tr>
+                  <th>Nomor PO</th>
+                  <th>:</th>
+                  <td>
+                    {!initialValues?.po_number && '-'}
+                    {initialValues?.po_number && (
+                      <ExpensePDFPreviewButton expense={initialValues} />
+                    )}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Nomor Referensi</th>
+                  <th>:</th>
+                  <td>{initialValues?.reference_number}</td>
+                </tr>
+                <tr>
+                  <th>Kategori</th>
+                  <th>:</th>
+                  <td>
+                    {initialValues?.category === 'BOP'
+                      ? 'Biaya Operasional'
+                      : 'Non Biaya Operasional'}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Lokasi</th>
+                  <th>:</th>
+                  <td>{initialValues?.location.name}</td>
+                </tr>
+                <tr>
+                  <th>Kandang</th>
+                  <th>:</th>
+                  <td>
+                    {initialValues?.kandangs
+                      .map((item) => item.name)
+                      .join(', ')}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Vendor</th>
+                  <th>:</th>
+                  <td>{initialValues?.supplier.name}</td>
+                </tr>
+                <tr>
+                  <th>Tanggal Transaksi</th>
+                  <th>:</th>
+                  <td>
+                    {formatDate(
+                      initialValues?.transaction_date,
+                      'DD MMMM YYYY'
+                    )}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Tanggal Realisasi</th>
+                  <th>:</th>
+                  <td>
+                    {initialValues?.realization_date
+                      ? formatDate(
+                          initialValues?.realization_date,
+                          'DD MMMM YYYY'
+                        )
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Nama Pengaju</th>
+                  <th>:</th>
+                  <td>{initialValues?.created_user.name}</td>
+                </tr>
+                <tr>
+                  <th>Nominal Biaya</th>
+                  <th>:</th>
+                  <td>{formatCurrency(initialValues?.grand_total ?? 0)}</td>
+                </tr>
+                <tr>
+                  <th>Status Pencairan</th>
+                  <th>:</th>
+                  <td>
+                    <RealizationStatusBadge
+                      approval={initialValues?.latest_approval}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>Status Biaya</th>
+                  <th>:</th>
+                  <td>
+                    <ExpenseStatusBadge
+                      approval={initialValues?.latest_approval}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>Dokumen Pengajuan</th>
+                  <th>:</th>
+                  <td>
+                    <div>
+                      {!initialValues?.documents ||
+                        (initialValues?.documents &&
+                          initialValues?.documents.length === 0 &&
+                          '-')}
+
+                      {initialValues?.documents &&
+                        initialValues?.documents.length > 0 && (
+                          <ul className='list-disc'>
+                            {initialValues?.documents.map(
+                              (requestDocument, requestDocumentIdx) => (
+                                <li key={requestDocumentIdx}>
+                                  <Link
+                                    href={requestDocument.path}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    className='text-blue-500 underline'
+                                  >
+                                    {requestDocument.path}{' '}
+                                    <Icon
+                                      icon='cuida:open-in-new-tab-outline'
+                                      width={12}
+                                      height={12}
+                                      className='inline'
+                                    />
+                                  </Link>
+                                </li>
+                              )
+                            )}
+                          </ul>
+                        )}
+                    </div>
+
+                    <div className='flex flex-col gap-2'>
+                      <DropFileInput
+                        name='documents'
+                        values={formik.values.documents}
+                        onChange={requestDocumentsChangeHandler}
+                        onDelete={requestDocumentsDeleteHandler}
+                        accept={{
+                          ...ACCEPTED_FILE_TYPE.PDF,
+                          ...ACCEPTED_FILE_TYPE.IMAGE,
+                        }}
+                        maxFiles={10}
+                        className={{
+                          wrapper: 'mt-2',
+                          inputWrapper: 'flex items-center',
+                        }}
+                      />
+
+                      {formik.values.documents &&
+                        formik.values.documents.length > 0 && (
+                          <Button
+                            onClick={formik.submitForm}
+                            disabled={formik.isSubmitting}
+                            isLoading={formik.isSubmitting}
+                            className='w-fit self-end'
+                          >
+                            <Icon icon='ic:round-plus' width={24} height={24} />
+                            Tambah
+                          </Button>
+                        )}
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div className='w-full max-w-5xl mt-8 mx-auto'>
+          <h2 className='font-bold text-xl text-center'>
+            Rincian Pengajuan Biaya Operasional
+          </h2>
+
+          <div className='w-full mt-2 flex flex-col gap-4'>
+            {initialValues?.kandangs.map(
+              (kandangExpense, kandangExpenseIdx) => {
+                let expenseGrandTotal = 0;
+
+                kandangExpense.pengajuans?.forEach(
+                  (item) => (expenseGrandTotal += item.price)
+                );
+
+                return (
+                  <div
+                    key={kandangExpenseIdx}
+                    className='overflow-x-auto w-full mx-auto'
+                  >
+                    <table className='table table-sm table-zebra'>
+                      <thead>
+                        <tr>
+                          <th
+                            colSpan={5}
+                            className='font-bold text-center text-base-content text-lg'
+                          >
+                            Biaya {kandangExpense.name}
+                          </th>
+                        </tr>
+                        <tr>
+                          <th>Nonstock</th>
+                          <th>Total Kuantitas</th>
+                          <th>Harga Satuan</th>
+                          <th>Catatan</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {kandangExpense.pengajuans?.map(
+                          (pengajuanItem, pengajuanIdx) => (
+                            <tr key={pengajuanIdx}>
+                              <td>{pengajuanItem.nonstock.name}</td>
+                              <td>{pengajuanItem.qty}</td>
+                              <td>{formatCurrency(pengajuanItem.price)}</td>
+                              <td className='w-xs'>
+                                {pengajuanItem.note ?? '-'}
+                              </td>
+                            </tr>
+                          )
+                        )}
+                      </tbody>
+                      <tfoot>
+                        <tr className='border-y'>
+                          <th colSpan={2} className='text-right'>
+                            Total Biaya Keseluruhan:
+                          </th>
+                          <th colSpan={2}>
+                            {formatCurrency(expenseGrandTotal)}
+                          </th>
+                        </tr>
+                      </tfoot>
+                    </table>
+                  </div>
+                );
+              }
+            )}
+          </div>
+        </div>
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text='Apakah anda yakin ingin menghapus data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={completeModal.ref}
+        type='success'
+        text='Apakah anda yakin ingin menyelesaikan biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isCompleteLoading,
+          onClick: confirmationModalCompleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={approveModal.ref}
+        type='success'
+        text='Apakah anda yakin ingin approve data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type='error'
+        text='Apakah anda yakin ingin reject data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ExpenseRequestContent;
diff --git a/src/components/pages/expense/ExpenseStatusBadge.tsx b/src/components/pages/expense/ExpenseStatusBadge.tsx
new file mode 100644
index 00000000..3a84f6bc
--- /dev/null
+++ b/src/components/pages/expense/ExpenseStatusBadge.tsx
@@ -0,0 +1,57 @@
+import PillBadge from '@/components/PillBadge';
+
+import { BaseApproval } from '@/types/api/api-general';
+
+interface ExpenseStatusBadgeProps {
+  approval?: BaseApproval;
+}
+
+const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
+  const isLatestApprovalRejected = approval?.action === 'REJECTED';
+
+  const latestApprovalStepNumber = approval?.step_number;
+
+  let expenseStatusPillBadgeColor:
+    | 'yellow'
+    | 'green'
+    | 'gray'
+    | 'red'
+    | 'purple'
+    | 'blue' = 'gray';
+
+  switch (latestApprovalStepNumber) {
+    case 1:
+      expenseStatusPillBadgeColor = 'yellow';
+      break;
+
+    case 2:
+      expenseStatusPillBadgeColor = 'purple';
+      break;
+
+    case 3:
+      expenseStatusPillBadgeColor = 'blue';
+      break;
+
+    case 4:
+      expenseStatusPillBadgeColor = 'red';
+      break;
+
+    case 5:
+      expenseStatusPillBadgeColor = 'green';
+      break;
+  }
+
+  if (isLatestApprovalRejected) {
+    expenseStatusPillBadgeColor = 'red';
+  }
+
+  return (
+    <PillBadge
+      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
+      color={expenseStatusPillBadgeColor}
+      className='text-xs'
+    />
+  );
+};
+
+export default ExpenseStatusBadge;
diff --git a/src/components/pages/expense/ExpensesTable.tsx b/src/components/pages/expense/ExpensesTable.tsx
new file mode 100644
index 00000000..bbcb6c4e
--- /dev/null
+++ b/src/components/pages/expense/ExpensesTable.tsx
@@ -0,0 +1,773 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+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 RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
+import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import DateInput from '@/components/input/DateInput';
+
+import { Expense } from '@/types/api/expense';
+import { ExpenseApi } from '@/services/api/expense';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { LocationApi, SupplierApi } from '@/services/api/master-data';
+import { Location } from '@/types/api/master-data/location';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Expense, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  deleteClickHandler: () => void;
+}) => {
+  const showEditButton =
+    props.row.original.latest_approval.step_number !== 5 &&
+    (props.row.original.latest_approval.step_number === 1 ||
+      props.row.original.latest_approval.step_number === 2 ||
+      props.row.original.latest_approval.step_number === 3);
+
+  // TODO: apply RBAC
+  const showRealizationButton =
+    props.row.original.latest_approval.action !== 'REJECTED' &&
+    props.row.original.latest_approval.step_number === 3;
+
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <Button
+          href={`/expense/detail/?expenseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+
+        {showEditButton && (
+          <Button
+            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        )}
+
+        {showRealizationButton && (
+          <Button
+            href={`/expense/realization/?expenseId=${props.row.original.id}`}
+            variant='ghost'
+            color='info'
+            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+          >
+            <Icon
+              icon='material-symbols:money-bag-rounded'
+              width={16}
+              height={16}
+            />
+            Realisasi
+          </Button>
+        )}
+
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </div>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const ExpensesTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+      transactionDate: '',
+      realizationDate: '',
+      locationId: '',
+      vendorId: '',
+      userId: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      transactionDate: 'transaction_date',
+      realizationDate: 'realization_date',
+      locationId: 'location_id',
+      vendorId: 'vendor_id',
+      userId: 'user_id',
+    },
+  });
+
+  const {
+    data: expenses,
+    isLoading,
+    mutate: refreshExpenses,
+  } = useSWR(
+    `${ExpenseApi.basePath}${getTableFilterQueryString()}`,
+    ExpenseApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  const [selectedExpense, setSelectedExpense] = useState<Expense | undefined>(
+    undefined
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isCompleteLoading, setIsCompleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const isAllSelectedRowLatestApprovalOnManager = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnManager =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 1;
+
+      return isCurrentApprovalOnManager;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const isAllSelectedRowLatestApprovalOnFinance = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnFinance =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 2;
+
+      return isCurrentApprovalOnFinance;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const isAllSelectedRowLatestApprovalOnRealization = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnRealization =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 4;
+
+      return isCurrentApprovalOnRealization;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const expensesColumns: ColumnDef<Expense>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        const isCheckboxDisabled =
+          !row.getCanSelect() ||
+          row.original.latest_approval.action === 'REJECTED';
+
+        return (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={isCheckboxDisabled}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'transaction_date',
+      header: 'Tanggal Pengajuan',
+      cell: (props) =>
+        props.row.original.transaction_date
+          ? formatDate(props.row.original.transaction_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'realization_date',
+      header: 'Tanggal Realisasi',
+      cell: (props) =>
+        props.row.original.realization_date
+          ? formatDate(props.row.original.realization_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location?.name ?? '-',
+    },
+    {
+      accessorFn: (row) => row.created_user.name ?? '-',
+      header: 'Nama Pengaju',
+    },
+    {
+      accessorFn: (row) => row.supplier.name ?? '-',
+      header: 'Vendor',
+    },
+    {
+      accessorKey: 'grand_total',
+      header: 'Nominal',
+      cell: (props) =>
+        props.row.original.grand_total
+          ? formatCurrency(props.row.original.grand_total)
+          : '-',
+    },
+    {
+      header: 'Status Pencairan',
+      cell: (props) => (
+        <RealizationStatusBadge approval={props.row.original.latest_approval} />
+      ),
+    },
+    {
+      header: 'Status BOP',
+      cell: (props) => (
+        <ExpenseStatusBadge approval={props.row.original.latest_approval} />
+      ),
+    },
+    {
+      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;
+
+        const approveClickHandler = () => {
+          setSelectedExpense(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedExpense(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedExpense(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 3 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 3 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const tableEnableRowSelectionHandler: (row: Row<Expense>) => boolean = (
+    row
+  ) => {
+    return (
+      row.original.latest_approval.action !== 'REJECTED' &&
+      row.original.latest_approval.step_number !== 5
+    );
+  };
+
+  // const bulkApproveClickHandler = () => {
+  //   approveModal.openModal();
+  // };
+
+  // const bulkRejectClickHandler = () => {
+  //   rejectModal.openModal();
+  // };
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await ExpenseApi.delete(selectedExpense?.id as number);
+    refreshExpenses();
+
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus biaya operasional!');
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    let bulkApproveResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveManager(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnFinance) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveFinance(
+        selectedRowIds,
+        notes
+      );
+    }
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshExpenses();
+      approveModal.closeModal();
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data biaya operasional!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data biaya operasional!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    let bulkRejectResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectManager(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnFinance) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectFinance(
+        selectedRowIds,
+        notes
+      );
+    }
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshExpenses();
+      rejectModal.closeModal();
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data biaya operasional!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data biaya operasional!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  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 {
+    setInputValue: setVendorInputValue,
+    options: vendorOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const [selectedVendor, setSelectedVendor] = useState<OptionType | null>(null);
+
+  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedVendor(val as OptionType);
+    updateFilter('vendorId', val ? ((val as OptionType).value as string) : '');
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const transactionDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transactionDate', e.target.value);
+  };
+
+  const realizationDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('realizationDate', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  // 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-between items-end sm:items-center gap-4'>
+              <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+                <Button
+                  href='/expense/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+
+                {selectedRowIds.length > 0 && (
+                  <>
+                    <Button
+                      variant='outline'
+                      color='info'
+                      onClick={bulkApproveClickHandler}
+                      disabled={!isAllSelectedRowLatestApprovalOnManager}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon icon='lucide-lab:farm' width={24} height={24} />
+                      Approve Manager
+                    </Button>
+
+                    <Button
+                      variant='outline'
+                      color='success'
+                      onClick={bulkApproveClickHandler}
+                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon icon='tdesign:money' width={24} height={24} />
+                      Approve Finance
+                    </Button>
+
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={bulkRejectClickHandler}
+                      disabled={
+                        !isAllSelectedRowLatestApprovalOnManager &&
+                        !isAllSelectedRowLatestApprovalOnFinance
+                      }
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
+                  </>
+                )}
+              </div>
+
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Biaya Operasional'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+
+            <div className='grid grid-cols-12 justify-end gap-2'>
+              <DateInput
+                required
+                label='Tanggal Transaksi'
+                name='transaction_date'
+                placeholder='Masukkan tanggal transaksi'
+                value={tableFilterState.transactionDate}
+                onChange={transactionDateChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <DateInput
+                required
+                label='Tanggal Realisasi'
+                name='realization_date'
+                placeholder='Masukkan tanggal realisasi'
+                value={tableFilterState.realizationDate}
+                onChange={realizationDateChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Lokasi'
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Vendor'
+                options={vendorOptions}
+                isLoading={isLoadingVendorOptions}
+                value={selectedVendor}
+                onChange={vendorChangeHandler}
+                onInputChange={setVendorInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 max-w-28 justify-self-end',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <Table<Expense>
+          data={isResponseSuccess(expenses) ? expenses?.data : []}
+          columns={expensesColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(expenses) ? expenses?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(expenses) ? expenses?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={tableEnableRowSelectionHandler}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(expenses) && expenses?.data?.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',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text='Apakah anda yakin ingin menghapus data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={approveModal.ref}
+        type='success'
+        text='Apakah anda yakin ingin approve data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type='error'
+        text='Apakah anda yakin ingin reject data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ExpensesTable;
diff --git a/src/components/pages/expense/RealizationStatusBadge.tsx b/src/components/pages/expense/RealizationStatusBadge.tsx
new file mode 100644
index 00000000..e042c022
--- /dev/null
+++ b/src/components/pages/expense/RealizationStatusBadge.tsx
@@ -0,0 +1,39 @@
+import PillBadge from '@/components/PillBadge';
+
+import { BaseApproval } from '@/types/api/api-general';
+
+interface RealizationStatusBadgeProps {
+  approval?: BaseApproval;
+}
+
+const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
+  const isLatestApprovalRejected = approval?.action === 'REJECTED';
+
+  const isExpenseRealized = approval?.step_number && approval.step_number >= 4;
+
+  const realizationStatus = isExpenseRealized
+    ? 'Sudah Realisasi'
+    : 'Belum Realisasi';
+
+  let realizationStatusPillBadgeColor:
+    | 'yellow'
+    | 'green'
+    | 'gray'
+    | 'red'
+    | 'purple'
+    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+
+  if (isLatestApprovalRejected) {
+    realizationStatusPillBadgeColor = 'red';
+  }
+
+  return (
+    <PillBadge
+      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      color={realizationStatusPillBadgeColor}
+      className='text-xs'
+    />
+  );
+};
+
+export default RealizationStatusBadge;
diff --git a/src/components/pages/expense/form/ExpenseKandangsTable.tsx b/src/components/pages/expense/form/ExpenseKandangsTable.tsx
new file mode 100644
index 00000000..b3c9f46d
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseKandangsTable.tsx
@@ -0,0 +1,237 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Collapse from '@/components/Collapse';
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
+import { cn, convertRowSelectionArrToObj } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { KandangApi } from '@/services/api/master-data';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+interface ExpenseKandangsTableProps {
+  locationId?: number;
+  type: 'add' | 'edit' | 'detail';
+  selectedKandangs: {
+    id: number;
+    name: string;
+  }[];
+  onChange: (kandangs: { id: number; name: string }[]) => void;
+  className?: {
+    wrapper?: string;
+  };
+}
+
+const ExpenseKandangsTable = ({
+  type,
+  locationId,
+  selectedKandangs,
+  onChange,
+  className,
+}: ExpenseKandangsTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+      picSort: '',
+      locationId,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      picSort: 'sort_pic',
+      locationId: 'location_id',
+    },
+  });
+
+  const { data: kandangs, isLoading } = useSWR(
+    locationId ? `${KandangApi.basePath}${getTableFilterQueryString()}` : null,
+    KandangApi.getAllFetcher
+  );
+
+  const [open, setOpen] = useState(
+    isResponseSuccess(kandangs) ? kandangs.data.length > 0 : false
+  );
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
+    convertRowSelectionArrToObj(selectedKandangs.map((item) => item.id))
+  );
+
+  const kandangsColumns: ColumnDef<Kandang>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={table.getIsSomePageRowsSelected()}
+            onChange={table.getToggleAllPageRowsSelectedHandler()}
+            disabled={type === 'detail'}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect() || type === 'detail'}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+  ];
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  useEffect(() => {
+    if (locationId) updateFilter('locationId', locationId);
+  }, [locationId, updateFilter]);
+
+  useEffect(() => {
+    setOpen(isResponseSuccess(kandangs) ? kandangs.data.length > 0 : false);
+  }, [kandangs, isResponseSuccess]);
+
+  useEffect(() => {
+    if (Object.keys(rowSelection).length !== 0 && isResponseSuccess(kandangs)) {
+      const formattedSelectedKandangs = Object.keys(rowSelection).map(
+        (item) => {
+          const selectedKandang = kandangs.data.find(
+            (kandang) => kandang.id === parseInt(item)
+          );
+
+          return {
+            id: parseInt(item),
+            name: selectedKandang?.name ?? 'Kandang tidak ditemukan!',
+          };
+        }
+      );
+
+      onChange(formattedSelectedKandangs);
+    } else {
+      onChange([]);
+    }
+  }, [rowSelection]);
+
+  useEffect(() => {
+    if (
+      selectedKandangs.length === 0 &&
+      Object.keys(rowSelection).length !== 0
+    ) {
+      setRowSelection({});
+    }
+  }, [selectedKandangs]);
+
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const picSortFilter = sorting.find((sortItem) => sortItem.id === 'pic');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('picSort', picSortFilter);
+  }, [sorting, updateSortingFilter]);
+
+  return (
+    <Card
+      className={{
+        wrapper: className?.wrapper,
+        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'>Pilih Kandang</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!'
+      >
+        <Table<Kandang>
+          data={isResponseSuccess(kandangs) ? kandangs?.data : []}
+          columns={kandangsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(kandangs) && kandangs?.data?.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 first:flex first:flex-row first:justify-start',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 first:flex first:flex-row first:justify-start',
+            paginationClassName: cn({
+              hidden:
+                isResponseSuccess(kandangs) &&
+                kandangs?.meta?.total_pages === 1,
+            }),
+          }}
+        />
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ExpenseKandangsTable;
diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
new file mode 100644
index 00000000..77db761c
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
@@ -0,0 +1,181 @@
+import * as Yup from 'yup';
+import { Expense } from '@/types/api/expense';
+import { formatDate } from '@/lib/helper';
+
+type ExpenseRealizationFormSchemaType = {
+  category?: {
+    value: 'BOP' | 'NON-BOP';
+    label: 'BOP' | 'NON-BOP';
+  };
+  location?: {
+    value: number;
+    label: string;
+  };
+  realization_date?: string;
+  kandangs?: { id: number; name: string }[];
+  supplier?: {
+    value: number;
+    label: string;
+  };
+  existing_documents?: { name: string; url: string }[];
+  documents?: File[];
+  realizations: {
+    kandang_id: number;
+    cost_items: {
+      nonstock?: {
+        value: number;
+        label: string;
+      };
+      quantity?: number;
+      price?: number;
+      notes?: string;
+    }[];
+  }[];
+};
+
+export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFormSchemaType> =
+  Yup.object({
+    category: Yup.object({
+      value: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
+      label: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
+    }).required('Kategori wajib diisi!'),
+
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Lokasi wajib diisi!'),
+
+    realization_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          id: Yup.number().required('Kandang wajib dipilih!'),
+          name: Yup.string().required('Kandang wajib dipilih!'),
+        })
+      )
+      .min(1, 'Kandang wajib dipilih!')
+      .required('Kandang wajib dipilih!'),
+
+    supplier: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Vendor wajib diisi!'),
+
+    existing_documents: Yup.array().of(
+      Yup.object({
+        name: Yup.string().required(),
+        url: Yup.string().required(),
+      })
+    ),
+
+    documents: Yup.array().of(Yup.mixed<File>().required()).optional(),
+
+    realizations: Yup.array()
+      .of(
+        Yup.object({
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
+          cost_items: Yup.array()
+            .of(
+              Yup.object({
+                nonstock: Yup.object({
+                  value: Yup.number().min(1).required(),
+                  label: Yup.string().required(),
+                }).required('Nonstock wajib diisi!'),
+                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
+                notes: Yup.string(),
+              })
+            )
+            .min(1, 'Kandang harus memiliki setidaknya 1 biaya!')
+            .required('Biaya kandang wajib diisi!'),
+        })
+      )
+      .min(1, 'Biaya kandang wajib diisi!')
+      .required('Biaya kandang wajib diisi!'),
+  });
+
+export const UpdateExpenseRealizationFormSchema = ExpenseRealizationFormSchema;
+
+export const UploadRealizationDocumentsFormSchema = Yup.object({
+  realization_documents: Yup.array()
+    .of(Yup.mixed<File>().required())
+    .required(),
+});
+
+export type ExpenseRealizationFormValues = Yup.InferType<
+  typeof ExpenseRealizationFormSchema
+>;
+
+export type UploadRealizationDocumentsFormValues = Yup.InferType<
+  typeof UploadRealizationDocumentsFormSchema
+>;
+
+export const getExpenseRealizationFormInitialValues = (
+  initialValues?: Expense
+): ExpenseRealizationFormValues => {
+  return {
+    category: initialValues?.category
+      ? {
+          value: initialValues.category,
+          label: initialValues.category,
+        }
+      : undefined,
+    location: initialValues?.location
+      ? {
+          value: initialValues.location.id,
+          label: initialValues.location.name,
+        }
+      : undefined,
+    realization_date: initialValues?.realization_date
+      ? formatDate(initialValues?.realization_date, 'YYYY-MM-DD')
+      : undefined,
+    kandangs: initialValues?.kandangs.map((kandang) => ({
+      id: kandang.kandang_id,
+      name: kandang.name,
+    })),
+    supplier: initialValues?.supplier
+      ? {
+          value: initialValues.supplier.id,
+          label: initialValues.supplier.name,
+        }
+      : undefined,
+    existing_documents: initialValues?.realization_docs?.map((doc) => ({
+      name: doc.path,
+      url: doc.path,
+    })),
+    documents: [],
+    realizations: initialValues?.kandangs
+      ? initialValues.kandangs.map((kandangExpense) => {
+          const costItemsInitialValue = kandangExpense.realisasi
+            ? kandangExpense.realisasi.map((realisasiItem, realisasiIdx) => {
+                return {
+                  nonstock: {
+                    value: kandangExpense.pengajuans?.[realisasiIdx]
+                      .id as number,
+                    label: realisasiItem.nonstock.name,
+                  },
+                  quantity: realisasiItem.qty,
+                  price: realisasiItem.price,
+                  notes: realisasiItem.note,
+                };
+              })
+            : kandangExpense.pengajuans
+              ? kandangExpense.pengajuans.map((expenseItem) => ({
+                  nonstock: {
+                    value: expenseItem.id,
+                    label: expenseItem.nonstock.name,
+                  },
+                  quantity: expenseItem.qty,
+                  price: expenseItem.price,
+                  notes: expenseItem.note,
+                }))
+              : [];
+
+          return {
+            kandang_id: kandangExpense.kandang_id,
+            cost_items: costItemsInitialValue,
+          };
+        })
+      : [],
+  };
+};
diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.tsx b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
new file mode 100644
index 00000000..a7ebdbca
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
@@ -0,0 +1,405 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import DropFileInput from '@/components/input/DropFileInput';
+import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
+import ExpenseRealizationKandangDetailExpense from '@/components/pages/expense/form/ExpenseRealizationKandangDetailExpense';
+
+import {
+  CreateExpenseRealizationPayload,
+  Expense,
+  UpdateExpenseRealizationPayload,
+} from '@/types/api/expense';
+import {
+  ExpenseRealizationFormSchema,
+  ExpenseRealizationFormValues,
+  getExpenseRealizationFormInitialValues,
+  UpdateExpenseRealizationFormSchema,
+} from '@/components/pages/expense/form/ExpenseRealizationForm.schema';
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseError } from '@/lib/api-helper';
+import { LocationApi, SupplierApi } from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { cn } from '@/lib/helper';
+
+interface ExpenseRealizationFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Expense;
+}
+
+const ExpenseRealizationForm = ({
+  type = 'add',
+  initialValues,
+}: ExpenseRealizationFormProps) => {
+  const router = useRouter();
+
+  const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+
+  const createExpenseHandler = useCallback(
+    async (payload: CreateExpenseRealizationPayload) => {
+      const createExpenseRes = await ExpenseApi.createRealization(
+        initialValues?.id as number,
+        ExpenseApi.convertExpenseRealizationPayloadToFormData(payload)
+      );
+
+      if (isResponseError(createExpenseRes)) {
+        setExpenseFormErrorMessage(createExpenseRes.message);
+        return;
+      }
+
+      toast.success(createExpenseRes?.message as string);
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const updateExpenseHandler = useCallback(
+    async (expenseId: number, payload: UpdateExpenseRealizationPayload) => {
+      const updateExpenseRes = await ExpenseApi.updateRealization(
+        expenseId,
+        ExpenseApi.convertExpenseRealizationPayloadToFormData(payload)
+      );
+
+      if (updateExpenseRes?.status === 'error') {
+        setExpenseFormErrorMessage(updateExpenseRes.message);
+        return;
+      }
+
+      toast.success(updateExpenseRes?.message as string);
+      router.refresh();
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const formik = useFormik<ExpenseRealizationFormValues>({
+    initialValues: getExpenseRealizationFormInitialValues(initialValues),
+    validationSchema:
+      type === 'edit'
+        ? UpdateExpenseRealizationFormSchema
+        : ExpenseRealizationFormSchema,
+    onSubmit: async (values) => {
+      setExpenseFormErrorMessage('');
+
+      const realizations: CreateExpenseRealizationPayload['realizations'] = [];
+
+      values.realizations.forEach((realization) => {
+        realization.cost_items.forEach((costItem) => {
+          const realizationItem = {
+            expense_nonstock_id: costItem.nonstock?.value as number,
+            qty: parseFloat(String(costItem.quantity)) as number,
+            price: parseFloat(String(costItem.price)) as number,
+            notes: costItem.notes ?? '',
+          };
+
+          realizations.push(realizationItem);
+        });
+      });
+
+      const expensePayload: CreateExpenseRealizationPayload = {
+        realization_date: values.realization_date as string,
+        documents: values.documents as File[],
+        realizations,
+      };
+
+      switch (type) {
+        case 'add':
+          await createExpenseHandler(expensePayload);
+          break;
+
+        case 'edit':
+          await updateExpenseHandler(
+            initialValues?.id as number,
+            expensePayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setVendorInputValue,
+    options: vendorOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', val);
+
+    formik.setFieldValue('kandangs', []);
+    formik.setFieldValue('realizations', []);
+  };
+
+  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
+    formik.setFieldTouched('kandangs', true);
+    formik.setFieldValue('kandangs', kandangs);
+
+    const newRealizations = [...(formik.values.realizations ?? [])];
+
+    // add new realizations
+    kandangs.forEach((kandangItem) => {
+      const isKandangExistInRealization = newRealizations.find(
+        (realizationItem) => realizationItem.kandang_id === kandangItem.id
+      );
+
+      if (isKandangExistInRealization) return;
+
+      newRealizations.push({
+        kandang_id: kandangItem.id,
+        cost_items: [
+          {
+            nonstock: undefined,
+            quantity: undefined,
+            price: undefined,
+            notes: '',
+          },
+        ],
+      });
+    });
+
+    // prune realizations
+    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
+    const deletedRealizationsIdx: number[] = [];
+
+    newRealizations.forEach((realization, idx) => {
+      const isRealizationValid = kandangIds.has(realization.kandang_id);
+
+      if (!isRealizationValid) {
+        deletedRealizationsIdx.push(idx);
+      }
+    });
+
+    deletedRealizationsIdx.forEach((deletedRealizationIdx) => {
+      newRealizations.splice(deletedRealizationIdx, 1);
+    });
+
+    formik.setFieldValue('realizations', newRealizations);
+  };
+
+  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('vendor', true);
+    formik.setFieldValue('vendor', val);
+  };
+
+  const realizationDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const realizationDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRequestDocuments = formik.values.documents;
+
+    newRequestDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRequestDocuments);
+  };
+
+  useEffect(() => {
+    formikSetValues(getExpenseRealizationFormInitialValues(initialValues));
+  }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
+
+  return (
+    <section className='w-full max-w-5xl'>
+      <header className='flex flex-col gap-4'>
+        <Button
+          href='/expense'
+          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'>
+          Realisasi Biaya Operasional
+        </h1>
+      </header>
+
+      <form
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+        className='w-full mt-8 flex flex-col gap-6'
+      >
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Lokasi'
+            required
+            placeholder='Pilih Lokasi'
+            value={formik.values.location}
+            onChange={locationChangeHandler}
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
+            onInputChange={setLocationInputValue}
+            isDisabled
+            className={{ wrapper: 'col-span-12 sm:col-span-6' }}
+          />
+
+          <DateInput
+            name='realization_date'
+            label='Tanggal Realisasi'
+            required
+            value={formik.values.realization_date}
+            onChange={formik.handleChange}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6',
+            }}
+          />
+
+          <ExpenseKandangsTable
+            type='detail'
+            locationId={formik.values.location?.value}
+            selectedKandangs={formik.values.kandangs ?? []}
+            onChange={kandangsChangeHandler}
+            className={{
+              wrapper: 'w-full col-span-12',
+            }}
+          />
+
+          <SelectInput
+            label='Vendor'
+            required
+            placeholder='Pilih Vendor'
+            value={formik.values.supplier}
+            onChange={vendorChangeHandler}
+            options={vendorOptions}
+            isLoading={isLoadingVendorOptions}
+            onInputChange={setVendorInputValue}
+            isDisabled
+            className={{ wrapper: 'col-span-12' }}
+          />
+
+          <DropFileInput
+            label='Dokumen Realisasi'
+            name='documents'
+            values={formik.values.documents}
+            onChange={realizationDocumentsChangeHandler}
+            onDelete={realizationDocumentsDeleteHandler}
+            accept={{
+              ...ACCEPTED_FILE_TYPE.PDF,
+              ...ACCEPTED_FILE_TYPE.IMAGE,
+            }}
+            className={{
+              wrapper: 'col-span-12',
+              inputWrapper: 'h-12 flex items-center',
+            }}
+          />
+
+          {formik.values.existing_documents &&
+            formik.values.existing_documents.length > 0 && (
+              <div className='w-full col-span-12'>
+                <ul className='pl-4 list-disc'>
+                  {formik.values.existing_documents.map(
+                    (existingDocument, existingDocumentIdx) => (
+                      <li key={existingDocumentIdx}>
+                        <Link
+                          href={existingDocument.url}
+                          target='_blank'
+                          rel='noopener noreferrer'
+                          className='text-blue-500 underline'
+                        >
+                          {existingDocument.name}{' '}
+                          <Icon
+                            icon='cuida:open-in-new-tab-outline'
+                            width={12}
+                            height={12}
+                            className='inline'
+                          />
+                        </Link>
+                      </li>
+                    )
+                  )}
+                </ul>
+              </div>
+            )}
+
+          <ExpenseRealizationKandangDetailExpense
+            formik={formik}
+            className={{
+              wrapper: 'col-span-12',
+            }}
+          />
+        </div>
+
+        {expenseFormErrorMessage && (
+          <div role='alert' className='alert alert-error w-full'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{expenseFormErrorMessage}</span>
+          </div>
+        )}
+
+        <div className='flex flex-row justify-between gap-2 flex-wrap'>
+          {type !== 'add' && (
+            <div className='flex flex-row justify-start gap-2'>
+              {type !== 'edit' && (
+                <Button
+                  type='button'
+                  color='warning'
+                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:edit-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Edit
+                </Button>
+              )}
+            </div>
+          )}
+
+          {type !== 'detail' && (
+            <div
+              className={cn('flex flex-row justify-end gap-2', {
+                'w-full': type === 'add',
+              })}
+            >
+              <Button type='reset' color='warning' className='px-4'>
+                Reset
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+                className='px-4'
+              >
+                Submit
+              </Button>
+            </div>
+          )}
+        </div>
+      </form>
+    </section>
+  );
+};
+
+export default ExpenseRealizationForm;
diff --git a/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx b/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx
new file mode 100644
index 00000000..017a733e
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx
@@ -0,0 +1,224 @@
+'use client';
+
+import { FormikContextType } from 'formik';
+
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import TextInput from '@/components/input/TextInput';
+
+import { ExpenseRealizationFormValues } from '@/components/pages/expense/form/ExpenseRealizationForm.schema';
+import { cn } from '@/lib/helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+
+interface ExpenseRealizationKandangDetailExpenseProps {
+  type?: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<ExpenseRealizationFormValues>;
+  className?: {
+    wrapper?: string;
+  };
+}
+
+const ExpenseRealizationKandangDetailExpense: React.FC<
+  ExpenseRealizationKandangDetailExpenseProps
+> = ({ type, formik, className }) => {
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+
+  const nonstockChangeHandler = (
+    kandangExpenseIdx: number,
+    costItemIdx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      true
+    );
+    formik.setFieldValue(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      val
+    );
+  };
+
+  const isExpenseRepeaterInputError = (
+    column: 'nonstock' | 'quantity' | 'price' | 'notes',
+    kandangExpenseIdx: number,
+    expenseIdx: number
+  ) => {
+    return (
+      formik.touched.realizations?.[kandangExpenseIdx]?.cost_items?.[
+        expenseIdx
+      ]?.[column] &&
+      Boolean(
+        formik.errors.realizations?.[kandangExpenseIdx] instanceof Object &&
+          formik.errors.realizations?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ] instanceof Object &&
+          formik.errors.realizations?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ]?.[column]
+      )
+    );
+  };
+
+  return (
+    <Card
+      className={{
+        wrapper: cn('w-full', className?.wrapper),
+        body: 'p-4 shadow',
+      }}
+    >
+      <div className='mb-4 text-center'>
+        <h4 className='font-bold text-xl'>
+          Rincian Realisasi Biaya Operasional
+        </h4>
+      </div>
+
+      <div className='w-full flex flex-col gap-6'>
+        {formik.values.realizations.length === 0 && (
+          <div>
+            <p className='text-sm text-gray-400 text-center'>
+              Pilih kandang terlebih dahulu!
+            </p>
+          </div>
+        )}
+
+        {formik.values.realizations.map((kandangExpense, kandangExpenseIdx) => {
+          const kandangName = formik.values.kandangs?.find(
+            (kandang) => kandang.id === kandangExpense.kandang_id
+          );
+
+          return (
+            kandangName?.name && (
+              <div
+                key={`kandangExpense-${kandangExpenseIdx}`}
+                className='w-full flex flex-col gap-4'
+              >
+                <div>
+                  <h5 className='mb-2 text-lg font-bold text-center'>
+                    Biaya {kandangName?.name}
+                  </h5>
+
+                  <div className='overflow-x-auto'>
+                    <table className='table'>
+                      <thead>
+                        <tr>
+                          <th>Nonstock</th>
+                          <th>Total Kuantitas</th>
+                          <th>Harga Satuan</th>
+                          <th>Catatan</th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {kandangExpense.cost_items.map(
+                          (expenseItem, expenseIdx) => (
+                            <tr key={`expense-${expenseIdx}`}>
+                              <td className='p-2'>
+                                <SelectInput
+                                  placeholder='Pilih Nonstock'
+                                  value={expenseItem.nonstock}
+                                  onChange={(val) => {
+                                    nonstockChangeHandler(
+                                      kandangExpenseIdx,
+                                      expenseIdx,
+                                      val
+                                    );
+                                  }}
+                                  options={nonstockOptions}
+                                  isLoading={isLoadingNonstockOptions}
+                                  onInputChange={setNonstockInputValue}
+                                  className={{ wrapper: 'min-w-48' }}
+                                  isDisabled
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <NumberInput
+                                  required
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                  placeholder='Masukkan Total Kuantitas'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].quantity ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'quantity',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <NumberInput
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
+                                  placeholder='Masukkan Harga Satuan'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].price ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'price',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  inputPrefix={
+                                    <span className='text-gray-600 font-medium'>
+                                      Rp
+                                    </span>
+                                  }
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <TextInput
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                  placeholder='Tuliskan catatan'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].notes ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'notes',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+                            </tr>
+                          )
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            )
+          );
+        })}
+      </div>
+    </Card>
+  );
+};
+
+export default ExpenseRealizationKandangDetailExpense;
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
new file mode 100644
index 00000000..7758df83
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
@@ -0,0 +1,168 @@
+import * as Yup from 'yup';
+import { Expense } from '@/types/api/expense';
+import { formatDate } from '@/lib/helper';
+
+type ExpenseFormSchemaType = {
+  category?: {
+    value: 'BOP' | 'NON-BOP';
+    label: 'BOP' | 'NON-BOP';
+  };
+  location?: {
+    value: number;
+    label: string;
+  };
+  transaction_date?: string;
+  kandangs?: { id: number; name: string }[];
+  supplier?: {
+    value: number;
+    label: string;
+  };
+  existing_documents?: { id: number; name: string; url: string }[];
+  deleted_documents?: number[];
+  documents?: File[];
+  expense_nonstocks: {
+    kandang_id: number;
+    cost_items: {
+      nonstock?: {
+        value: number;
+        label: string;
+      };
+      quantity?: number;
+      price?: number;
+      notes?: string;
+    }[];
+  }[];
+};
+
+export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
+  Yup.object({
+    category: Yup.object({
+      value: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
+      label: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
+    }).required('Kategori wajib diisi!'),
+
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Lokasi wajib diisi!'),
+
+    transaction_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          id: Yup.number().required('Kandang wajib dipilih!'),
+          name: Yup.string().required('Kandang wajib dipilih!'),
+        })
+      )
+      .min(1, 'Kandang wajib dipilih!')
+      .required('Kandang wajib dipilih!'),
+
+    supplier: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Vendor wajib diisi!'),
+
+    existing_documents: Yup.array().of(
+      Yup.object({
+        id: Yup.number().required(),
+        name: Yup.string().required(),
+        url: Yup.string().required(),
+      })
+    ),
+
+    deleted_documents: Yup.array().of(Yup.number().required()).optional(),
+
+    documents: Yup.array().of(Yup.mixed<File>().required()).optional(),
+
+    expense_nonstocks: Yup.array()
+      .of(
+        Yup.object({
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
+          cost_items: Yup.array()
+            .of(
+              Yup.object({
+                nonstock: Yup.object({
+                  value: Yup.number().min(1).required(),
+                  label: Yup.string().required(),
+                }).required('Nonstock wajib diisi!'),
+                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
+                notes: Yup.string(),
+              })
+            )
+            .min(1, 'Kandang harus memiliki setidaknya 1 biaya!')
+            .required('Biaya kandang wajib diisi!'),
+        })
+      )
+      .min(1, 'Biaya kandang wajib diisi!')
+      .required('Biaya kandang wajib diisi!'),
+  });
+
+export const UpdateExpenseRequestFormSchema = ExpenseRequestFormSchema;
+
+export const UploadRequestDocumentsFormSchema = Yup.object({
+  documents: Yup.array().of(Yup.mixed<File>().required()).required(),
+});
+
+export type ExpenseRequestFormValues = Yup.InferType<
+  typeof ExpenseRequestFormSchema
+>;
+
+export type UploadRequestDocumentsFormValues = Yup.InferType<
+  typeof UploadRequestDocumentsFormSchema
+>;
+
+export const getExpenseFormInitialValues = (
+  initialValues?: Expense
+): ExpenseRequestFormValues => {
+  return {
+    category: initialValues?.category
+      ? {
+          value: initialValues.category,
+          label: initialValues.category,
+        }
+      : undefined,
+    location: initialValues?.location
+      ? {
+          value: initialValues.location.id,
+          label: initialValues.location.name,
+        }
+      : undefined,
+    transaction_date: initialValues?.transaction_date
+      ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
+      : undefined,
+    kandangs: initialValues?.kandangs.map((kandang) => ({
+      id: kandang.kandang_id,
+      name: kandang.name,
+    })),
+    supplier: initialValues?.supplier
+      ? {
+          value: initialValues.supplier.id,
+          label: initialValues.supplier.name,
+        }
+      : undefined,
+    existing_documents: initialValues?.documents?.map((doc) => ({
+      id: doc.id,
+      name: doc.path,
+      url: doc.path,
+    })),
+    deleted_documents: [],
+    documents: [],
+    expense_nonstocks: initialValues?.kandangs
+      ? initialValues.kandangs.map((kandangExpense) => ({
+          kandang_id: kandangExpense.kandang_id,
+          cost_items: kandangExpense.pengajuans
+            ? kandangExpense.pengajuans.map((expenseItem) => ({
+                nonstock: {
+                  value: expenseItem.nonstock.id,
+                  label: expenseItem.nonstock.name,
+                },
+                quantity: expenseItem.qty,
+                price: expenseItem.price,
+                notes: expenseItem.note,
+              }))
+            : [],
+        }))
+      : [],
+  };
+};
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.tsx b/src/components/pages/expense/form/ExpenseRequestForm.tsx
new file mode 100644
index 00000000..d52bde0d
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRequestForm.tsx
@@ -0,0 +1,585 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Link from 'next/link';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
+import DropFileInput from '@/components/input/DropFileInput';
+import ExpenseRequestKandangDetailExpense from '@/components/pages/expense/form/ExpenseRequestKandangDetailExpense';
+
+import {
+  ExpenseRequestFormSchema,
+  ExpenseRequestFormValues,
+  getExpenseFormInitialValues,
+  UpdateExpenseRequestFormSchema,
+} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  Expense,
+  CreateExpensePayload,
+  UpdateExpensePayload,
+} from '@/types/api/expense';
+import { ExpenseApi } from '@/services/api/expense';
+import { cn, sleep } from '@/lib/helper';
+import { LocationApi, SupplierApi } from '@/services/api/master-data';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { Supplier } from '@/types/api/master-data/supplier';
+
+interface ExpenseFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Expense;
+}
+
+const ExpenseRequestForm = ({
+  type = 'add',
+  initialValues,
+}: ExpenseFormProps) => {
+  const router = useRouter();
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+
+  const createExpenseHandler = useCallback(
+    async (payload: CreateExpensePayload) => {
+      const createExpenseRes = await ExpenseApi.create(
+        ExpenseApi.convertExpenseRequestPayloadToFormData(payload)
+      );
+
+      if (isResponseError(createExpenseRes)) {
+        setExpenseFormErrorMessage(createExpenseRes.message);
+        return;
+      }
+
+      toast.success(createExpenseRes?.message as string);
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const updateExpenseHandler = useCallback(
+    async (
+      expenseId: number,
+      payload: UpdateExpensePayload,
+      deletedDocumentIds: number[]
+    ) => {
+      const updateExpenseRes = await ExpenseApi.update(
+        expenseId,
+        ExpenseApi.convertExpenseRequestUpdatePayloadToFormData(payload),
+        deletedDocumentIds
+      );
+
+      if (updateExpenseRes?.status === 'error') {
+        setExpenseFormErrorMessage(updateExpenseRes.message);
+        return;
+      }
+
+      toast.success(updateExpenseRes?.message as string);
+      router.refresh();
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const formik = useFormik<ExpenseRequestFormValues>({
+    initialValues: getExpenseFormInitialValues(initialValues),
+    validationSchema:
+      type === 'edit'
+        ? UpdateExpenseRequestFormSchema
+        : ExpenseRequestFormSchema,
+    onSubmit: async (values) => {
+      setExpenseFormErrorMessage('');
+
+      const expensePayload: CreateExpensePayload = {
+        category: formik.values.category?.value as 'BOP' | 'NON-BOP',
+        transaction_date: values?.transaction_date as string,
+        supplier_id: values.supplier?.value as number,
+        documents: values.documents as File[],
+        expense_nonstocks: values.expense_nonstocks.map((expenseNonstock) => ({
+          kandang_id: expenseNonstock.kandang_id,
+          cost_items: expenseNonstock.cost_items.map((costItem) => ({
+            nonstock_id: costItem.nonstock?.value as number,
+            quantity: parseFloat(String(costItem.quantity)) as number,
+            price: parseFloat(String(costItem.price)) as number,
+            notes: costItem.notes ?? '',
+          })),
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createExpenseHandler(expensePayload);
+          break;
+
+        case 'edit':
+          const expenseUpdatePayload: UpdateExpensePayload = {
+            category: formik.values.category?.value as 'BOP' | 'NON-BOP',
+            transaction_date: values?.transaction_date as string,
+            supplier_id: values.supplier?.value as number,
+            documents: values.documents as File[],
+            expense_nonstocks: values.expense_nonstocks.map(
+              (expenseNonstock) => ({
+                kandang_id: expenseNonstock.kandang_id,
+                cost_items: expenseNonstock.cost_items.map((costItem) => ({
+                  nonstock_id: costItem.nonstock?.value as number,
+                  quantity: parseFloat(String(costItem.quantity)) as number,
+                  price: parseFloat(String(costItem.price)) as number,
+                  notes: costItem.notes ?? '',
+                })),
+              })
+            ),
+          };
+
+          await updateExpenseHandler(
+            initialValues?.id as number,
+            expenseUpdatePayload,
+            formik.values.deleted_documents ?? []
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setVendorInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('category', true);
+    formik.setFieldValue('category', val);
+  };
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', val);
+
+    formik.setFieldValue('kandangs', []);
+    formik.setFieldValue('expense_nonstocks', []);
+  };
+
+  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
+    formik.setFieldTouched('kandangs', true);
+    formik.setFieldValue('kandangs', kandangs);
+
+    const newExpenseNonstocks = [...(formik.values.expense_nonstocks ?? [])];
+
+    // add new expense_nonstocks
+    kandangs.forEach((kandangItem) => {
+      const isKandangExistInExpenseNonstocks = newExpenseNonstocks.find(
+        (expenseNonstockItem) =>
+          expenseNonstockItem.kandang_id === kandangItem.id
+      );
+
+      if (isKandangExistInExpenseNonstocks) return;
+
+      newExpenseNonstocks.push({
+        kandang_id: kandangItem.id,
+        cost_items: [
+          {
+            nonstock: undefined,
+            quantity: undefined,
+            price: undefined,
+            notes: '',
+          },
+        ],
+      });
+    });
+
+    // prune expense_nonstocks
+    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
+    const deletedExpenseNonstocksIdx: number[] = [];
+
+    newExpenseNonstocks.forEach((expenseNonstock, idx) => {
+      const isExpenseNonstockValid = kandangIds.has(expenseNonstock.kandang_id);
+
+      if (!isExpenseNonstockValid) {
+        deletedExpenseNonstocksIdx.push(idx);
+      }
+    });
+
+    deletedExpenseNonstocksIdx.forEach((deletedExpenseNonstockIdx) => {
+      newExpenseNonstocks.splice(deletedExpenseNonstockIdx, 1);
+    });
+
+    formik.setFieldValue('expense_nonstocks', newExpenseNonstocks);
+  };
+
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('supplier', true);
+    formik.setFieldValue('supplier', val);
+  };
+
+  const requestDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const requestDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRequestDocuments = formik.values.documents;
+
+    newRequestDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRequestDocuments);
+  };
+
+  const deleteDocumentClickHandler = (
+    deletedDocumentIdx: number,
+    deletedDocumentId: number
+  ) => {
+    const newDeletedDocumentIds = [...(formik.values.deleted_documents ?? [])];
+    const newExistingDocuments = [
+      ...(formik.values.existing_documents ?? []),
+    ].filter((_, idx) => idx !== deletedDocumentIdx);
+
+    newDeletedDocumentIds.push(deletedDocumentId);
+
+    formik.setFieldTouched('deleted_documents', true);
+    formik.setFieldValue('deleted_documents', newDeletedDocumentIds);
+
+    formik.setFieldTouched('existing_documents', true);
+    formik.setFieldValue('existing_documents', newExistingDocuments);
+  };
+
+  const deleteExpenseClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    await sleep(750);
+
+    rejectModal.closeModal();
+    toast.success('Berhasil melakukan reject biaya operasional!');
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    await sleep(750);
+
+    approveModal.closeModal();
+    toast.success('Berhasil melakukan approve biaya operasional!');
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    await ExpenseApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Expense!');
+    router.push('/expense');
+  };
+
+  useEffect(() => {
+    formikSetValues(getExpenseFormInitialValues(initialValues));
+  }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-5xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/expense'
+            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'>
+            {type === 'add' && 'Tambah Biaya Operasional'}
+            {type === 'edit' && 'Edit Biaya Operasional'}
+            {type === 'detail' && 'Detail Biaya Operasional'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='grid grid-cols-12 gap-4'>
+            <SelectInput
+              label='Kategori'
+              required
+              placeholder='Pilih Kategori'
+              value={formik.values.category}
+              onChange={categoryChangeHandler}
+              options={[
+                {
+                  value: 'BOP',
+                  label: 'BOP',
+                },
+                {
+                  value: 'NON-BOP',
+                  label: 'NON-BOP',
+                },
+              ]}
+              className={{ wrapper: 'col-span-12 sm:col-span-4' }}
+            />
+
+            <SelectInput
+              label='Lokasi'
+              required
+              placeholder='Pilih Lokasi'
+              value={formik.values.location}
+              onChange={locationChangeHandler}
+              options={locationOptions}
+              isLoading={isLoadingLocationOptions}
+              onInputChange={setLocationInputValue}
+              className={{ wrapper: 'col-span-12 sm:col-span-4' }}
+            />
+
+            <DateInput
+              name='transaction_date'
+              label='Tanggal Transaksi'
+              required
+              value={formik.values.transaction_date}
+              onChange={formik.handleChange}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-4',
+              }}
+            />
+
+            <ExpenseKandangsTable
+              type={type}
+              locationId={formik.values.location?.value}
+              selectedKandangs={formik.values.kandangs ?? []}
+              onChange={kandangsChangeHandler}
+              className={{
+                wrapper: 'w-full col-span-12',
+              }}
+            />
+
+            <SelectInput
+              label='Vendor'
+              required
+              placeholder='Pilih Vendor'
+              value={formik.values.supplier}
+              onChange={supplierChangeHandler}
+              options={supplierOptions}
+              isLoading={isLoadingVendorOptions}
+              onInputChange={setVendorInputValue}
+              className={{ wrapper: 'col-span-12' }}
+            />
+
+            <DropFileInput
+              label='Dokumen Pengajuan'
+              name='documents'
+              values={formik.values.documents}
+              onChange={requestDocumentsChangeHandler}
+              onDelete={requestDocumentsDeleteHandler}
+              accept={{
+                ...ACCEPTED_FILE_TYPE.PDF,
+                ...ACCEPTED_FILE_TYPE.IMAGE,
+              }}
+              className={{
+                wrapper: 'col-span-12',
+                inputWrapper: 'h-12 flex items-center',
+              }}
+            />
+
+            {formik.values.existing_documents &&
+              formik.values.existing_documents.length > 0 && (
+                <div className='w-full col-span-12'>
+                  <ul className='pl-4 list-disc'>
+                    {formik.values.existing_documents.map(
+                      (existingDocument, existingDocumentIdx) => (
+                        <li key={existingDocumentIdx}>
+                          <div className='w-full flex flex-wrap justify-between'>
+                            <Link
+                              href={existingDocument.url}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-blue-500 underline'
+                            >
+                              {existingDocument.name}{' '}
+                              <Icon
+                                icon='cuida:open-in-new-tab-outline'
+                                width={12}
+                                height={12}
+                                className='inline'
+                              />
+                            </Link>
+
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              color='error'
+                              onClick={() => {
+                                deleteDocumentClickHandler(
+                                  existingDocumentIdx,
+                                  existingDocument.id
+                                );
+                              }}
+                              className='p-1 rounded-full text-error focus-visible:text-error-content hover:text-error-content'
+                            >
+                              <Icon
+                                icon='fluent:delete-12-regular'
+                                width={20}
+                                height={20}
+                              />
+                            </Button>
+                          </div>
+                        </li>
+                      )
+                    )}
+                  </ul>
+                </div>
+              )}
+
+            <ExpenseRequestKandangDetailExpense
+              formik={formik}
+              className={{
+                wrapper: 'col-span-12',
+              }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteExpenseClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {expenseFormErrorMessage && (
+              <div role='alert' className='alert alert-error w-full'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{expenseFormErrorMessage}</span>
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data Expense ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModal
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default ExpenseRequestForm;
diff --git a/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
new file mode 100644
index 00000000..11f54585
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
@@ -0,0 +1,294 @@
+'use client';
+
+import { FormikContextType } from 'formik';
+
+import { Icon } from '@iconify/react';
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import TextInput from '@/components/input/TextInput';
+import Button from '@/components/Button';
+
+import { ExpenseRequestFormValues } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
+import { cn } from '@/lib/helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { removeArrayItemAndSync } from '@/lib/utils/formik';
+
+interface ExpenseRequestKandangDetailExpenseProps {
+  type?: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<ExpenseRequestFormValues>;
+  className?: {
+    wrapper?: string;
+  };
+}
+
+const ExpenseRequestKandangDetailExpense: React.FC<
+  ExpenseRequestKandangDetailExpenseProps
+> = ({ type, formik, className }) => {
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+
+  const nonstockChangeHandler = (
+    kandangExpenseIdx: number,
+    expenseIdx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched(
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
+      true
+    );
+    formik.setFieldValue(
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
+      val
+    );
+  };
+
+  const addExpenseItemHandler = (kandangExpenseIdx: number) => {
+    const newExpensesValue = [
+      ...formik.values.expense_nonstocks[kandangExpenseIdx].cost_items,
+      {
+        nonstock: undefined,
+        price: undefined,
+        quantity: undefined,
+        notes: '',
+      },
+    ];
+
+    formik.setFieldValue(
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items`,
+      newExpensesValue
+    );
+  };
+
+  const deleteExpenseItemHandler = (
+    kandangExpenseIdx: number,
+    expenseIdx: number
+  ) => {
+    const path = `expense_nonstocks[${kandangExpenseIdx}].cost_items`;
+
+    // trims values, errors, and touched at expenseIdx
+    removeArrayItemAndSync(formik, path, expenseIdx);
+  };
+
+  const isExpenseRepeaterInputError = (
+    column: 'nonstock' | 'quantity' | 'price' | 'notes',
+    kandangExpenseIdx: number,
+    expenseIdx: number
+  ) => {
+    return (
+      formik.touched.expense_nonstocks?.[kandangExpenseIdx]?.cost_items?.[
+        expenseIdx
+      ]?.[column] &&
+      Boolean(
+        formik.errors.expense_nonstocks?.[kandangExpenseIdx] instanceof
+          Object &&
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ] instanceof Object &&
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ]?.[column]
+      )
+    );
+  };
+
+  return (
+    <Card
+      className={{
+        wrapper: cn('w-full', className?.wrapper),
+        body: 'p-4 shadow',
+      }}
+    >
+      <div className='mb-4 text-center'>
+        <h4 className='font-bold text-xl'>
+          Rincian Pengajuan Biaya Operasional
+        </h4>
+      </div>
+
+      <div className='w-full flex flex-col gap-6'>
+        {(formik.values.expense_nonstocks.length === 0 ||
+          !formik.values.supplier?.value) && (
+          <div>
+            <p className='text-sm text-gray-400 text-center'>
+              Pilih kandang terlebih dahulu!
+            </p>
+          </div>
+        )}
+
+        {formik.values.expense_nonstocks.length > 0 &&
+          formik.values.supplier?.value &&
+          formik.values.expense_nonstocks.map(
+            (kandangExpense, kandangExpenseIdx) => {
+              const kandangName = formik.values.kandangs?.find(
+                (kandang) => kandang.id === kandangExpense.kandang_id
+              );
+
+              return (
+                kandangName?.name && (
+                  <div
+                    key={`kandangExpense-${kandangExpenseIdx}`}
+                    className='w-full flex flex-col gap-4'
+                  >
+                    <div>
+                      <h5 className='mb-2 text-lg font-bold text-center'>
+                        Biaya {kandangName?.name}
+                      </h5>
+
+                      <div className='overflow-x-auto'>
+                        <table className='table'>
+                          <thead>
+                            <tr>
+                              <th>Nonstock</th>
+                              <th>Total Kuantitas</th>
+                              <th>Harga Satuan</th>
+                              <th>Catatan</th>
+                              {type !== 'detail' && <th>Aksi</th>}
+                            </tr>
+                          </thead>
+
+                          <tbody>
+                            {kandangExpense.cost_items.map(
+                              (expenseItem, expenseIdx) => (
+                                <tr key={`expense-${expenseIdx}`}>
+                                  <td className='p-2'>
+                                    <SelectInput
+                                      placeholder='Pilih Nonstock'
+                                      value={expenseItem.nonstock}
+                                      onChange={(val) => {
+                                        nonstockChangeHandler(
+                                          kandangExpenseIdx,
+                                          expenseIdx,
+                                          val
+                                        );
+                                      }}
+                                      options={nonstockOptions}
+                                      isLoading={isLoadingNonstockOptions}
+                                      onInputChange={setNonstockInputValue}
+                                      className={{ wrapper: 'min-w-48' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      required
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                      placeholder='Masukkan Total Kuantitas'
+                                      value={
+                                        formik.values.expense_nonstocks[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].quantity ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'quantity',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
+                                      placeholder='Masukkan Harga Satuan'
+                                      value={
+                                        formik.values.expense_nonstocks[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].price ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'price',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      inputPrefix={
+                                        <span className='text-gray-600 font-medium'>
+                                          Rp
+                                        </span>
+                                      }
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <TextInput
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                      placeholder='Tuliskan catatan'
+                                      value={
+                                        formik.values.expense_nonstocks[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].notes ?? ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'notes',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  {type !== 'detail' && (
+                                    <td>
+                                      <Button
+                                        type='button'
+                                        color='error'
+                                        onClick={() =>
+                                          deleteExpenseItemHandler(
+                                            kandangExpenseIdx,
+                                            expenseIdx
+                                          )
+                                        }
+                                      >
+                                        <Icon
+                                          icon='material-symbols:delete-outline-rounded'
+                                          width={24}
+                                          height={24}
+                                        />
+                                      </Button>
+                                    </td>
+                                  )}
+                                </tr>
+                              )
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {type !== 'detail' && (
+                      <Button
+                        type='button'
+                        variant='outline'
+                        color='success'
+                        onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
+                        className='w-fit mx-auto'
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />{' '}
+                        Tambah
+                      </Button>
+                    )}
+                  </div>
+                )
+              );
+            }
+          )}
+      </div>
+    </Card>
+  );
+};
+
+export default ExpenseRequestKandangDetailExpense;
diff --git a/src/components/pages/expense/pdf/ExpensePDF.tsx b/src/components/pages/expense/pdf/ExpensePDF.tsx
new file mode 100644
index 00000000..5b107127
--- /dev/null
+++ b/src/components/pages/expense/pdf/ExpensePDF.tsx
@@ -0,0 +1,651 @@
+'use client';
+
+import {
+  Document,
+  Image,
+  Link,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+
+import { Expense } from '@/types/api/expense';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+
+interface ExpensePDFProps {
+  expense?: Expense;
+}
+
+const ExpensePDFStyle = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 32,
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 12,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 16,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+
+    position: 'absolute',
+    fontSize: 10,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // wrapper
+  generalInfoTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+
+  generalInfoTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+
+  // columns
+  generalInfoTableColLabel: {
+    width: '30%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  generalInfoTableColSeparator: {
+    width: '3%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 6,
+  },
+  generalInfoTableColValue: {
+    width: '67%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  generalInfoTableLabelText: {
+    fontWeight: 'bold',
+  },
+  generalInfoTableValueText: {},
+
+  // expense detail table
+  expenseDetailContainer: {
+    width: '100%',
+    marginTop: 12,
+  },
+  expenseDetailTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseContainer: {
+    width: '100%',
+    marginTop: 8,
+  },
+  kandangExpenseTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+  kandangExpenseTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+  kandangExpenseTableColLabel: {
+    width: '20%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  kandangExpenseTableColLabelBorderRight: {
+    borderRight: '1px solid #000000',
+  },
+  kandangExpenseTableColNonstock: {
+    width: '20%',
+  },
+  kandangExpenseTableColNote: {
+    width: '40%',
+  },
+  kandangExpenseHeaderLabelText: {
+    fontWeight: 'bold',
+  },
+  kandangExpenseLabelText: {
+    fontSize: 10,
+  },
+  kandangExpenseTableFooterColTotalExpenseCaption: {
+    width: '40%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    textAlign: 'right',
+  },
+  kandangExpenseTableFooterColTotalExpenseValue: {
+    width: '60%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  // utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
+  },
+});
+
+const ExpensePDF = ({ expense }: ExpensePDFProps) => {
+  const isLatestApprovalRejected =
+    expense?.latest_approval?.action === 'REJECTED';
+  const isExpenseRealized =
+    expense?.latest_approval?.step_number &&
+    expense?.latest_approval.step_number >= 4;
+
+  const realizationStatus = isExpenseRealized
+    ? 'Sudah Realisasi'
+    : 'Belum Realisasi';
+
+  const rows = [
+    { label: 'Nomor PO', value: expense?.po_number },
+    { label: 'Nomor Referensi', value: expense?.reference_number },
+    {
+      label: 'Kategori',
+      value:
+        expense?.category === 'BOP'
+          ? 'Biaya Operasional'
+          : expense?.category === 'NON-BOP'
+            ? 'Non Biaya Operasional'
+            : '',
+    },
+    { label: 'Lokasi', value: expense?.location.name },
+    {
+      label: 'Kandang',
+      value: expense?.kandangs.map((item) => item.name).join(', '),
+    },
+    { label: 'Vendor', value: expense?.supplier.name },
+    {
+      label: 'Tanggal Transaksi',
+      value: formatDate(expense?.transaction_date, 'DD MMMM YYYY'),
+    },
+    {
+      label: 'Tanggal Realisasi',
+      value: expense?.realization_date
+        ? formatDate(expense?.realization_date, 'DD MMMM YYYY')
+        : '-',
+    },
+    { label: 'Nama Pengaju', value: expense?.created_user.name },
+    {
+      label: 'Nominal Biaya',
+      value: formatCurrency(expense?.grand_total ?? 0),
+    },
+    {
+      label: 'Nominal Pengajuan',
+      value: formatCurrency(expense?.total_pengajuan ?? 0),
+    },
+    {
+      label: 'Nominal Realisasi',
+      value: expense?.total_realisasi
+        ? formatCurrency(expense?.total_realisasi ?? 0)
+        : '-',
+    },
+    { label: 'Status Pencairan', value: realizationStatus },
+    {
+      label: 'Status Biaya',
+      value: isLatestApprovalRejected
+        ? 'Ditolak'
+        : expense?.latest_approval?.step_name,
+    },
+  ];
+
+  return (
+    <Document>
+      <Page style={ExpensePDFStyle.page}>
+        <View>
+          <View style={ExpensePDFStyle.companyInfoHeader}>
+            <Image
+              style={ExpensePDFStyle.companyLogo}
+              src='/assets/img/lti-logo.png'
+            />
+
+            <Text style={ExpensePDFStyle.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={ExpensePDFStyle.companyName}>
+              PT LUMBUNG TELUR INDONESIA
+            </Text>
+            <Text style={ExpensePDFStyle.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={ExpensePDFStyle.doubleDivider} />
+          </View>
+        </View>
+
+        <Text style={ExpensePDFStyle.title}>
+          Laporan{' '}
+          {expense?.category === 'BOP'
+            ? 'Biaya Operasional'
+            : 'Non-Biaya Operasional'}{' '}
+          {expense?.po_number}
+        </Text>
+
+        {/* General info table */}
+        <View style={ExpensePDFStyle.generalInfoTable}>
+          {rows.map((row) => (
+            <View style={ExpensePDFStyle.generalInfoTableRow} key={row.label}>
+              <View style={ExpensePDFStyle.generalInfoTableColLabel}>
+                <Text style={ExpensePDFStyle.generalInfoTableLabelText}>
+                  {row.label}
+                </Text>
+              </View>
+              <View style={ExpensePDFStyle.generalInfoTableColSeparator}>
+                <Text>:</Text>
+              </View>
+              <View style={ExpensePDFStyle.generalInfoTableColValue}>
+                <Text style={ExpensePDFStyle.generalInfoTableValueText}>
+                  {row.value}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* Detail expense request */}
+        <View
+          minPresenceAhead={80}
+          style={ExpensePDFStyle.expenseDetailContainer}
+        >
+          <Text style={ExpensePDFStyle.expenseDetailTitle}>
+            Rincian Pengajuan Biaya Operasional
+          </Text>
+
+          {expense?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseRequestTotal = 0;
+
+            kandangExpense.pengajuans?.forEach(
+              (item) => (expenseRequestTotal += item.price)
+            );
+
+            return (
+              <View
+                key={kandangExpenseIdx}
+                style={ExpensePDFStyle.kandangExpenseContainer}
+              >
+                <Text style={ExpensePDFStyle.kandangExpenseTitle}>
+                  {kandangExpense.name}
+                </Text>
+
+                <View style={ExpensePDFStyle.kandangExpenseTable}>
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ExpensePDFStyle.kandangExpenseTableColNonstock,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Nonstock
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Kuantitas
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Harga Satuan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColNote,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Catatan
+                      </Text>
+                    </View>
+                  </View>
+
+                  {kandangExpense.pengajuans?.map((pengajuan, pengajuanIdx) => (
+                    <View
+                      key={pengajuanIdx}
+                      style={ExpensePDFStyle.kandangExpenseTableRow}
+                    >
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                          ExpensePDFStyle.kandangExpenseTableColNonstock,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {pengajuan.nonstock.name}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatNumber(pengajuan.qty)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatCurrency(pengajuan.price)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColNote,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {pengajuan.note}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseCaption,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Total Biaya Keseluruhan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseValue,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        {formatCurrency(expenseRequestTotal)}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            );
+          })}
+        </View>
+
+        {/* Detail expense realization */}
+        <View
+          minPresenceAhead={80}
+          style={ExpensePDFStyle.expenseDetailContainer}
+        >
+          <Text style={ExpensePDFStyle.expenseDetailTitle}>
+            Rincian Realisasi Biaya Operasional
+          </Text>
+
+          {expense?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseRealizationTotal = 0;
+
+            kandangExpense.realisasi?.forEach(
+              (item) => (expenseRealizationTotal += item.price)
+            );
+
+            return (
+              <View
+                key={kandangExpenseIdx}
+                style={ExpensePDFStyle.kandangExpenseContainer}
+              >
+                <Text style={ExpensePDFStyle.kandangExpenseTitle}>
+                  {kandangExpense.name}
+                </Text>
+
+                <View style={ExpensePDFStyle.kandangExpenseTable}>
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ExpensePDFStyle.kandangExpenseTableColNonstock,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Nonstock
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Kuantitas
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Harga Satuan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColNote,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Catatan
+                      </Text>
+                    </View>
+                  </View>
+
+                  {kandangExpense.realisasi?.map((realisasi, realisasiIdx) => (
+                    <View
+                      key={realisasiIdx}
+                      style={ExpensePDFStyle.kandangExpenseTableRow}
+                    >
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                          ExpensePDFStyle.kandangExpenseTableColNonstock,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {realisasi.nonstock.name}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatNumber(realisasi.qty)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatCurrency(realisasi.price)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColNote,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {realisasi.note}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseCaption,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Total Biaya Keseluruhan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseValue,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        {formatCurrency(expenseRealizationTotal)}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            );
+          })}
+        </View>
+
+        <View style={ExpensePDFStyle.footer} fixed>
+          <Link
+            src={`${process.env.NEXT_PUBLIC_LTI_URL}expense/detail?expenseId=${expense?.id}`}
+          >
+            {expense?.po_number}
+          </Link>
+
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default ExpensePDF;
diff --git a/src/components/pages/expense/pdf/ExpensePDFButton.tsx b/src/components/pages/expense/pdf/ExpensePDFButton.tsx
new file mode 100644
index 00000000..fe062c25
--- /dev/null
+++ b/src/components/pages/expense/pdf/ExpensePDFButton.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { pdf } from '@react-pdf/renderer';
+
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import ExpensePDF from '@/components/pages/expense/pdf/ExpensePDF';
+
+import { Expense } from '@/types/api/expense';
+
+interface ExpensePDFPreviewButtonProps {
+  expense?: Expense;
+}
+
+const ExpensePDFPreviewButton = ({ expense }: ExpensePDFPreviewButtonProps) => {
+  const openPdf = async () => {
+    const expensePdfBlob = await pdf(<ExpensePDF expense={expense} />).toBlob();
+
+    const expensePdfUrl = URL.createObjectURL(expensePdfBlob);
+    window.open(expensePdfUrl, '_blank');
+  };
+
+  const downloadPdf = async () => {
+    const blob = await pdf(<ExpensePDF expense={expense} />).toBlob();
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${expense?.po_number}.pdf`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className='w-fit flex flex-col'>
+      <Button onClick={downloadPdf} className='text-xs'>
+        <Icon icon='bx:file' width={16} height={16} />
+        {expense?.po_number}
+      </Button>
+
+      <Button
+        onClick={openPdf}
+        variant='link'
+        className='p-0 mt-1 text-xs justify-start'
+      >
+        Lihat Dokumen
+      </Button>
+    </div>
+  );
+};
+
+export default ExpensePDFPreviewButton;
diff --git a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
index 45cfd3f3..30807d1c 100644
--- a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
+++ b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
@@ -6,15 +6,11 @@ import Table from '@/components/Table';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 import { Icon } from '@iconify/react';
-import {
-  ColumnDef,
-  ColumnSort,
-  SortingState,
-} from '@tanstack/react-table';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
@@ -44,12 +40,9 @@ const InventoryAdjustmentTable = () => {
   });
 
   // Fetch Data
-  const {
-    data: inventoryAdjustments,
-    isLoading,
-  } = useSWR(
-    `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
-    inventoryAdjustmentApi.getAllFetcher
+  const { data: inventoryAdjustments, isLoading } = useSWR(
+    `${InventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
+    InventoryAdjustmentApi.getAllFetcher
   );
 
   // State
@@ -113,8 +106,8 @@ const InventoryAdjustmentTable = () => {
           type === 'INCREASE'
             ? 'Peningkatan'
             : type === 'DECREASE'
-            ? 'Penurunan'
-            : '-';
+              ? 'Penurunan'
+              : '-';
 
         return (
           <div
@@ -187,8 +180,13 @@ const InventoryAdjustmentTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/inventory/adjustment/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/inventory/adjustment/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
@@ -211,7 +209,7 @@ const InventoryAdjustmentTable = () => {
                   value: tableFilterState.pageSize,
                 }}
                 onChange={pageSizeChangeHandler}
-                className={{ wrapper: 'max-w-28' }}
+                className={{ wrapper: 'min-w-28' }}
               />
             </div>
           </div>
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
index d7a0ae0a..0a6dc1f9 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
@@ -4,24 +4,21 @@ export const InventoryAdjustmentFormSchema = Yup.object({
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_category_id: Yup.number().nullable(),
 
   product: Yup.object({
     value: Yup.number().required('ID Produk wajib diisi!'),
     label: Yup.string().required('Nama Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_id: Yup.number().nullable(),
 
   warehouse: Yup.object({
     value: Yup.number().required('ID Gudang wajib diisi!'),
     label: Yup.string().required('Nama Gudang wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   warehouse_id: Yup.number().nullable(),
 
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
index 9a19ced1..2c6c463c 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import {
   CreateInventoryAdjustmentPayload,
   InventoryAdjustment,
@@ -24,7 +24,7 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
-import RadioInput from '@/components/input/RadioInput';
+import { RadioGroup } from '@/components/input/RadioInput';
 import TextArea from '@/components/input/TextArea';
 
 interface InventoryAdjustmentFormProps {
@@ -51,9 +51,8 @@ const InventoryAdjustmentForm = ({
   // Submit Handler
   const createInventoryAdjustmentHandler = useCallback(
     async (payload: CreateInventoryAdjustmentPayload) => {
-      const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
-        payload
-      );
+      const createInventoryAdjustmentRes =
+        await InventoryAdjustmentApi.create(payload);
 
       if (isResponseError(createInventoryAdjustmentRes)) {
         setInventoryAdjustmentFormErrorMessage(
@@ -68,11 +67,12 @@ const InventoryAdjustmentForm = ({
     [router]
   );
 
-  const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
+  const formikInitialValues = useMemo<
+    Partial<InventoryAdjustmentFormValues>
+  >(() => {
     return {
-      product_category_id: initialValues?.product_category?.id ?? 0,
-      product_id: initialValues?.product?.id ?? 0,
-      warehouse_id: initialValues?.warehouse?.id ?? 0,
+      product_id: initialValues?.product_warehouse?.product_id ?? 0,
+      warehouse_id: initialValues?.product_warehouse?.warehouse_id ?? 0,
       product_category: undefined,
       product: undefined,
       warehouse: undefined,
@@ -185,7 +185,6 @@ const InventoryAdjustmentForm = ({
     warehouseChangeHandler(null);
   };
 
-
   const { setValues: formikSetValues } = formik;
 
   // Effect
@@ -225,7 +224,13 @@ const InventoryAdjustmentForm = ({
       const type = initialValues.transaction_type.toLowerCase();
       setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
     }
-  }, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
+  }, [
+    formik,
+    initialValues,
+    setQuantityLabel,
+    setDisabledProduct,
+    setSelectedProductCategories,
+  ]);
   useEffect(() => {
     formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
   }, [formikSetValues, formikInitialValues]);
@@ -342,7 +347,7 @@ const InventoryAdjustmentForm = ({
             />
 
             {/* Radio Button Flag Stock */}
-            <RadioInput
+            <RadioGroup
               name='transaction_type'
               label='Tipe Transaksi'
               options={[
@@ -362,17 +367,21 @@ const InventoryAdjustmentForm = ({
                 Boolean(formik.errors.transaction_type)
               }
               errorMessage={formik.errors.transaction_type as string}
-              variant='radio-primary'
+              color='primary'
               required
-              bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
+              bottomLabel={
+                formik.values.transaction_type == undefined
+                  ? 'Pilih salah satu tipe transaksi'
+                  : undefined
+              }
               disabled={type === 'detail'}
             />
 
             {/* Number Input Stock */}
             <TextInput
-             className={{
-              wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
-             }}
+              className={{
+                wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
+              }}
               required
               label={quantityLabel}
               name='quantity'
@@ -395,8 +404,6 @@ const InventoryAdjustmentForm = ({
               readOnly={type === 'detail'}
             />
 
-            
-
             {/* Text Area Input Reason */}
             <TextArea
               required
@@ -413,14 +420,23 @@ const InventoryAdjustmentForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
               <div className='flex flex-row justify-end gap-2'>
-                <Button type='button' color='warning' className='px-4' onClick={resetHandler}>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={resetHandler}
+                >
                   Reset
                 </Button>
                 <Button
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
+                  disabled={
+                    !formik.isValid ||
+                    formik.isSubmitting ||
+                    formik.values.product == undefined
+                  }
                   className='px-4'
                 >
                   Submit
diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 61be40f8..35625883 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -1,24 +1,44 @@
 'use client';
 
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import useSWR from 'swr';
-import { SortingState } from '@tanstack/react-table';
+import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
 
 import Table from '@/components/Table';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { Icon } from '@iconify/react';
 import { Movement } from '@/types/api/inventory/movement';
 import { MovementApi } from '@/services/api/inventory';
 import { cn } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { TableToolbar } from '@/components/table/TableToolbar';
-import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { OptionType } from '@/components/input/SelectInput';
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import { TableRowOptions } from '@/components/table/TableRowOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Movement, unknown>;
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <Button
+      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+  </RowOptionsMenuWrapper>
+);
 
 const MovementTable = () => {
   const {
@@ -28,30 +48,24 @@ const MovementTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '' },
-    paramMap: { page: 'page', pageSize: 'limit' },
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
   });
 
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedMovement, setSelectedMovement] = useState<
-    Movement | undefined
-  >(undefined);
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const deleteModal = useModal();
-
-  const {
-    data: movements,
-    isLoading,
-    mutate: refreshMovements,
-  } = useSWR(
+  const { data: movements, isLoading } = useSWR(
     `${MovementApi.basePath}${getTableFilterQueryString()}`,
     MovementApi.getAllFetcher
   );
 
-  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
-    setPage(1);
   };
 
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -60,167 +74,143 @@ const MovementTable = () => {
     setPage(1);
   };
 
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    try {
-      await MovementApi.delete(selectedMovement?.id as number);
-      refreshMovements();
-      deleteModal.closeModal();
-    } finally {
-      setIsDeleteLoading(false);
-    }
-  };
+  const movementColumns: ColumnDef<Movement>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorFn: (row) => row.source_warehouse?.name,
+      header: 'Gudang Asal',
+    },
+    {
+      accessorFn: (row) => row.destination_warehouse?.name,
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'transfer_reason',
+      header: 'Catatan',
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal',
+      cell: (props) =>
+        new Date(props.row.original.transfer_date).toLocaleDateString('id-ID'),
+    },
+    {
+      accessorFn: (row) => {
+        const totalCost = row.deliveries?.reduce(
+          (sum, d) => sum + (d.shipping_cost_total || 0),
+          0
+        );
+        return totalCost?.toLocaleString('id-ID');
+      },
+      header: 'Biaya Pengiriman',
+    },
+    {
+      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 - 2;
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu type='dropdown' props={props} />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu type='collapse' props={props} />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   return (
-    <div className='flex flex-col gap-4'>
-      <div className='flex flex-col gap-2 mb-4'>
-        <TableToolbar
-          addButton={{
-            href: '/inventory/movement/add',
-            label: 'Tambah Movement',
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'>
+              <Button
+                href='/inventory/movement/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Movement'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex justify-end gap-4'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<Movement>
+          data={isResponseSuccess(movements) ? movements?.data : []}
+          columns={movementColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(movements) && movements?.data?.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',
           }}
-          search={{
-            value: tableFilterState.search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Movement',
-          }}
-        />
-        <TableRowSizeSelector
-          value={tableFilterState.pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
         />
       </div>
-
-      <Table<Movement>
-        data={isResponseSuccess(movements) ? movements?.data : []}
-        columns={[
-          {
-            header: '#',
-            cell: (props) =>
-              tableFilterState.pageSize * (tableFilterState.page - 1) +
-              props.row.index +
-              1,
-          },
-          {
-            accessorFn: (row) => row.source_warehouse?.name,
-            header: 'Gudang Asal',
-          },
-          {
-            accessorFn: (row) => row.destination_warehouse?.name,
-            header: 'Gudang Tujuan',
-          },
-          {
-            accessorKey: 'transfer_reason',
-            header: 'Catatan',
-          },
-          {
-            accessorKey: 'transfer_date',
-            header: 'Tanggal',
-            cell: (props) =>
-              new Date(props.row.original.transfer_date).toLocaleDateString(
-                'id-ID'
-              ),
-          },
-          {
-            accessorFn: (row) => {
-              const totalCost = row.deliveries?.reduce(
-                (sum, d) => sum + (d.shipping_cost_total || 0),
-                0
-              );
-              return totalCost?.toLocaleString('id-ID');
-            },
-            header: 'Biaya Pengiriman',
-          },
-          {
-            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 - 2;
-
-              const deleteClickHandler = () => {
-                setSelectedMovement(props.row.original);
-                deleteModal.openModal();
-              };
-
-              return (
-                <>
-                  {currentPageSize > 2 && (
-                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                      <TableRowOptions
-                        type='dropdown'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
-                    </RowDropdownOptions>
-                  )}
-
-                  {currentPageSize <= 2 && (
-                    <RowCollapseOptions>
-                      <TableRowOptions
-                        type='collapse'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
-                    </RowCollapseOptions>
-                  )}
-                </>
-              );
-            },
-          },
-        ]}
-        pageSize={tableFilterState.pageSize}
-        page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
-        totalItems={
-          isResponseSuccess(movements) ? movements?.meta?.total_results : 0
-        }
-        onPageChange={setPage}
-        isLoading={isLoading}
-        sorting={sorting}
-        setSorting={setSorting}
-        className={{
-          containerClassName: cn({
-            'mb-20':
-              isResponseSuccess(movements) && movements?.data?.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',
-        }}
-      />
-
-      <ConfirmationModal
-        ref={deleteModal.ref}
-        type='error'
-        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
-        }}
-      />
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index ed8fb479..5ea844ab 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -1,34 +1,82 @@
 import * as Yup from 'yup';
 import { Movement } from '@/types/api/inventory/movement';
 
+type MovementFormSchemaType = {
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse?: {
+    value: number;
+    label: string;
+    area?: string;
+    location?: string;
+  } | null;
+  source_warehouse_id: number;
+  destination_warehouse?: {
+    value: number;
+    label: string;
+    area?: string;
+    location?: string;
+  } | null;
+  destination_warehouse_id: number;
+  products: {
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_qty: number | string;
+  }[];
+  deliveries: {
+    delivery_cost?: number | string;
+    delivery_cost_per_item?: number | string;
+    document?: File | string | null;
+    document_path?: string | null;
+    driver_name: string;
+    vehicle_plate: string;
+    supplier?: {
+      value: number;
+      label: string;
+    } | null;
+    supplier_id: number;
+    products: {
+      product?: {
+        value: number;
+        label: string;
+      } | null;
+      product_id: number;
+      product_qty: number | string;
+    }[];
+  }[];
+};
+
 export type ProductSchema = {
-  product: {
+  product?: {
     value: number;
     label: string;
   } | null;
   product_id: number;
-  product_qty: number;
+  product_qty: number | string;
 };
 
 export type DeliverySchema = {
-  delivery_cost?: number | undefined;
-  delivery_cost_per_item?: number | undefined;
+  delivery_cost?: number | string;
+  delivery_cost_per_item?: number | string;
   document?: File | string | null;
   document_path?: string | null;
   driver_name: string;
   vehicle_plate: string;
-  supplier: {
+  supplier?: {
     value: number;
     label: string;
   } | null;
   supplier_id: number;
   products: {
-    product: {
+    product?: {
       value: number;
       label: string;
     } | null;
     product_id: number;
-    product_qty: number;
+    product_qty: number | string;
   }[];
 };
 
@@ -102,38 +150,47 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .required('Produk wajib diisi!'),
 });
 
-export const MovementFormSchema = Yup.object({
-  transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
-  transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
-  source_warehouse: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-    area: Yup.string().optional(),
-    location: Yup.string().optional(),
-  }).nullable(),
-  source_warehouse_id: Yup.number()
-    .required('Gudang asal wajib diisi!')
-    .typeError('Gudang asal wajib diisi!'),
-  destination_warehouse: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-    area: Yup.string().optional(),
-    location: Yup.string().optional(),
-  }).nullable(),
-  destination_warehouse_id: Yup.number()
-    .required('Gudang tujuan wajib diisi!')
-    .typeError('Gudang tujuan wajib diisi!'),
-  products: Yup.array()
-    .of(ProductObjectSchema)
-    .min(1, 'Minimal harus ada 1 produk!')
-    .required('Produk wajib diisi!'),
-  deliveries: Yup.array()
-    .of(DeliveryObjectSchema)
-    .min(1, 'Minimal harus ada 1 pengiriman!')
-    .required('Pengiriman wajib diisi!'),
-});
-
-export const UpdateMovementFormSchema = MovementFormSchema;
+export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
+  Yup.object({
+    transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+    source_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+      area: Yup.string().optional(),
+      location: Yup.string().optional(),
+    }).nullable(),
+    source_warehouse_id: Yup.number()
+      .required('Gudang asal wajib diisi!')
+      .typeError('Gudang asal wajib diisi!'),
+    destination_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+      area: Yup.string().optional(),
+      location: Yup.string().optional(),
+    }).nullable(),
+    destination_warehouse_id: Yup.number()
+      .required('Gudang tujuan wajib diisi!')
+      .typeError('Gudang tujuan wajib diisi!')
+      .test(
+        'different-warehouse',
+        'Gudang tujuan tidak boleh sama dengan gudang asal!',
+        function (value) {
+          const { source_warehouse_id } = this.parent;
+          return (
+            !value || !source_warehouse_id || value !== source_warehouse_id
+          );
+        }
+      ),
+    products: Yup.array()
+      .of(ProductObjectSchema)
+      .min(1, 'Minimal harus ada 1 produk!')
+      .required('Produk wajib diisi!'),
+    deliveries: Yup.array()
+      .of(DeliveryObjectSchema)
+      .min(1, 'Minimal harus ada 1 pengiriman!')
+      .required('Pengiriman wajib diisi!'),
+  });
 
 export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d8239d14..ae9b68d9 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -8,28 +8,33 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import {
   CreateMovementPayload,
   Movement,
 } from '@/types/api/inventory/movement';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { useRouter } from 'next/navigation';
 import {
   MovementFormSchema,
   MovementFormValues,
-  UpdateMovementFormSchema,
   getMovementFormInitialValues,
   ProductSchema,
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
-import { useMovementFormHandlers } from './useMovementFormHandlers';
 import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
+import { MovementApi } from '@/services/api/inventory';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import Badge from '@/components/Badge';
+import Card from '@/components/Card';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -37,7 +42,10 @@ interface MovementFormProps {
 }
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
-  const [, setMovementFormErrorMessage] = useState('');
+  const router = useRouter();
+
+  // ===== STATE MANAGEMENT =====
+  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
   const [
     productWarehouseSelectInputValue,
     setProductWarehouseSelectInputValue,
@@ -45,16 +53,115 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
 
-  const {
-    deleteModal,
-    movementFormErrorMessage,
-    isDeleteLoading,
-    createMovementHandler,
-    updateMovementHandler,
-    deleteMovementClickHandler,
-    confirmationModalDeleteClickHandler,
-  } = useMovementFormHandlers(initialValues?.id);
+  // ===== FORM HANDLERS =====
+  const createMovementHandler = useCallback(
+    async (payload: CreateMovementPayload, documents: File[] = []) => {
+      const formData = new FormData();
+      formData.append('data', JSON.stringify(payload));
+      documents.forEach((file, index) => {
+        formData.append(`documents[${index}]`, file);
+      });
 
+      const res = await MovementApi.create(
+        formData as unknown as CreateMovementPayload
+      );
+      if (isResponseError(res)) {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  // ===== INTERFACES =====
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
+  // ===== API DATA FETCHING =====
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  // ===== USE SELECT HOOKS =====
+  const {
+    inputValue: warehouseSelectInputValue,
+    setInputValue: setWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+  // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'BOP',
+  });
+
+  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
+  const { data: warehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  // ===== DATA PROCESSING =====
+  const warehouseStockMap = useMemo(() => {
+    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+
+    const stockMap = new Map<
+      number,
+      { totalQty: number; productCount: number }
+    >();
+
+    allProductWarehouses.data.forEach((pw) => {
+      const warehouseId = pw.warehouse.id;
+      const existing = stockMap.get(warehouseId) || {
+        totalQty: 0,
+        productCount: 0,
+      };
+
+      stockMap.set(warehouseId, {
+        totalQty: existing.totalQty + pw.quantity,
+        productCount: existing.productCount + 1,
+      });
+    });
+
+    return stockMap;
+  }, [allProductWarehouses]);
+
+  const warehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(warehouses)) return [];
+
+    return (
+      warehouses?.data.map((w) => {
+        warehouseStockMap.get(w.id);
+        return {
+          value: w.id,
+          label: w.name,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      }) || []
+    );
+  }, [warehouses, warehouseStockMap]);
+
+  // ===== FORM INITIALIZATION =====
   const formikInitialValues = useMemo<MovementFormValues>(
     () => getMovementFormInitialValues(initialValues),
     [initialValues]
@@ -62,27 +169,42 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const formik = useFormik<MovementFormValues>({
     initialValues: formikInitialValues,
-    validationSchema:
-      type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
+    validationSchema: MovementFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
     validateOnMount: false,
     enableReinitialize: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
+      if (values.source_warehouse_id === values.destination_warehouse_id) {
+        const sourceWarehouseName =
+          (values.source_warehouse as WarehouseOptionType)?.label ||
+          'Gudang asal';
+        const destinationWarehouseName =
+          (values.destination_warehouse as WarehouseOptionType)?.label ||
+          'gudang tujuan';
+
+        setMovementFormErrorMessage(
+          `Tidak bisa submit form. ${sourceWarehouseName} tidak boleh sama dengan ${destinationWarehouseName}.`
+        );
+        toast.error(
+          `Tidak bisa submit form. Gudang asal dan tujuan tidak boleh sama!`
+        );
+        return;
+      }
       const documents: File[] = [];
-      const deliveriesPayload = values.deliveries.map((d, idx) => {
+      const deliveriesPayload = values.deliveries.map((d) => {
         let documentIndex = 0;
 
         if (d.document && d.document instanceof File) {
           documents.push(d.document);
           documentIndex = documents.length - 1;
-        } else {
         }
 
         return {
-          delivery_cost: d.delivery_cost ?? 0,
-          delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
+          delivery_cost: parseInt((d.delivery_cost || '').toString()) || 0,
+          delivery_cost_per_item:
+            parseInt((d.delivery_cost_per_item || '').toString()) || 0,
           document_index: documentIndex,
           document_path: d.document_path,
           driver_name: d.driver_name,
@@ -90,7 +212,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           supplier_id: d.supplier_id,
           products: d.products.map((p) => ({
             product_id: p.product_id,
-            product_qty: p.product_qty,
+            product_qty: parseInt(p.product_qty.toString()) || 0,
           })),
         };
       });
@@ -102,7 +224,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         destination_warehouse_id: values.destination_warehouse_id,
         products: values.products.map((p) => ({
           product_id: p.product_id,
-          product_qty: p.product_qty,
+          product_qty: parseInt(p.product_qty.toString()) || 0,
         })),
         deliveries: deliveriesPayload,
       };
@@ -111,102 +233,43 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         case 'add':
           await createMovementHandler(payload, documents);
           break;
-        case 'edit':
-          await updateMovementHandler(
-            initialValues?.id as number,
-            payload,
-            documents
-          );
-          break;
       }
     },
   });
 
-  const addProduct = () => {
-    const newProducts = [
-      ...(formik.values.products || []),
-      {
-        product: null,
-        product_id: 0,
-        product_qty: 0,
-      },
-    ];
-    formik.setFieldValue('products', newProducts);
-  };
+  // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
+  const getProductWarehousesUrl = useCallback(() => {
+    const productWarehouseParams = new URLSearchParams({
+      search: productWarehouseSelectInputValue,
+    });
+    if (formik.values.source_warehouse_id) {
+      productWarehouseParams.append(
+        'warehouse_id',
+        formik.values.source_warehouse_id.toString()
+      );
+    }
+    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
+  }, [formik.values.source_warehouse_id, productWarehouseSelectInputValue]);
 
-  const removeProduct = useCallback(
-    (i: number) => {
-      const updatedProducts =
-        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
-          if (index !== i) {
-            acc.push(item);
-          }
-          return acc;
-        }, []) ?? [];
+  const productWarehousesUrl = getProductWarehousesUrl();
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(
+      formik.values.source_warehouse_id ? productWarehousesUrl : null,
+      ProductWarehouseApi.getAllFetcher
+    );
 
-      formik.setFieldValue('products', updatedProducts);
-    },
-    [formik]
-  );
-
-  const bulkRemoveProduct = useCallback(() => {
-    const updatedProducts =
-      formik.values.products?.filter(
-        (_, idx) => !selectedProducts.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('products', updatedProducts);
-    setSelectedProducts([]);
-  }, [formik, selectedProducts]);
-
-  const addDelivery = () => {
-    formik.setFieldValue('deliveries', [
-      ...(formik.values.deliveries || []),
-      {
-        delivery_cost: undefined,
-        delivery_cost_per_item: undefined,
-        document: null,
-        driver_name: '',
-        vehicle_plate: '',
-        supplier: null,
-        supplier_id: 0,
-        products: [
-          {
-            product: null,
-            product_id: 0,
-            product_qty: 0,
-          },
-        ],
-      },
-    ]);
-  };
-
-  const removeDelivery = useCallback(
-    (i: number) => {
-      const updatedDeliveries =
-        formik.values.deliveries?.reduce(
-          (acc: DeliverySchema[], item, index) => {
-            if (index !== i) {
-              acc.push(item);
-            }
-            return acc;
-          },
-          []
-        ) ?? [];
-
-      formik.setFieldValue('deliveries', updatedDeliveries);
-    },
-    [formik]
-  );
-
-  const bulkRemoveDelivery = useCallback(() => {
-    const updatedDeliveries =
-      formik.values.deliveries?.filter(
-        (_, idx) => !selectedDeliveries.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('deliveries', updatedDeliveries);
-    setSelectedDeliveries([]);
-  }, [formik, selectedDeliveries]);
+  const productWarehouseOptions = isResponseSuccess(productWarehouses)
+    ? productWarehouses?.data.map((pw) => ({
+        value: pw.product.id,
+        label: pw.product.name,
+        product_id: pw.product.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      }))
+    : [];
 
+  // ===== HELPER FUNCTIONS =====
   const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
     column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema,
@@ -263,132 +326,116 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
-  interface WarehouseOptionType extends OptionType {
-    area?: string;
-    location?: string;
-  }
+  const handleTransferDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    formik.setFieldValue('transfer_date', e.target.value);
+  };
 
-  interface ProductWarehouseOptionType extends OptionType {
-    product_id: number;
-    warehouse_id: number;
-    warehouse_name: string;
-    quantity: number;
-  }
+  // ===== EVENT HANDLERS =====
+  // Product Handlers
+  const addProduct = () => {
+    const newProducts = [
+      ...(formik.values.products || []),
+      {
+        product: null,
+        product_id: 0,
+        product_qty: '',
+      },
+    ];
+    formik.setFieldValue('products', newProducts);
+  };
 
-  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
-  const { data: allProductWarehouses } = useSWR(
-    allProductWarehousesUrl,
-    ProductWarehouseApi.getAllFetcher
+  const removeProduct = useCallback(
+    (i: number) => {
+      const updatedProducts =
+        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
+          if (index !== i) {
+            acc.push(item);
+          }
+          return acc;
+        }, []) ?? [];
+
+      formik.setFieldValue('products', updatedProducts);
+    },
+    [formik]
   );
 
-  const warehouseStockMap = useMemo(() => {
-    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+  const bulkRemoveProduct = useCallback(() => {
+    const updatedProducts =
+      formik.values.products?.filter(
+        (_, idx) => !selectedProducts.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('products', updatedProducts);
+    setSelectedProducts([]);
+  }, [formik, selectedProducts]);
 
-    const stockMap = new Map<
-      number,
-      { totalQty: number; productCount: number }
-    >();
+  // Delivery Handlers
+  const addDelivery = () => {
+    formik.setFieldValue('deliveries', [
+      ...(formik.values.deliveries || []),
+      {
+        delivery_cost: '',
+        delivery_cost_per_item: '',
+        document: null,
+        driver_name: '',
+        vehicle_plate: '',
+        supplier: null,
+        supplier_id: 0,
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: '',
+          },
+        ],
+      },
+    ]);
+  };
 
-    allProductWarehouses.data.forEach((pw) => {
-      const warehouseId = pw.warehouse.id;
-      const existing = stockMap.get(warehouseId) || {
-        totalQty: 0,
-        productCount: 0,
-      };
+  const removeDelivery = useCallback(
+    (i: number) => {
+      const updatedDeliveries =
+        formik.values.deliveries?.reduce(
+          (acc: DeliverySchema[], item, index) => {
+            if (index !== i) {
+              acc.push(item);
+            }
+            return acc;
+          },
+          []
+        ) ?? [];
 
-      stockMap.set(warehouseId, {
-        totalQty: existing.totalQty + pw.quantity,
-        productCount: existing.productCount + 1,
-      });
-    });
-
-    return stockMap;
-  }, [allProductWarehouses]);
-
-  // Warehouse selection
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
-    useState('');
-  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
+      formik.setFieldValue('deliveries', updatedDeliveries);
+    },
+    [formik]
   );
-  const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => {
-        const stockInfo = warehouseStockMap.get(w.id);
-        const stockLabel = stockInfo
-          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
-          : ' (Kosong)';
 
-        return {
-          value: w.id,
-          label: `${w.name}${stockLabel}`,
-          area: w.area?.name,
-          location:
-            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-              ? w.location?.name
-              : undefined,
-        };
-      })
-    : [];
+  const bulkRemoveDelivery = useCallback(() => {
+    const updatedDeliveries =
+      formik.values.deliveries?.filter(
+        (_, idx) => !selectedDeliveries.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('deliveries', updatedDeliveries);
+    setSelectedDeliveries([]);
+  }, [formik, selectedDeliveries]);
 
-  // Product Warehouse selection - Filter by source warehouse
-  const productWarehouseParams = new URLSearchParams({
-    search: productWarehouseSelectInputValue,
-  });
-  if (formik.values.source_warehouse_id) {
-    productWarehouseParams.append(
-      'warehouse_id',
-      formik.values.source_warehouse_id.toString()
-    );
-  }
-  const productWarehousesUrl = `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(
-      formik.values.source_warehouse_id ? productWarehousesUrl : null,
-      ProductWarehouseApi.getAllFetcher
-    );
-  const productWarehouseOptions = isResponseSuccess(productWarehouses)
-    ? productWarehouses?.data.map((pw) => ({
-        value: pw.product.id,
-        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
-        product_id: pw.product.id,
-        warehouse_id: pw.warehouse.id,
-        warehouse_name: pw.warehouse.name,
-        quantity: pw.quantity,
-      }))
-    : [];
-
-  // Supplier selection
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
-    : [];
-
-  // Handle cost calculation when delivery_cost changes
+  // Cost Calculation Handlers
   const handleDeliveryCostChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue);
+    (idx: number, value: number) => {
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
         const productQty = delivery.products.reduce(
-          (sum, p) => sum + p.product_qty,
+          (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const perItem = numValue / productQty;
+        if (productQty > 0 && value > 0) {
+          const perItem = value / productQty;
           formik.setFieldValue(
             `deliveries.${idx}.delivery_cost_per_item`,
             perItem
           );
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
         }
       }
@@ -396,25 +443,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Handle cost calculation when delivery_cost_per_item changes
   const handleDeliveryCostPerItemChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(
-        `deliveries.${idx}.delivery_cost_per_item`,
-        numValue
-      );
+    (idx: number, value: number) => {
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
         const productQty = delivery.products.reduce(
-          (sum, p) => sum + p.product_qty,
+          (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const totalCost = numValue * productQty;
+        if (productQty > 0 && value > 0) {
+          const totalCost = value * productQty;
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
         }
       }
@@ -422,57 +464,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Auto-recalculate when product quantity changes
-  useEffect(() => {
-    formik.values.deliveries?.forEach((delivery, idx) => {
-      const productQty = delivery.products.reduce(
-        (sum, p) => sum + p.product_qty,
-        0
-      );
+  const handleDeliveryCostChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleDeliveryCostChange(idx, value);
+    },
+    [handleDeliveryCostChange]
+  );
 
-      // If delivery_cost is set, recalculate delivery_cost_per_item
-      if (
-        delivery.delivery_cost &&
-        delivery.delivery_cost > 0 &&
-        productQty > 0
-      ) {
-        const perItem = delivery.delivery_cost / productQty;
-        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
-          formik.setFieldValue(
-            `deliveries.${idx}.delivery_cost_per_item`,
-            perItem
-          );
-        }
-      }
-      // If delivery_cost_per_item is set, recalculate delivery_cost
-      else if (
-        delivery.delivery_cost_per_item &&
-        delivery.delivery_cost_per_item > 0 &&
-        productQty > 0
-      ) {
-        const totalCost = delivery.delivery_cost_per_item * productQty;
-        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
-          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        }
-      }
-    });
-  }, [
-    formik.values.deliveries
-      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
-      .join(','),
-  ]);
-
-  useEffect(() => {
-    if (
-      formik.values.source_warehouse_id &&
-      type !== 'edit' &&
-      type !== 'detail'
-    ) {
-      formik.setFieldValue('products', []);
-      formik.setFieldValue('deliveries', []);
-    }
-  }, [formik.values.source_warehouse_id]);
+  const handleDeliveryCostPerItemChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleDeliveryCostPerItemChange(idx, value);
+    },
+    [handleDeliveryCostPerItemChange]
+  );
 
+  // UTILITY FUNCTIONS
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products
@@ -495,31 +503,92 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [productWarehouseOptions, type]
   );
 
-  const getProductQtyAdornment = useCallback(
+  const getProductQtyBottomLabel = useCallback(
     (productIdx: number) => {
-      if (type === 'detail') return null;
+      if (type === 'detail') return undefined;
       const product = formik.values.products?.[productIdx];
-      if (!product || !product.product_id) return null;
+      if (!product || !product.product_id) return undefined;
 
       const availableStock = getAvailableStock(product.product_id);
       const requestedQty = Number(product.product_qty) || 0;
       const remainingStock = availableStock - requestedQty;
 
       if (requestedQty > 0) {
+        return `Sisa: ${remainingStock.toLocaleString('en-US')}`;
+      }
+
+      return `Tersedia: ${availableStock.toLocaleString('en-US')}`;
+    },
+    [formik.values.products, getAvailableStock, type]
+  );
+
+  const getDeliveryProductQtyBottomLabel = useCallback(
+    (deliveryIdx: number, productIdx: number) => {
+      if (type === 'detail') return undefined;
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return undefined;
+
+      const deliveryProduct = delivery.products[productIdx];
+      if (!deliveryProduct || !deliveryProduct.product_id) return undefined;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === deliveryProduct.product_id
+      );
+      if (!relatedProduct) return undefined;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === deliveryProduct.product_id &&
+              !(dIdx === deliveryIdx && pIdx === productIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed;
+      return `Tersedia: ${availableQty.toLocaleString('en-US')}`;
+    },
+    [formik.values.deliveries, formik.values.products, type]
+  );
+
+  const getWarehouseStockAdornment = useCallback(
+    (warehouseId: number) => {
+      const stockInfo = warehouseStockMap.get(warehouseId);
+      if (!stockInfo) {
         return (
-          <span className='text-sm text-gray-600 whitespace-nowrap'>
-            (sisa: {remainingStock.toLocaleString('id-ID')})
-          </span>
+          <Badge
+            variant='ghost'
+            color='neutral'
+            size='sm'
+            className={{ badge: 'whitespace-nowrap font-semibold' }}
+          >
+            Kosong
+          </Badge>
         );
       }
 
+      const { productCount } = stockInfo;
+      let color: 'neutral' | 'success' | 'warning' = 'neutral';
+      if (productCount === 0) color = 'warning';
+      else if (productCount > 0) color = 'success';
+
       return (
-        <span className='text-sm text-gray-600 whitespace-nowrap'>
-          (tersedia: {availableStock.toLocaleString('id-ID')})
-        </span>
+        <Badge
+          variant='soft'
+          color={color}
+          size='sm'
+          className={{ badge: 'whitespace-nowrap font-semibold' }}
+        >
+          Tersedia {productCount} produk
+        </Badge>
       );
     },
-    [formik.values.products, getAvailableStock, type]
+    [warehouseStockMap]
   );
 
   const getProductQtyError = useCallback(
@@ -532,7 +601,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       const requestedQty = Number(product.product_qty) || 0;
 
       if (requestedQty > availableStock) {
-        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('en-US')}`;
       }
 
       return null;
@@ -618,6 +687,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products, type]
   );
 
+  // ===== COMPUTED VALUES =====
   const invalidQtyRows = useMemo(
     () =>
       type === 'detail'
@@ -650,847 +720,1023 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   }, [formik.values.products, getProductQtyError, type]);
 
+  // ===== EFFECTS =====
+  useEffect(() => {
+    formik.values.deliveries?.forEach((delivery, idx) => {
+      const productQty = delivery.products.reduce(
+        (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
+        0
+      );
+
+      const deliveryCost =
+        parseInt((delivery.delivery_cost || '').toString()) || 0;
+      const deliveryCostPerItem =
+        parseInt((delivery.delivery_cost_per_item || '').toString()) || 0;
+
+      if (deliveryCost > 0 && productQty > 0) {
+        const perItem = deliveryCost / productQty;
+        if (Math.abs(deliveryCostPerItem - perItem) > 0.01) {
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        }
+      } else if (deliveryCostPerItem > 0 && productQty > 0) {
+        const totalCost = deliveryCostPerItem * productQty;
+        if (Math.abs(deliveryCost - totalCost) > 0.01) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        }
+      }
+    });
+  }, [
+    formik.values.deliveries
+      ?.map((d) =>
+        d.products.reduce(
+          (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
+          0
+        )
+      )
+      .join(','),
+  ]);
+
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
+      formik.setFieldValue('products', []);
+      formik.setFieldValue('deliveries', []);
+    }
+  }, [formik.values.source_warehouse_id]);
+
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      formik.values.destination_warehouse_id &&
+      formik.values.source_warehouse_id ===
+        formik.values.destination_warehouse_id
+    ) {
+      formik.setFieldError(
+        'destination_warehouse_id',
+        'Gudang tujuan tidak boleh sama dengan gudang asal!'
+      );
+    } else {
+      if (
+        formik.errors.destination_warehouse_id ===
+        'Gudang tujuan tidak boleh sama dengan gudang asal!'
+      ) {
+        formik.setFieldError('destination_warehouse_id', undefined);
+      }
+    }
+  }, [
+    formik.values.source_warehouse_id,
+    formik.values.destination_warehouse_id,
+    formik.errors.destination_warehouse_id,
+  ]);
+
   return (
     <>
       <section className='w-full'>
-        <FormHeader
-          type={type}
-          title='Movement'
-          backUrl='/inventory/movement'
-        />
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/inventory/movement'
+            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'>
+            {type === 'add' && 'Tambah Movement'}
+            {type === 'edit' && 'Edit Movement'}
+            {type === 'detail' && 'Detail Movement'}
+          </h1>
+        </header>
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Top card - Movement details */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                <TextInput
-                  required
-                  label='Alasan Transfer'
-                  name='transfer_reason'
-                  value={formik.values.transfer_reason}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_reason &&
-                    Boolean(formik.errors.transfer_reason)
-                  }
-                  errorMessage={formik.errors.transfer_reason}
-                  readOnly={type === 'detail'}
-                />
-                <TextInput
-                  required
-                  label='Tanggal Transfer'
-                  type='date'
-                  name='transfer_date'
-                  value={formik.values.transfer_date}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_date &&
-                    Boolean(formik.errors.transfer_date)
-                  }
-                  errorMessage={formik.errors.transfer_date}
-                  readOnly={type === 'detail'}
-                />
-              </div>
+          <Card
+            title='Detail Movement'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <TextInput
+                required
+                label='Alasan Transfer'
+                name='transfer_reason'
+                placeholder='Masukkan alasan transfer...'
+                value={formik.values.transfer_reason}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_reason &&
+                  Boolean(formik.errors.transfer_reason)
+                }
+                errorMessage={formik.errors.transfer_reason}
+                readOnly={type === 'detail'}
+              />
+              <DateInput
+                required
+                label='Tanggal Transfer'
+                name='transfer_date'
+                value={formik.values.transfer_date}
+                onChange={handleTransferDateChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_date &&
+                  Boolean(formik.errors.transfer_date)
+                }
+                errorMessage={formik.errors.transfer_date}
+                readOnly={type === 'detail'}
+              />
             </div>
-          </div>
+          </Card>
 
           {/* Warehouse cards */}
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
-            <div className='card bg-base-100 shadow'>
-              <div className='card-body space-y-4'>
-                <h3 className='card-title text-lg'>Gudang Asal</h3>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  value={formik.values.source_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('source_warehouse', true);
-                    formik.setFieldValue('source_warehouse', val);
-                    formik.setFieldTouched('source_warehouse_id', true);
-                    formik.setFieldValue(
-                      'source_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+            <Card
+              title='Gudang Asal'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang asal...'
+                value={formik.values.source_warehouse}
+                onChange={(val) => {
+                  const newSourceWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
+
+                  if (newSourceWarehouseId) {
+                    if (
+                      newSourceWarehouseId ===
+                      formik.values.destination_warehouse_id
+                    ) {
+                      const destinationWarehouseName =
+                        (
+                          formik.values
+                            .destination_warehouse as WarehouseOptionType
+                        )?.label || 'gudang tujuan';
+
+                      toast.error(
+                        `Tidak bisa memilih gudang yang sama. Gudang asal tidak boleh sama dengan ${destinationWarehouseName}.`
+                      );
+                      return;
+                    }
+                  }
+
+                  formik.setFieldTouched('source_warehouse', true);
+                  formik.setFieldValue('source_warehouse', val);
+                  formik.setFieldTouched('source_warehouse_id', true);
+                  formik.setFieldValue(
+                    'source_warehouse_id',
+                    newSourceWarehouseId
+                  );
+
+                  if (
+                    formik.errors.destination_warehouse_id ===
+                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                  ) {
+                    formik.setFieldError('destination_warehouse_id', undefined);
+                  }
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.source_warehouse_id &&
+                  Boolean(formik.errors.source_warehouse_id)
+                }
+                errorMessage={formik.errors.source_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.source_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.source_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='source_warehouse_area'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.source_warehouse_id &&
-                    Boolean(formik.errors.source_warehouse_id)
-                  }
-                  errorMessage={formik.errors.source_warehouse_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='source_warehouse_area'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='source_warehouse_location'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className='card bg-base-100 shadow'>
-              <div className='card-body space-y-4'>
-                <h3 className='card-title text-lg'>Gudang Tujuan</h3>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  value={formik.values.destination_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('destination_warehouse', true);
-                    formik.setFieldValue('destination_warehouse', val);
-                    formik.setFieldTouched('destination_warehouse_id', true);
-                    formik.setFieldValue(
-                      'destination_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+                <TextInput
+                  label='Lokasi'
+                  name='source_warehouse_location'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.destination_warehouse_id &&
-                    Boolean(formik.errors.destination_warehouse_id)
-                  }
-                  errorMessage={
-                    formik.errors.destination_warehouse_id as string
-                  }
-                  isDisabled={type === 'detail'}
-                  isClearable
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='destination_warehouse_area'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='destination_warehouse_location'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
               </div>
-            </div>
+            </Card>
+
+            <Card
+              title='Gudang Tujuan'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang tujuan...'
+                value={formik.values.destination_warehouse}
+                onChange={(val) => {
+                  const newDestinationWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
+
+                  if (newDestinationWarehouseId) {
+                    if (
+                      newDestinationWarehouseId ===
+                      formik.values.source_warehouse_id
+                    ) {
+                      const sourceWarehouseName =
+                        (formik.values.source_warehouse as WarehouseOptionType)
+                          ?.label || 'gudang asal';
+
+                      toast.error(
+                        `Tidak bisa memilih gudang yang sama. Gudang tujuan tidak boleh sama dengan ${sourceWarehouseName}.`
+                      );
+                      return;
+                    }
+                  }
+
+                  formik.setFieldTouched('destination_warehouse', true);
+                  formik.setFieldValue('destination_warehouse', val);
+                  formik.setFieldTouched('destination_warehouse_id', true);
+                  formik.setFieldValue(
+                    'destination_warehouse_id',
+                    newDestinationWarehouseId
+                  );
+
+                  if (
+                    formik.errors.destination_warehouse_id ===
+                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                  ) {
+                    formik.setFieldError('destination_warehouse_id', undefined);
+                  }
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.destination_warehouse_id &&
+                  Boolean(formik.errors.destination_warehouse_id)
+                }
+                errorMessage={formik.errors.destination_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.destination_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.destination_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='destination_warehouse_area'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+                <TextInput
+                  label='Lokasi'
+                  name='destination_warehouse_location'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+              </div>
+            </Card>
           </div>
 
           {/* Products table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Produk</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
+          <Card
+            title='Produk'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-products'
+                          checked={
+                            formik.values.products?.length ===
+                              selectedProducts.length &&
+                            formik.values.products?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedProducts(
+                                formik.values.products?.map((_, idx) => idx) ??
+                                  []
+                              );
+                            } else {
+                              setSelectedProducts([]);
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.products?.map((product, idx) => (
+                    <tr key={`product-row-${idx}-${product.product_id}`}>
                       {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-products'
-                              checked={
-                                formik.values.products?.length ===
-                                  selectedProducts.length &&
-                                formik.values.products?.length > 0
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`product-${idx}`}
+                            checked={selectedProducts.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedProducts([...selectedProducts, idx]);
+                              } else {
+                                setSelectedProducts(
+                                  selectedProducts.filter((i) => i !== idx)
+                                );
                               }
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedProducts(
-                                    formik.values.products?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedProducts([]);
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </div>
-                        </th>
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.products?.map((product, idx) => (
-                      <tr key={`product-row-${idx}-${product.product_id}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
-                              <CheckboxInput
-                                name={`product-${idx}`}
-                                checked={selectedProducts.includes(idx)}
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  if (e.target.checked) {
-                                    setSelectedProducts([
-                                      ...selectedProducts,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedProducts(
-                                      selectedProducts.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                classNames={{
-                                  wrapper: 'flex justify-center',
-                                  checkbox: 'checkbox checkbox-sm',
-                                }}
+                      <td>
+                        <SelectInput
+                          required
+                          value={product.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `products.${idx}.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `products.${idx}.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product_id`,
+                              (val as ProductWarehouseOptionType)?.value
+                            );
+                          }}
+                          options={productWarehouseOptions}
+                          onInputChange={setProductWarehouseSelectInputValue}
+                          isLoading={isLoadingProductWarehouses}
+                          isDisabled={
+                            type === 'detail' ||
+                            !formik.values.source_warehouse_id
+                          }
+                          placeholder={
+                            !formik.values.source_warehouse_id
+                              ? 'Pilih gudang asal terlebih dahulu...'
+                              : 'Pilih produk...'
+                          }
+                          isClearable
+                          {...isRepeaterInputError(
+                            'products',
+                            'product_id',
+                            idx
+                          )}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`products.${idx}.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={product.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          bottomLabel={getProductQtyBottomLabel(idx)}
+                          isError={
+                            isRepeaterInputError('products', 'product_qty', idx)
+                              .isError || Boolean(getProductQtyError(idx))
+                          }
+                          errorMessage={
+                            isRepeaterInputError('products', 'product_qty', idx)
+                              .errorMessage ||
+                            getProductQtyError(idx) ||
+                            undefined
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeProduct(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
                               />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={product.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `products.${idx}.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `products.${idx}.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product_id`,
-                                (val as ProductWarehouseOptionType)?.value
-                              );
-                            }}
-                            options={productWarehouseOptions}
-                            onInputChange={setProductWarehouseSelectInputValue}
-                            isLoading={isLoadingProductWarehouses}
-                            isDisabled={
-                              type === 'detail' ||
-                              !formik.values.source_warehouse_id
-                            }
-                            placeholder={
-                              !formik.values.source_warehouse_id
-                                ? 'Pilih gudang asal terlebih dahulu'
-                                : 'Pilih produk'
-                            }
-                            isClearable
-                            {...isRepeaterInputError(
-                              'products',
-                              'product_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
+                            </Button>
+                          </div>
                         </td>
-                        <td>
-                          <TextInput
-                            required
-                            type='number'
-                            name={`products.${idx}.product_qty`}
-                            value={product.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            endAdornment={getProductQtyAdornment(idx)}
-                            isError={
-                              isRepeaterInputError(
-                                'products',
-                                'product_qty',
-                                idx
-                              ).isError || Boolean(getProductQtyError(idx))
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'products',
-                                'product_qty',
-                                idx
-                              ).errorMessage ||
-                              getProductQtyError(idx) ||
-                              undefined
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeProduct(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedProducts.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={bulkRemoveProduct}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Hapus Produk Terpilih ({selectedProducts.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedProducts.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addProduct}
+                    color='error'
+                    onClick={bulkRemoveProduct}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Produk
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Produk Terpilih ({selectedProducts.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addProduct}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Produk
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Deliveries table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-8'>Pengiriman</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
+          <Card
+            title='Pengiriman'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-8',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-deliveries'
+                          checked={
+                            formik.values.deliveries?.length ===
+                              selectedDeliveries.length &&
+                            formik.values.deliveries?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedDeliveries(
+                                formik.values.deliveries?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedDeliveries([]);
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Supplier
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Plat Nomor
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Dokumen</th>
+                    <th>
+                      Biaya Pengiriman (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Biaya Per Item (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Nama Sopir
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.deliveries?.map((delivery, idx) => (
+                    <tr key={`delivery-row-${idx}`}>
                       {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-deliveries'
-                              checked={
-                                formik.values.deliveries?.length ===
-                                  selectedDeliveries.length &&
-                                formik.values.deliveries?.length > 0
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`delivery-${idx}`}
+                            checked={selectedDeliveries.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedDeliveries([
+                                  ...selectedDeliveries,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedDeliveries(
+                                  selectedDeliveries.filter((i) => i !== idx)
+                                );
                               }
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedDeliveries(
-                                    formik.values.deliveries?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedDeliveries([]);
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </div>
-                        </th>
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Supplier
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Plat Nomor
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Dokumen</th>
-                      <th>
-                        Biaya Pengiriman (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Biaya Per Item (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Nama Sopir
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.deliveries?.map((delivery, idx) => (
-                      <tr key={`delivery-row-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
-                              <CheckboxInput
-                                name={`delivery-${idx}`}
-                                checked={selectedDeliveries.includes(idx)}
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  if (e.target.checked) {
-                                    setSelectedDeliveries([
-                                      ...selectedDeliveries,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedDeliveries(
-                                      selectedDeliveries.filter(
-                                        (i) => i !== idx
-                                      )
-                                    );
-                                  }
-                                }}
-                                classNames={{
-                                  wrapper: 'flex justify-center',
-                                  checkbox: 'checkbox checkbox-sm',
-                                }}
-                              />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={delivery.products[0]?.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={getFilteredProductWarehouseOptions()}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .isError
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            type='number'
-                            name={`deliveries.${idx}.products.0.product_qty`}
-                            value={delivery.products[0]?.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .isError || Boolean(getDeliveryQtyError(idx, 0))
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .errorMessage ||
-                              getDeliveryQtyError(idx, 0) ||
-                              undefined
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            value={delivery.supplier}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={supplierOptions}
-                            onInputChange={setSupplierSelectInputValue}
-                            isLoading={isLoadingSuppliers}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'supplier_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.vehicle_plate`}
-                            value={delivery.vehicle_plate}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'vehicle_plate',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          {type === 'detail' ? (
-                            <>
-                              <div className='flex flex-col items-start gap-2'>
-                                <Button
-                                  color='primary'
-                                  className='w-full min-w-52 flex items-center justify-center gap-2'
-                                  disabled={!delivery.document_path}
-                                  href={delivery.document_path ?? undefined}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                >
-                                  {delivery.document_path ? (
-                                    <>
-                                      <Icon
-                                        icon='material-symbols:file-open-outline'
-                                        width={20}
-                                        height={20}
-                                      />
-                                      Lihat Dokumen
-                                    </>
-                                  ) : (
-                                    '-'
-                                  )}
-                                </Button>
-                              </div>
-                            </>
-                          ) : (
-                            <FileInput
-                              name={`deliveries.${idx}.document`}
-                              onChange={(e) => {
-                                const file = e.target.files?.[0];
-                                if (file) {
-                                  if (file.size > 2 * 1024 * 1024) {
-                                    toast.error(
-                                      'Ukuran dokumen maksimal 2 MB!'
-                                    );
-                                    e.target.value = '';
-                                    return;
-                                  }
-                                  formik.setFieldValue(
-                                    `deliveries.${idx}.document`,
-                                    file
-                                  );
-                                }
-                              }}
-                              {...isRepeaterInputError(
-                                'deliveries',
-                                'document',
-                                idx
-                              )}
-                              className={{
-                                wrapper:
-                                  'w-full min-w-72 md:w-min-80 lg:w-min-96',
-                              }}
-                            />
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih produk...'
+                          value={delivery.products[0]?.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={getFilteredProductWarehouseOptions()}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .isError
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .errorMessage
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.products.0.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={delivery.products[0]?.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .isError || Boolean(getDeliveryQtyError(idx, 0))
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .errorMessage ||
+                            getDeliveryQtyError(idx, 0) ||
+                            undefined
+                          }
+                          bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-48',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih supplier...'
+                          value={delivery.supplier}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={supplierOptions}
+                          onInputChange={setSupplierSelectInputValue}
+                          isLoading={isLoadingSuppliers}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'supplier_id',
+                            idx
                           )}
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost`}
-                            value={delivery.delivery_cost || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostChange(idx, e.target.value)
-                            }
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost_per_item`}
-                            value={delivery.delivery_cost_per_item || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostPerItemChange(
-                                idx,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost_per_item',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.driver_name`}
-                            value={delivery.driver_name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'driver_name',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.vehicle_plate`}
+                          placeholder='Masukkan plat nomor...'
+                          value={delivery.vehicle_plate}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'vehicle_plate',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        {type === 'detail' ? (
+                          <>
                             <div className='flex flex-col items-start gap-2'>
                               <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeDelivery(idx)}
+                                color='primary'
+                                className='w-full min-w-52 flex items-center justify-center gap-2'
+                                disabled={!delivery.document_path}
+                                href={delivery.document_path ?? undefined}
+                                target='_blank'
+                                rel='noopener noreferrer'
                               >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
+                                {delivery.document_path ? (
+                                  <>
+                                    <Icon
+                                      icon='material-symbols:file-open-outline'
+                                      width={20}
+                                      height={20}
+                                    />
+                                    Lihat Dokumen
+                                  </>
+                                ) : (
+                                  '-'
+                                )}
                               </Button>
                             </div>
-                          </td>
+                          </>
+                        ) : (
+                          <FileInput
+                            name={`deliveries.${idx}.document`}
+                            onChange={(e) => {
+                              const file = e.target.files?.[0];
+                              if (file) {
+                                if (file.size > 2 * 1024 * 1024) {
+                                  toast.error('Ukuran dokumen maksimal 2 MB!');
+                                  e.target.value = '';
+                                  return;
+                                }
+                                formik.setFieldValue(
+                                  `deliveries.${idx}.document`,
+                                  file
+                                );
+                              }
+                            }}
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'document',
+                              idx
+                            )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                            }}
+                          />
                         )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedDeliveries.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={bulkRemoveDelivery}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Hapus Pengiriman Terpilih ({selectedDeliveries.length})
-                    </Button>
-                  )}
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost`}
+                          placeholder='Masukkan biaya pengiriman...'
+                          value={delivery.delivery_cost || ''}
+                          onChange={handleDeliveryCostChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost_per_item`}
+                          placeholder='Masukkan biaya per item...'
+                          value={delivery.delivery_cost_per_item || ''}
+                          onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost_per_item',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.driver_name`}
+                          placeholder='Masukkan nama sopir...'
+                          value={delivery.driver_name}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'driver_name',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDelivery(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedDeliveries.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addDelivery}
+                    color='error'
+                    onClick={bulkRemoveDelivery}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Pengiriman
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Pengiriman Terpilih ({selectedDeliveries.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addDelivery}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Pengiriman
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Action buttons */}
-          <FormActions<MovementFormValues>
-            type={type}
-            formik={formik}
-            disableSubmit={hasInvalidQty || hasExceededStock}
-          />
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={
+                    hasInvalidQty ||
+                    hasExceededStock ||
+                    !formik.isValid ||
+                    formik.isSubmitting ||
+                    (formik.values.source_warehouse_id ===
+                      formik.values.destination_warehouse_id &&
+                      formik.values.source_warehouse_id !== 0 &&
+                      formik.values.destination_warehouse_id !== 0)
+                  }
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
 
           {movementFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
deleted file mode 100644
index 0ad31e38..00000000
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'react-hot-toast';
-import { useModal } from '@/components/Modal';
-import { MovementApi } from '@/services/api/inventory';
-import {
-  CreateMovementPayload,
-  UpdateMovementPayload,
-} from '@/types/api/inventory/movement';
-import { isResponseError } from '@/lib/api-helper';
-
-export const useMovementFormHandlers = (initialValuesId?: number) => {
-  const router = useRouter();
-  const deleteModal = useModal();
-  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const createMovementHandler = useCallback(
-    async (payload: CreateMovementPayload, documents: File[] = []) => {
-      const formData = new FormData();
-      formData.append('data', JSON.stringify(payload));
-      documents.forEach((file, index) => {
-        formData.append(`documents[${index}]`, file);
-      });
-
-      const res = await MovementApi.create(
-        formData as unknown as CreateMovementPayload
-      );
-      if (isResponseError(res)) {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
-
-  const updateMovementHandler = useCallback(
-    async (
-      movementId: number,
-      payload: UpdateMovementPayload,
-      documents: File[] = []
-    ) => {
-      let finalPayload: UpdateMovementPayload | FormData;
-
-      if (documents.length > 0) {
-        const formData = new FormData();
-        formData.append('data', JSON.stringify(payload));
-        documents.forEach((file, index) => {
-          formData.append(`documents[${index}]`, file);
-        });
-
-        finalPayload = formData as unknown as UpdateMovementPayload;
-      } else {
-        finalPayload = payload;
-      }
-
-      const res = await MovementApi.update(movementId, finalPayload);
-      if (res?.status === 'error') {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.refresh();
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
-
-  const deleteMovementClickHandler = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
-
-  const confirmationModalDeleteClickHandler = useCallback(async () => {
-    if (!initialValuesId) return;
-
-    setIsDeleteLoading(true);
-    await MovementApi.delete(initialValuesId);
-    deleteModal.closeModal();
-    toast.success('Successfully delete Movement!');
-    setIsDeleteLoading(false);
-    router.push('/inventory/movement');
-  }, [deleteModal, initialValuesId, router]);
-
-  return {
-    deleteModal,
-    movementFormErrorMessage,
-    isDeleteLoading,
-    createMovementHandler,
-    updateMovementHandler,
-    deleteMovementClickHandler,
-    confirmationModalDeleteClickHandler,
-  };
-};
diff --git a/src/components/pages/inventory/product/InventoryProductTable.tsx b/src/components/pages/inventory/product/InventoryProductTable.tsx
new file mode 100644
index 00000000..3c188d17
--- /dev/null
+++ b/src/components/pages/inventory/product/InventoryProductTable.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import { InventoryProductApi } from '@/services/api/inventory';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { InventoryProduct } from '@/types/api/inventory/product';
+import { Icon } from '@iconify/react';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
+import { ChangeEventHandler, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<InventoryProduct, unknown>;
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <Button
+      href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+  </RowOptionsMenuWrapper>
+);
+
+const InventoryProductTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const { data: inventoryProducts, isLoading } = useSWR(
+    `${InventoryProductApi.basePath}${getTableFilterQueryString()}`,
+    InventoryProductApi.getAllFetcher
+  );
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
+  const columns: ColumnDef<InventoryProduct>[] = useMemo(
+    () => [
+      {
+        header: '#',
+        cell: (props) =>
+          tableFilterState.pageSize * (tableFilterState.page - 1) +
+          props.row.index +
+          1,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Nama',
+      },
+      {
+        accessorKey: 'product_price',
+        header: 'Harga Beli',
+        cell: (props) => {
+          return props.row.original.product_price
+            ? formatCurrency(props.row.original.product_price)
+            : '-';
+        },
+      },
+      {
+        accessorKey: 'selling_price',
+        header: 'Harga Jual',
+        cell: (props) => {
+          return props.row.original.selling_price
+            ? formatCurrency(props.row.original.selling_price)
+            : '-';
+        },
+      },
+      {
+        accessorFn: (row) => row.product_category.name,
+        header: 'Kategori',
+      },
+      {
+        accessorFn: (row) => row.total_stock,
+        header: 'Stok',
+        cell: (props) => {
+          return props.row.original.total_stock
+            ? formatNumber(props.row.original.total_stock)
+            : '0';
+        },
+      },
+      {
+        accessorFn: (row) => row.uom.name,
+        header: 'Satuan',
+      },
+      {
+        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 - 2;
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu type='dropdown' props={props} />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu type='collapse' props={props} />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'></div>
+          </div>
+
+          <div className='flex justify-between items-end gap-4'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Produk'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<InventoryProduct>
+          data={
+            isResponseSuccess(inventoryProducts) ? inventoryProducts?.data : []
+          }
+          columns={columns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(inventoryProducts) &&
+                inventoryProducts?.data?.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',
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default InventoryProductTable;
diff --git a/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx b/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx
new file mode 100644
index 00000000..ad523929
--- /dev/null
+++ b/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx
@@ -0,0 +1,118 @@
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import StockLogTable from '@/components/pages/inventory/product/detail/StockLogTable';
+import StockProductWarehouseTable from '@/components/pages/inventory/product/detail/StockProductWarehouseTable';
+import { formatCurrency, formatNumber } from '@/lib/helper';
+import { InventoryProduct } from '@/types/api/inventory/product';
+import { useMemo } from 'react';
+
+const InventoryProductDetail = ({
+  inventoryProduct,
+}: {
+  inventoryProduct?: InventoryProduct;
+}) => {
+  const stockLogs = useMemo(() => {
+    return (
+      inventoryProduct?.product_warehouses?.flatMap(
+        (warehouse) => warehouse.stock_logs || []
+      ) || []
+    );
+  }, [inventoryProduct]);
+
+  return (
+    <div className='flex flex-col gap-4 p-4'>
+      <FormHeader
+        title='Detail Persediaan Produk'
+        backUrl='/inventory/product'
+      />
+
+      <Card
+        title='Informasi Produk'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full mt-4',
+        }}
+      >
+        <div className='grid grid-cols-2 gap-4'>
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td className='font-semibold'>SKU</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.sku}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Produk</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Kategory</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.product_category.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Satuan</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.uom.name}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td className='font-semibold'>Harga Jual</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.selling_price
+                      ? formatCurrency(inventoryProduct.selling_price)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Harga Beli</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.product_price
+                      ? formatCurrency(inventoryProduct?.product_price)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Pajak</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.tax
+                      ? formatCurrency(inventoryProduct?.tax)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Stok</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.total_stock
+                      ? formatNumber(inventoryProduct?.total_stock)
+                      : '0'}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Card>
+
+      <StockProductWarehouseTable
+        productWarehouseStock={inventoryProduct?.product_warehouses ?? []}
+      />
+
+      <StockLogTable stockLogs={stockLogs} />
+    </div>
+  );
+};
+
+export default InventoryProductDetail;
diff --git a/src/components/pages/inventory/product/detail/StockLogTable.tsx b/src/components/pages/inventory/product/detail/StockLogTable.tsx
new file mode 100644
index 00000000..42f7bc29
--- /dev/null
+++ b/src/components/pages/inventory/product/detail/StockLogTable.tsx
@@ -0,0 +1,81 @@
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import { StockLog } from '@/types/api/inventory/product';
+
+const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
+  return (
+    <Card
+      title='Informasi Stock Produk'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<StockLog>
+        data={stockLogs}
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+          },
+          {
+            header: 'Tanggal',
+            accessorKey: 'created_at',
+            cell: (props) => {
+              return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
+            },
+          },
+          {
+            header: 'Peningkatan',
+            accessorKey: 'increase',
+            cell: (props) => {
+              return formatNumber(props.row.original.increase);
+            },
+          },
+          {
+            header: 'Penurunan',
+            accessorKey: 'decrease',
+            cell: (props) => {
+              return formatNumber(props.row.original.decrease);
+            },
+          },
+          {
+            header: 'Jenis Transaksi',
+            accessorKey: 'loggable_type',
+            cell: (props) => {
+              return props.row.original.loggable_type
+                ? formatTitleCase(props.row.original.loggable_type)
+                : '-';
+            },
+          },
+          {
+            header: 'Catatan',
+            accessorKey: 'notes',
+            cell: (props) => {
+              return props.row.original.notes ? props.row.original.notes : '-';
+            },
+          },
+          {
+            header: 'Oleh',
+            accessorKey: 'created_user.name',
+          },
+        ]}
+        className={{
+          containerClassName: 'mt-6',
+          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',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default StockLogTable;
diff --git a/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx
new file mode 100644
index 00000000..6f48f7cd
--- /dev/null
+++ b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx
@@ -0,0 +1,65 @@
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import { formatNumber } from '@/lib/helper';
+import {
+  InventoryProduct,
+  ProductWarehouseStock,
+} from '@/types/api/inventory/product';
+
+const StockProductWarehouseTable = ({
+  productWarehouseStock,
+}: {
+  productWarehouseStock?: ProductWarehouseStock[];
+}) => {
+  return (
+    <Card
+      title='Informasi Gudang'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<ProductWarehouseStock>
+        data={productWarehouseStock ?? []}
+        columns={[
+          {
+            header: 'Nama Gudang',
+            accessorKey: 'warehouse_name',
+          },
+          {
+            header: 'Lokasi',
+            accessorKey: 'location',
+            cell: (props) => {
+              return props.row.original.location != null
+                ? props.row.original.location.name
+                : '-';
+            },
+          },
+          {
+            header: 'Stok',
+            accessorFn(row) {
+              return row.current_stock;
+            },
+            cell: (props) => {
+              return formatNumber(props.row.original.current_stock);
+            },
+          },
+        ]}
+        className={{
+          containerClassName: 'mt-6',
+          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',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default StockProductWarehouseTable;
diff --git a/src/components/pages/marketing/MarketingTable.tsx b/src/components/pages/marketing/MarketingTable.tsx
new file mode 100644
index 00000000..d1d5940a
--- /dev/null
+++ b/src/components/pages/marketing/MarketingTable.tsx
@@ -0,0 +1,625 @@
+'use client';
+
+import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseSalesOrder, Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { CellContext, Row } from '@tanstack/react-table';
+import { useRouter } from 'next/navigation';
+import { useCallback, useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+  deliveryClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Marketing, unknown>;
+  deleteClickHandler: () => void;
+  deliveryClickHandler?: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`/marketing/detail?marketingId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+        {props.row.original.latest_approval.step_number != 1 && (
+          <Button
+            href={
+              props.row.original.latest_approval.step_number == 3
+                ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                : props.row.original.latest_approval.step_number == 2
+                  ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                  : undefined
+            }
+            onClick={() => {
+              if (props.row.original.latest_approval.step_number == 2) {
+                deliveryClickHandler?.();
+              }
+            }}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:truck' width={16} height={16} />
+            Deliver
+          </Button>
+        )}
+        {props.row.original.latest_approval.step_number != 3 && (
+          <Button
+            href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:pencil-outline' width={16} height={16} />
+            Edit
+          </Button>
+        )}
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
+        >
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const MarketingTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [approveAction, setApproveAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const router = useRouter();
+
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const productsModal = useModal();
+  const deliveryModal = useModal();
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  const approveClickHandler = () => {
+    setApproveAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
+  const deleteMarketingHandler = async () => {
+    const deleteMarketingRes = await MarketingApi.delete(
+      selectedItem?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.success(deleteMarketingRes?.message as string);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.error(deleteMarketingRes?.message as string);
+    }
+    refreshMarketing();
+    deleteModal.closeModal();
+  };
+
+  const allData = isResponseSuccess(marketing) ? marketing.data : [];
+  const selectedRowsData = allData.filter(
+    (row) => rowSelection[row.id.toString()]
+  );
+
+  const hasApprovable = selectedRowsData.some(
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
+  );
+  const hasRejectable = selectedRowsData.some(
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
+  );
+
+  const disableApprove = !hasApprovable;
+  const disableReject = !hasRejectable;
+
+  const idsToProcess =
+    approveAction === 'APPROVED'
+      ? selectedRowsData
+          .filter((row) => row.latest_approval.step_number === 1)
+          .map((row) => row.id)
+      : selectedRowsData
+          .filter((row) => row.latest_approval.step_number === 2)
+          .map((row) => row.id);
+
+  const approveMarketingHandler = async (notes: string) => {
+    let idsToProcess: number[] = [];
+
+    idsToProcess = selectedRowsData
+      .filter((row) => row.latest_approval.step_number === 1)
+      .map((row) => row.id);
+
+    if (idsToProcess.length === 0) {
+      toast.error(`Tidak ada data yang valid untuk di ${approveAction}.`);
+      confirmationModal.closeModal();
+      return;
+    }
+
+    const approveMarketingRes = await SalesOrderApi.bulkApprovals(
+      idsToProcess,
+      approveAction,
+      notes
+    );
+
+    if (isResponseSuccess(approveMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.success(approveMarketingRes?.message as string);
+      setRowSelection({});
+    }
+    if (isResponseError(approveMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.error(approveMarketingRes?.message as string);
+    }
+    refreshMarketing();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    const res = await SalesOrderApi.delivery(selectedItem?.id as number, notes);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refreshMarketing?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${selectedItem?.id}`
+    );
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const getRowCanSelect = (row: Row<Marketing>): boolean => {
+    const approval = row.original.latest_approval;
+    return approval?.step_number === 1 && approval?.action !== 'REJECTED';
+  };
+
+  return (
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <TableToolbar
+            addButton={{
+              href: '/marketing/add/sales-orders',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+              disabled={disableApprove}
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+              disabled={disableReject}
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          >
+            {/* select multiple product */}
+            <SelectInput
+              label='Product'
+              isClearable
+              placeholder='Pilih product'
+              options={[]}
+              isMulti
+            />
+            {/* select status */}
+            <SelectInput
+              label='Status'
+              isClearable
+              placeholder='Pilih status'
+              options={[]}
+            />
+            {/* select customer */}
+            <SelectInput
+              label='Customer'
+              isClearable
+              placeholder='Pilih customer'
+              options={[]}
+            />
+          </TableRowSizeSelector>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={allData}
+          columns={[
+            {
+              id: 'select',
+              header: ({ table }) => {
+                const allRows = table.getRowModel().rows;
+                const selectableRows = allRows.filter(getRowCanSelect);
+
+                const allSelected =
+                  selectableRows.length > 0 &&
+                  selectableRows.every((row) => row.getIsSelected());
+
+                const someSelected =
+                  selectableRows.some((row) => row.getIsSelected()) &&
+                  !allSelected;
+
+                const toggleSelectableRows = () => {
+                  const shouldSelect = !allSelected;
+                  selectableRows.forEach((row) =>
+                    row.toggleSelected(shouldSelect)
+                  );
+                };
+
+                return (
+                  <div className='w-full flex flex-row justify-center'>
+                    <CheckboxInput
+                      name='allRow'
+                      checked={allSelected}
+                      indeterminate={someSelected}
+                      onChange={toggleSelectableRows}
+                      disabled={selectableRows.length === 0}
+                    />
+                  </div>
+                );
+              },
+              cell: ({ row }) => {
+                const canSelect = getRowCanSelect(row);
+                return (
+                  <div>
+                    <CheckboxInput
+                      name='row'
+                      checked={row.getIsSelected()}
+                      disabled={!canSelect}
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
+                    />
+                  </div>
+                );
+              },
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+              cell: (props) => {
+                return formatDate(props.row.original.so_date, 'DD MMM yyyy');
+              },
+            },
+            {
+              accessorKey: 'latest_approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorFn: (row) =>
+                row.sales_order
+                  ?.map((product) => product.total_price)
+                  .reduce((a, b) => a + b, 0) ?? 0,
+              header: 'Grand Total',
+              cell: (props) => {
+                return formatCurrency(
+                  props.row.original?.sales_order
+                    ?.map((product) => product.total_price)
+                    .reduce((a, b) => a + b, 0) ?? 0
+                );
+              },
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => {
+                if (props?.row?.original?.sales_order?.length) {
+                  if (props?.row?.original?.sales_order?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.sales_order?.length} Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.sales_order[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
+            },
+            {
+              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 - 2;
+
+                const deleteClickHandler = () => {
+                  setSelectedItem(props.row.original);
+                  deleteModal.openModal();
+                };
+
+                const deliveryClickHandler = () => {
+                  setSelectedItem(props.row.original);
+                  deliveryModal.openModal();
+                };
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                          deliveryClickHandler={deliveryClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                          deliveryClickHandler={deliveryClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            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',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approveAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan (${idsToProcess.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: confirmationModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'APPROVED' ? 'success' : 'error',
+          onClick: approveMarketingHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: deleteModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ${selectedItem?.so_number}?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<BaseSalesOrder>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.sales_order ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            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',
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+export default MarketingTable;
diff --git a/src/components/pages/marketing/detail/MarketingDetail.tsx b/src/components/pages/marketing/detail/MarketingDetail.tsx
new file mode 100644
index 00000000..b1cbb70c
--- /dev/null
+++ b/src/components/pages/marketing/detail/MarketingDetail.tsx
@@ -0,0 +1,477 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import {
+  BaseDelivery,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+
+const MarketingDetail = ({
+  initialValues,
+  refresh,
+}: {
+  initialValues?: Marketing;
+  refresh?: () => void;
+}) => {
+  const router = useRouter();
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [grandTotal, setGrandTotal] = useState(
+    initialValues?.sales_order
+      ?.map((item) => item.total_price)
+      .reduce((a, b) => a + b, 0)
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+  const {
+    approvals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.latest_approval,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: initialValues?.id as number as unknown as string,
+  });
+
+  const approveClickHandler = () => {
+    setApprovalAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    const res = await MarketingApi.delete(initialValues?.id as number);
+    deleteModal.closeModal();
+    router.push('/marketing');
+    toast.success(res?.message as string);
+    refresh?.();
+    setIsLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction,
+      notes
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.delivery(
+      initialValues?.id as number,
+      notes
+    );
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+    );
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader title='Detail Sales Order' backUrl='/marketing' />
+        {!isLoadingApproval && approvals && (
+          <ApprovalSteps approvals={approvals} />
+        )}
+        <div className='flex-row flex gap-3'>
+          {initialValues?.latest_approval?.step_number == 1 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.latest_approval?.step_number != 1 && (
+            <Button
+              color='success'
+              href={
+                initialValues?.latest_approval?.step_number == 3
+                  ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                  : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+              }
+            >
+              <Icon icon='mdi:truck' width={24} height={24} />
+              {initialValues?.latest_approval?.step_number == 3
+                ? 'Edit '
+                : 'Tambah '}
+              Delivery Order
+            </Button>
+          )}
+        </div>
+
+        <Card
+          title='Informasi Penjualan'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.latest_approval?.step_name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>{formatCurrency(grandTotal as number)}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Dokumen</td>
+                  <td>:</td>
+                  <td>
+                    <SalesOrderExport data={initialValues} />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.sales_order && (
+          <Card
+            title='Informasi Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<BaseSalesOrder>
+              data={initialValues?.sales_order}
+              columns={[
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.sales_order &&
+                    initialValues?.sales_order?.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',
+              }}
+            />
+          </Card>
+        )}
+        {initialValues?.delivery_order && (
+          <Card
+            title='Informasi Pengiriman'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            {initialValues?.delivery_order.map((delivery, index) => {
+              return (
+                <div key={index}>
+                  <Card
+                    className={{
+                      wrapper: 'w-full',
+                    }}
+                  >
+                    <div className='flex flex-row gap-3'>
+                      <div className='font-semibold'>
+                        Nomor DO : {delivery.do_number}
+                      </div>
+                    </div>
+                    <Table<BaseDelivery>
+                      data={delivery.deliveries}
+                      columns={[
+                        {
+                          header: 'Tanggal Pengiriman',
+                          accessorFn() {
+                            return formatDate(
+                              delivery.delivery_date,
+                              'DD MMM yyyy'
+                            );
+                          },
+                        },
+                        {
+                          header: 'No. Polisi',
+                          accessorFn(row) {
+                            return formatVechicleNumber(row.vehicle_number);
+                          },
+                        },
+                        {
+                          header: 'Kandang',
+                          accessorFn(row) {
+                            return row.product_warehouse.warehouse.name;
+                          },
+                        },
+                        {
+                          header: 'Produk',
+                          accessorFn(row) {
+                            return row.product_warehouse.product.name;
+                          },
+                        },
+                        {
+                          header: 'Harga Satuan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.unit_price);
+                          },
+                        },
+                        {
+                          header: 'Total Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.total_weight);
+                          },
+                        },
+                        {
+                          header: 'Kuantitas',
+                          accessorFn(row) {
+                            return formatNumber(row.qty);
+                          },
+                        },
+                        {
+                          header: 'Avg. Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.avg_weight);
+                          },
+                        },
+                        {
+                          header: 'Total Penjualan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.total_price);
+                          },
+                        },
+                      ]}
+                      className={{
+                        containerClassName: cn({
+                          'mb-20':
+                            initialValues?.sales_order &&
+                            initialValues?.sales_order?.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',
+                      }}
+                    />
+                  </Card>
+                  <div className='flex flex-row gap-3 my-3'>
+                    <DeliveryOrderExport
+                      data={initialValues}
+                      deliveryOrder={delivery}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          {initialValues?.latest_approval?.step_number != 3 && (
+            <Button
+              color='warning'
+              type='button'
+              href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+            >
+              <Icon icon='mdi:pencil' width={24} height={24} />
+              Edit
+            </Button>
+          )}
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approvalAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingDetail;
diff --git a/src/components/pages/marketing/form/MarketingForm.schema.ts b/src/components/pages/marketing/form/MarketingForm.schema.ts
new file mode 100644
index 00000000..d81cdb9c
--- /dev/null
+++ b/src/components/pages/marketing/form/MarketingForm.schema.ts
@@ -0,0 +1,77 @@
+import * as Yup from 'yup';
+import {
+  SalesOrderProductFormValues,
+  SalesOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import {
+  DeliveryOrderProductFormValues,
+  DeliveryOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+
+type MarketingSchemaType = {
+  customer_id: number | undefined;
+  sales_person_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  so_date: string | undefined;
+  notes: string | undefined;
+};
+
+type SalesOrderSchemaType = MarketingSchemaType & {
+  sales_order: SalesOrderProductFormValues[];
+};
+
+type DeliveryOrderSchemaType = {
+  delivery_order: DeliveryOrderProductFormValues[];
+};
+
+export const SalesOrderSchema: Yup.ObjectSchema<SalesOrderSchemaType> =
+  Yup.object({
+    customer_id: Yup.number().required('Customer wajib diisi!'),
+    sales_person_id: Yup.number().required('Sales Person wajib diisi!'),
+    customer: Yup.object({
+      value: Yup.number().required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    so_date: Yup.string().required('Tanggal wajib diisi!'),
+    notes: Yup.string().required('Catatan wajib diisi!'),
+    sales_order: Yup.array()
+      .of(SalesOrderProductSchema)
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
+  Yup.object({
+    delivery_order: Yup.array()
+      .min(1, 'Pengiriman wajib diisi!')
+      .required('Pengiriman wajib diisi!')
+      .test(
+        'at-least-one-valid-row',
+        'Minimal ada satu baris pengiriman yang valid!',
+        function (items) {
+          if (!items || items.length === 0) return false;
+
+          // VALIDASI: minimal 1 item valid full
+          const itemSchema = DeliveryOrderProductSchema;
+
+          const hasValidItem = items.some((item) => {
+            if (!item) return false;
+            return itemSchema.isValidSync(item, { abortEarly: true });
+          });
+
+          return hasValidItem;
+        }
+      ),
+  });
+
+export const UpdateSalesOrderSchema = SalesOrderSchema;
+
+export type SalesOrderFormValues = Yup.InferType<typeof SalesOrderSchema>;
+
+export type DeliveryOrderFormValues = Yup.InferType<typeof DeliveryOrderSchema>;
diff --git a/src/components/pages/marketing/form/MarketingForm.tsx b/src/components/pages/marketing/form/MarketingForm.tsx
new file mode 100644
index 00000000..326eac72
--- /dev/null
+++ b/src/components/pages/marketing/form/MarketingForm.tsx
@@ -0,0 +1,784 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import {
+  BaseDeliveryOrder,
+  BaseSalesOrder,
+  CreateDeliveryOrderPayload,
+  CreateSalesOrderPayload,
+  CreateSalesOrderProductPayload,
+  Marketing,
+  UpdateDeliveryOrderPayload,
+  UpdateSalesOrderPayload,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Customer } from '@/types/api/master-data/customer';
+import { CustomerApi } from '@/services/api/master-data';
+import { useFormik } from 'formik';
+import {
+  DeliveryOrderFormValues,
+  DeliveryOrderSchema,
+  SalesOrderFormValues,
+  SalesOrderSchema,
+} from '@/components/pages/marketing/form/MarketingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  DeliveryOrderApi,
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+import DebouncedTextArea from '@/components/input/DebouncedTextArea';
+import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
+import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
+import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
+import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+
+const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
+const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
+const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
+const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
+
+// ================== EXTERNAL HELPER FUNCTION ==================
+export interface ProductCalculationFields {
+  qty: string | number | undefined;
+  unit_price: string | number | undefined;
+  total_price: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_weight: string | number | undefined;
+}
+
+export const SalesProductToFieldValues = (
+  product: BaseSalesOrder
+): SalesOrderProductFormValues => {
+  return {
+    id: product.id,
+    vehicle_number: product.vehicle_number,
+    kandang_id: product.product_warehouse.warehouse.id,
+    kandang: {
+      value: product.product_warehouse.warehouse.id,
+      label: product.product_warehouse.warehouse.name,
+    },
+    product_warehouse: {
+      value: product.product_warehouse.id,
+      label: product.product_warehouse.product.name,
+    },
+    product_warehouse_id: product.product_warehouse.id,
+    unit_price: product.unit_price,
+    total_weight: product.total_weight,
+    qty: product.qty,
+    avg_weight: product.avg_weight,
+    total_price: product.total_price,
+  };
+};
+export const DeliveryProductToFieldValues = (
+  salesOrders: BaseSalesOrder[],
+  delivery: BaseDeliveryOrder
+): DeliveryOrderProductFormValues[] => {
+  const data = delivery.deliveries.map((item) => {
+    const soId = salesOrders.find(
+      (so) => so.product_warehouse.id === item.product_warehouse.id
+    )?.id;
+    return {
+      id: soId,
+      unit_price: item.unit_price,
+      total_weight: item.total_weight,
+      qty: item.qty,
+      avg_weight: item.avg_weight,
+      total_price: item.total_price,
+      vehicle_number: item.vehicle_number,
+      delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
+      do_number: delivery.do_number,
+      marketing_product_id: soId,
+      marketing_product: {
+        id: soId,
+        vehicle_number: item.vehicle_number,
+        kandang_id: item.product_warehouse.warehouse.id,
+        kandang: {
+          value: item.product_warehouse.warehouse.id,
+          label: item.product_warehouse.warehouse.name,
+        },
+        product_warehouse: {
+          value: item.product_warehouse.id,
+          label: item.product_warehouse.product.name,
+        },
+        product_warehouse_id: item.product_warehouse.id,
+        unit_price: item.unit_price,
+        total_weight: item.total_weight,
+        qty: item.qty,
+        avg_weight: item.avg_weight,
+        total_price: item.total_price,
+      },
+    } as DeliveryOrderProductFormValues;
+  });
+  return data;
+};
+export const mergeSOwithDO = (
+  salesOrders: SalesOrderProductFormValues[],
+  deliveryOrders: DeliveryOrderProductFormValues[]
+): DeliveryOrderProductFormValues[] => {
+  return salesOrders.map((so) => {
+    const delivery = deliveryOrders.find(
+      (d) => d?.marketing_product_id === so.id
+    );
+
+    return {
+      ...so, // nilai dasar dari sales order
+      marketing_product_id: so.id,
+      delivery_date: delivery?.delivery_date || undefined,
+      do_number: delivery?.do_number || undefined,
+      vehicle_number: delivery?.vehicle_number || so.vehicle_number,
+      unit_price: delivery?.unit_price,
+      total_weight: delivery?.total_weight,
+      qty: delivery?.qty,
+      avg_weight: delivery?.avg_weight,
+      total_price: delivery?.total_price,
+      marketing_product: so, // jika ada, override
+    } as DeliveryOrderProductFormValues;
+  });
+};
+export const recalculate = (
+  field: string,
+  values: ProductCalculationFields
+) => {
+  const { qty, unit_price, total_price, avg_weight, total_weight } = values;
+  const result: Partial<ProductCalculationFields> = {};
+  if (field == 'unit_price' || field == 'total_price' || field == 'qty') {
+    if (qty && unit_price && (field == 'unit_price' || field == 'qty')) {
+      result.total_price = Number(qty) * Number(unit_price);
+    } else if (qty && total_price && field == 'total_price') {
+      result.unit_price = Number(total_price) / Number(qty);
+    }
+  }
+  if (field == 'avg_weight' || field == 'total_weight' || field == 'qty') {
+    if (qty && avg_weight && (field == 'avg_weight' || field == 'qty')) {
+      result.total_weight = Number(qty) * Number(avg_weight);
+    } else if (qty && total_weight && field == 'total_weight') {
+      result.avg_weight = Number(total_weight) / Number(qty);
+    }
+  }
+  return result;
+};
+export const getSubmitField = (values: ProductCalculationFields) => {
+  const { qty, unit_price, total_price, avg_weight, total_weight } = values;
+
+  // Harga logic
+  if (qty && unit_price && !total_price) {
+    return 'unit_price';
+  }
+  if (qty && total_price && !unit_price) {
+    return 'total_price';
+  }
+
+  // Bobot logic
+  if (qty && avg_weight && !total_weight) {
+    return 'avg_weight';
+  }
+  if (qty && total_weight && !avg_weight) {
+    return 'total_weight';
+  }
+
+  // Tidak ada yang perlu dihitung
+  return '';
+};
+
+const MarketingForm = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  initialValues?: Marketing;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<SalesOrderProductFormValues | null>(null);
+  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
+    useState<DeliveryOrderProductFormValues | null>(null);
+  const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
+    'add'
+  );
+  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
+    DeliveryOrderProductFormValues[]
+  >(
+    mergeSOwithDO(
+      initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+      initialValues?.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+      ) ?? []
+    )
+  );
+
+  // ================== REPEATER ==================
+  const addSOModal = useModal();
+  const addDOModal = useModal();
+  const [rowSOSelection, setRowSOSelection] = useState<Record<string, boolean>>(
+    {}
+  );
+  const selectedRowSOIds = Object.keys(rowSOSelection).map((item) =>
+    parseInt(item)
+  );
+
+  // ================== FETCH OPTIONS ==================
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  // ================== SETUP FORMIK ==================
+  const formikInitialValues = useMemo<
+    SalesOrderFormValues & DeliveryOrderFormValues
+  >(() => {
+    return {
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
+      customer_id: initialValues?.customer?.id || undefined,
+      sales_person_id: initialValues?.sales_person?.id || 1,
+      customer: initialValues?.customer
+        ? {
+            value: initialValues.customer.id,
+            label: initialValues.customer.name,
+          }
+        : null,
+      sales_order:
+        initialValues?.sales_order?.map((product) =>
+          SalesProductToFieldValues(product)
+        ) ?? [],
+      delivery_order: mergeSOwithDO(
+        initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+        initialValues?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+        ) ?? []
+      ),
+    };
+  }, [initialValues]);
+  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues,
+    validationSchema:
+      formType == 'add_deliver' || formType == 'edit_deliver'
+        ? DeliveryOrderSchema
+        : SalesOrderSchema,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      const payload =
+        formType != 'add_deliver' && formType != 'edit_deliver'
+          ? ({
+              customer_id: values.customer_id as number,
+              sales_person_id: values.sales_person_id as number,
+              date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
+              notes: values.notes as string,
+              marketing_products: values.sales_order.map((product) => {
+                return {
+                  vehicle_number: product.vehicle_number as string,
+                  kandang_id: product.kandang_id as number,
+                  product_warehouse_id: product.product_warehouse_id as number,
+                  unit_price: parseFloat(product.unit_price as string),
+                  total_weight: parseFloat(product.total_weight as string),
+                  qty: parseFloat(product.qty as string),
+                  avg_weight: parseFloat(product.avg_weight as string),
+                  total_price: parseFloat(product.total_price as string),
+                } as CreateSalesOrderProductPayload;
+              }),
+            } as CreateSalesOrderPayload)
+          : ({
+              marketing_id: initialValues?.id as number,
+              delivery_products: values.delivery_order
+                .map((product) => {
+                  if (Boolean(product.delivery_date)) {
+                    return {
+                      marketing_product_id:
+                        product.marketing_product_id as number,
+                      unit_price: parseFloat(product.unit_price as string),
+                      total_weight: parseFloat(product.total_weight as string),
+                      qty: parseFloat(product.qty as string),
+                      avg_weight: parseFloat(product.avg_weight as string),
+                      total_price: parseFloat(product.total_price as string),
+                      delivery_date: formatDate(
+                        product.delivery_date as string,
+                        'yyyy-MM-DD'
+                      ),
+                      vehicle_number: product.vehicle_number,
+                    };
+                  }
+                })
+                .filter((item) => Boolean(item)),
+            } as UpdateDeliveryOrderPayload);
+      switch (formType) {
+        case 'add':
+          await createMarketingHandler(payload as CreateSalesOrderPayload);
+          break;
+        case 'edit':
+          await updateMarketingHandler(payload as UpdateSalesOrderPayload);
+          break;
+        case 'add_deliver':
+          await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          break;
+        case 'edit_deliver':
+          await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+          break;
+        default:
+          break;
+      }
+      afterSubmit?.();
+    },
+  });
+
+  // ================== FORM REPEATER HANDLER ==================
+  const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
+    setIsLoading(true);
+    const createMarketingRes = await SalesOrderApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      toast.success(createMarketingRes?.message as string);
+      router.push('/marketing');
+    }
+    if (isResponseError(createMarketingRes)) {
+      toast.error(createMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
+    setIsLoading(true);
+    const updateMarketingRes = await SalesOrderApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(updateMarketingRes)) {
+      toast.success(updateMarketingRes?.message as string);
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(updateMarketingRes)) {
+      toast.error(updateMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const createDeliveryRes = await DeliveryOrderApi.create(values);
+    if (isResponseSuccess(createDeliveryRes)) {
+      toast.success(createDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(
+            createDeliveryRes.data?.sales_order,
+            delivery
+          )
+        ) ?? []
+      );
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(createDeliveryRes)) {
+      toast.error(createDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const updateDeliveryRes = await DeliveryOrderApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(updateDeliveryRes)) {
+      toast.success(updateDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        mergeSOwithDO(
+          formik.values.sales_order,
+          updateDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(
+              updateDeliveryRes.data?.sales_order,
+              delivery
+            )
+          ) ?? []
+        )
+      );
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(updateDeliveryRes)) {
+      toast.error(updateDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+
+  // ================== MARKETING HANDLER ==================
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      toast.success(deleteMarketingRes?.message as string);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      toast.error(deleteMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing');
+  };
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    []
+  );
+  const handleDelete = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  // ================== SALES ORDER HANDLER ==================
+  const handleDeleteSO = useCallback((id: number) => {
+    const currentProducts = formik.values.sales_order;
+    formik.setFieldValue(
+      'sales_order',
+      currentProducts.filter((p) => p.id != id)
+    );
+  }, []);
+  const handleBulkDeleteSO = useCallback(() => {
+    const currentProducts = formik.values.sales_order;
+    formik.setFieldValue(
+      'sales_order',
+      currentProducts.filter(
+        (product) => !selectedRowSOIds.includes(product.id ?? -1)
+      )
+    );
+    setRowSOSelection({});
+  }, [selectedRowSOIds]);
+  const handleAddSOClick = useCallback(() => {
+    setSelectedMarketingProduct(null);
+    addSOModal.openModal();
+  }, [addSOModal]);
+  const handleAddSubmitSO = useCallback(
+    async (values: SalesOrderProductFormValues) => {
+      const currentProducts = formik.values.sales_order;
+
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      const existingIndex = currentProducts.findIndex(
+        (item) =>
+          item.kandang_id === newValues.kandang_id &&
+          item.product_warehouse_id === newValues.product_warehouse_id
+      );
+
+      let updatedProducts = [];
+
+      if (existingIndex !== -1) {
+        // Overwrite
+        updatedProducts = currentProducts.map((item, index) =>
+          index === existingIndex ? newValues : item
+        );
+      } else {
+        // Add new item
+        updatedProducts = [...currentProducts, newValues];
+      }
+
+      formik.setFieldValue('sales_order', updatedProducts);
+
+      addSOModal.closeModal();
+    },
+    [addSOModal]
+  );
+
+  // ================== DELIVERY ORDER HANDLER ==================
+  const handleEditDO = useCallback(
+    (id: number, values?: DeliveryOrderProductFormValues) => {
+      setDeliveryFormState('edit');
+      const currentProducts = formik.values.delivery_order.find(
+        (product) => product.id == id
+      );
+      setSelectedDeliveryProduct(values ?? currentProducts ?? null);
+      addDOModal.openModal();
+    },
+    [addDOModal]
+  );
+  const handleAddDOClick = useCallback(() => {
+    setDeliveryFormState('add');
+    setSelectedDeliveryProduct(null);
+    addDOModal.openModal();
+  }, [addDOModal]);
+  const handleAddSubmitDO = useCallback(
+    async (values: DeliveryOrderProductFormValues) => {
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      setDeliveryOrderValues((prev) => [...prev, newValues]);
+      addDOModal.closeModal();
+      setSelectedDeliveryProduct(null);
+    },
+    [addDOModal]
+  );
+  const handleUpdateDO = useCallback(
+    async (id: number, values: DeliveryOrderProductFormValues) => {
+      setDeliveryOrderValues((prev) =>
+        prev.map((product) =>
+          product.id === id ? { ...product, ...values } : product
+        )
+      );
+      addDOModal.closeModal();
+      setSelectedDeliveryProduct(null);
+    },
+    [addDOModal]
+  );
+
+  const memoSalesOrder = formik.values.sales_order;
+
+  useEffect(() => {
+    formik.setFieldValue('delivery_order', deliveryOrderValues);
+  }, [deliveryOrderValues, initialValues]);
+
+  const grandTotal = useMemo(() => {
+    return memoSalesOrder.reduce(
+      (total, product) =>
+        total + parseFloat((product.total_price as string) || '0'),
+      0
+    );
+  }, [memoSalesOrder]);
+
+  return (
+    <>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <FormHeader
+          title={`${formType == 'add' || formType == 'add_deliver' ? 'Tambah' : 'Edit'} ${formType === 'add_deliver' || formType === 'edit_deliver' ? 'Delivery' : 'Sales'} Order`}
+          backUrl='/marketing'
+        />
+        {/* Input Cutomer And Date  */}
+        <Card
+          title='Informasi Order'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-3 mt-3'>
+            <SelectInput
+              label='Pelanggan'
+              options={customerOptions}
+              isLoading={isLoadingCustomerOptions}
+              value={formik.values.customer}
+              onChange={handleChangeCustomer}
+              isError={
+                formik.touched.customer_id && Boolean(formik.errors.customer_id)
+              }
+              errorMessage={formik.errors.customer_id}
+              isClearable
+              placeholder='Pilih Pelanggan'
+              isDisabled={
+                formType === 'add_deliver' || formType === 'edit_deliver'
+              }
+            />
+            <DateInput
+              name='so_date'
+              label='Tanggal'
+              value={formik.values.so_date}
+              onChange={formik.handleChange}
+              isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
+              errorMessage={formik.errors.so_date}
+              placeholder='Pilih Tanggal'
+              readOnly={formType == 'add_deliver' || formType == 'edit_deliver'}
+            />
+          </div>
+        </Card>
+
+        {/* Input Table Repeater Sales Order */}
+        <Card
+          title='Informasi Produk'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <MemoizedSalesOrderProductTable
+            formType={formType}
+            data={memoSalesOrder}
+            rowSelection={rowSOSelection}
+            setRowSelection={setRowSOSelection}
+            selectedRowIds={selectedRowSOIds}
+            onDelete={handleDeleteSO}
+            onBulkDelete={handleBulkDeleteSO}
+            onAddProductClick={handleAddSOClick}
+          />
+        </Card>
+
+        {/* Input Table Repeater Delivery Order */}
+        {(formType == 'add_deliver' || formType == 'edit_deliver') &&
+          initialValues?.sales_order &&
+          initialValues?.sales_order.length > 0 && (
+            <Card
+              title='Informasi Pengiriman'
+              className={{
+                wrapper: 'bg-white w-full',
+              }}
+            >
+              {/* <div className='text-blue-500'>
+                {JSON.stringify(formik.values)}
+              </div>
+              <div className='text-red-500'>
+                {JSON.stringify(formik.errors)}
+              </div> */}
+              <MemoizedDeliveryOrderProductTable
+                formType={formType}
+                data={deliveryOrderValues}
+                onEdit={handleEditDO}
+                onAddProductClick={handleAddDOClick}
+              />
+            </Card>
+          )}
+
+        {/* Input Notes */}
+        <div className='grid grid-cols-2 gap-3'>
+          <DebouncedTextArea
+            required
+            name='notes'
+            label='Catatan'
+            rows={3}
+            placeholder='Masukan catatan penjualan'
+            value={formik.values.notes}
+            onChange={formik.handleChange}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes}
+            disabled={formType === 'add_deliver' || formType === 'edit_deliver'}
+          />
+          <div className='flex flex-col h-full justify-between items-end py-6'>
+            <span>Total Penjualan</span>
+            <span className='text-lg font-semibold'>
+              {formatCurrency(grandTotal)}{' '}
+            </span>
+          </div>
+        </div>
+
+        {/* Form Actions */}
+        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            disabled={!formik.isValid || formik.isSubmitting}
+            isLoading={formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+
+      {/* Actions button */}
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button
+            type='button'
+            color='error'
+            onClick={handleDelete}
+            isLoading={isLoading}
+          >
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
+
+      {/* Modals */}
+      <Modal
+        ref={addSOModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addSOModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MemoizedSalesOrderProductForm
+              onSubmitForm={handleAddSubmitSO}
+              initialValues={selectedMarketingProduct ?? undefined}
+              exisitingValues={memoSalesOrder}
+            />
+          </div>
+        </div>
+      </Modal>
+      <Modal
+        ref={addDOModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>
+              {selectedDeliveryProduct ? 'Edit' : 'Tambah'} Pengiriman
+            </h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addDOModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MemoizedDeliveryOrderProductForm
+              formState={deliveryFormState}
+              salesOrders={initialValues?.sales_order ?? []}
+              exisitingValues={deliveryOrderValues}
+              onSubmitForm={handleAddSubmitDO}
+              initialValues={selectedDeliveryProduct ?? undefined}
+              onUpdateForm={handleUpdateDO}
+            />
+          </div>
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: deleteModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingForm;
diff --git a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema.ts b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema.ts
new file mode 100644
index 00000000..1fc4c7c0
--- /dev/null
+++ b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema.ts
@@ -0,0 +1,47 @@
+import * as Yup from 'yup';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+
+type DeliveryOrderProductSchemaType = {
+  id?: number | undefined;
+  marketing_product_id: number | undefined; // Sales Order ID
+  marketing_product?: SalesOrderProductFormValues | undefined | null;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  vehicle_number: string | undefined;
+  delivery_date: string | undefined | null;
+  do_number?: string | undefined | null; // Uncertain
+};
+
+export const DeliveryOrderProductSchema: Yup.ObjectSchema<DeliveryOrderProductSchemaType> =
+  Yup.object({
+    id: Yup.number(),
+    marketing_product_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    marketing_product: Yup.object().nullable().optional(),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(0, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    avg_weight: Yup.number()
+      .min(0, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+    vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
+    delivery_date: Yup.string().required('Tanggal Pengiriman wajib diisi!'),
+    do_number: Yup.string().nullable().optional(),
+  });
+
+export type DeliveryOrderProductFormValues = Yup.InferType<
+  typeof DeliveryOrderProductSchema
+>;
diff --git a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
new file mode 100644
index 00000000..2dae2da5
--- /dev/null
+++ b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
@@ -0,0 +1,394 @@
+import { useEffect, useState } from 'react';
+import {
+  DeliveryOrderProductFormValues,
+  DeliveryOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import { useFormik } from 'formik';
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import NumberInput from '@/components/input/NumberInput';
+import PatternInput from '@/components/input/PatternInput';
+import { formatVechicleNumber } from '@/lib/helper';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { BaseSalesOrder } from '@/types/api/marketing/marketing';
+import Badge from '@/components/Badge';
+import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
+import * as Yup from 'yup';
+
+const DeliveryOrderProductForm = ({
+  formState,
+  salesOrders,
+  initialValues,
+  exisitingValues,
+  onSubmitForm,
+  onUpdateForm,
+}: {
+  formState: 'add' | 'edit';
+  salesOrders: BaseSalesOrder[];
+  initialValues?: DeliveryOrderProductFormValues;
+  exisitingValues?: DeliveryOrderProductFormValues[];
+  onSubmitForm?: (value: DeliveryOrderProductFormValues) => Promise<void>;
+  onUpdateForm?: (
+    id: number,
+    value: DeliveryOrderProductFormValues
+  ) => Promise<void>;
+}) => {
+  const [formikErrorMessage, setFormErrorMessage] = useState('');
+  const [selectedProduct, setSelectedProduct] = useState<OptionType | null>(
+    null
+  );
+  const [currentInput, setCurrentInput] = useState<string>('');
+  const salesOrder = salesOrders.find(
+    (item) => item.id === initialValues?.marketing_product_id
+  );
+
+  const formik = useFormik<DeliveryOrderProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      delivery_date: initialValues?.delivery_date || undefined,
+      vehicle_number: initialValues?.vehicle_number || undefined,
+      marketing_product_id:
+        salesOrder?.id || initialValues?.marketing_product_id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+      marketing_product: initialValues?.marketing_product || undefined,
+    },
+    isInitialValid: false,
+    validationSchema: Yup.object().shape({
+      ...DeliveryOrderProductSchema.fields,
+
+      qty: Yup.lazy((_, context) => {
+        // values diambil aman dari context
+        const { parent } = context;
+
+        const mpId = parent?.marketing_product_id;
+        const selectedSO = salesOrders.find((item) => item.id === mpId);
+
+        const maxQty = selectedSO?.qty ?? Infinity;
+
+        return Yup.number()
+          .min(1, 'Kuantitas wajib diisi!')
+          .max(maxQty, `Maksimal kuantitas adalah ${maxQty}`)
+          .required('Kuantitas wajib diisi!');
+      }),
+    }),
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      if (initialValues?.id) {
+        await onUpdateForm?.(initialValues.id, values);
+      } else {
+        await onUpdateForm?.(values.marketing_product_id as number, values);
+      }
+      handleResetForm();
+    },
+  });
+
+  const handleResetForm = () => {
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        delivery_date: '',
+        vehicle_number: '',
+        marketing_product_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        avg_weight: '',
+        total_price: '',
+        marketing_product: undefined,
+      },
+    });
+    setSelectedProduct(null);
+  };
+
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
+        formik.setFieldValue('total_price', Number(qty) * Number(unit_price));
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue('unit_price', Number(total_price) / Number(qty));
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
+        formik.setFieldValue('total_weight', Number(qty) * Number(avg_weight));
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue('avg_weight', Number(total_weight) / Number(qty));
+      }
+    }
+  };
+
+  const options = exisitingValues
+    ?.map((item) => {
+      if (!Boolean(item.qty)) {
+        return {
+          value: item.id,
+          label: `${item.marketing_product?.product_warehouse?.label} - ${item.marketing_product?.kandang?.label}`,
+        } as OptionType;
+      } else {
+        return null;
+      }
+    })
+    ?.filter((item) => item != null) as OptionType[];
+
+  const { setValues: setFormikValues } = formik;
+
+  useEffect(() => {
+    if (initialValues) {
+      if (!Boolean(initialValues.qty)) {
+        handleResetForm();
+      } else {
+        setFormikValues(initialValues);
+        // const value = exisitingValues?.find(
+        //   (item) => item.id === initialValues?.id
+        // );
+        if (initialValues?.marketing_product_id) {
+          setSelectedProduct({
+            value: initialValues?.id,
+            label: `${initialValues?.marketing_product?.product_warehouse?.label} - ${initialValues?.marketing_product?.kandang?.label}`,
+          } as OptionType);
+        }
+      }
+    }
+  }, [initialValues]);
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleBlurField(currentInput);
+          formik.handleSubmit(e);
+        }}
+        onReset={handleResetForm}
+      >
+        {/* <small className='block text-blue-500'>
+          {JSON.stringify(exisitingValues)}
+        </small>
+        <small className='block text-emerald-500'>
+          {JSON.stringify(formik.values)}
+        </small> */}
+        {/* <small className='block text-red-500'>
+          {JSON.stringify(formik.errors)}
+        </small>
+        <div className='hidden'>
+          {JSON.stringify(formik.values.marketing_product)}
+        </div> */}
+
+        {formikErrorMessage && (
+          <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
+            <Alert color='error'>{formikErrorMessage}</Alert>
+          </div>
+        )}
+
+        <div className='grid grid-cols-2 gap-4'>
+          <SelectInput
+            options={options}
+            label='Produk'
+            placeholder='Pilih Produk'
+            isDisabled={formState == 'edit'}
+            value={
+              selectedProduct
+                ? ({
+                    value: selectedProduct?.value,
+                    label: exisitingValues?.find(
+                      (item) => item.id === selectedProduct?.value
+                    )?.marketing_product?.product_warehouse?.label,
+                  } as OptionType)
+                : null
+            }
+            onChange={(value) => {
+              const selected = value as OptionType;
+              setSelectedProduct(selected);
+
+              const so = salesOrders?.find(
+                (item) => item.id === selected?.value
+              );
+              if (!so) {
+                formik.setValues({
+                  ...formik.values,
+                  marketing_product_id: undefined,
+                  marketing_product: null,
+                  qty: formik.values.qty || '',
+                  unit_price: '',
+                  total_price: '',
+                  avg_weight: '',
+                  total_weight: '',
+                  vehicle_number: '',
+                });
+                return;
+              }
+
+              formik.setValues({
+                ...formik.values,
+                marketing_product_id: selected.value as number,
+                marketing_product: SalesProductToFieldValues(so),
+                qty: formik.values.qty || so.qty,
+                unit_price: so.unit_price,
+                total_price: so.total_price,
+                avg_weight: so.avg_weight,
+                total_weight: so.total_weight,
+                vehicle_number: so.vehicle_number,
+              });
+            }}
+            startAdornment={
+              selectedProduct && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{ badge: 'whitespace-nowrap font-semibold' }}
+                >
+                  {
+                    exisitingValues?.find(
+                      (item) => item.id === selectedProduct?.value
+                    )?.marketing_product?.kandang?.label
+                  }
+                </Badge>
+              )
+            }
+            isClearable
+            isError={Boolean(formik.errors.marketing_product_id)}
+            errorMessage={formik.errors.marketing_product_id}
+            required
+          />
+          <DateInput
+            name='delivery_date'
+            label='Tanggal'
+            value={formik.values.delivery_date ?? undefined}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.delivery_date &&
+              Boolean(formik.errors.delivery_date)
+            }
+            errorMessage={formik.errors.delivery_date}
+            placeholder='Pilih Tanggal'
+            className={{
+              inputWrapper: 'bg-white',
+            }}
+            required
+          />
+
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={Boolean(formik.errors.vehicle_number)}
+            errorMessage={formik.errors.vehicle_number}
+          />
+
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('qty')}
+            isError={Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={Boolean(formik.errors.avg_weight)}
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={Boolean(formik.errors.unit_price)}
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={Boolean(formik.errors.total_weight)}
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_price')}
+            isError={Boolean(formik.errors.total_price)}
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning'>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default DeliveryOrderProductForm;
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
new file mode 100644
index 00000000..b2f42254
--- /dev/null
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
@@ -0,0 +1,60 @@
+import * as Yup from 'yup';
+
+type SalesOrderProductSchemaType = {
+  id?: number | undefined;
+  kandang_id?: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse_id?: number;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  vehicle_number?: string | undefined;
+};
+
+export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
+  Yup.object({
+    id: Yup.number(),
+    vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!'),
+    product_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(0, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    avg_weight: Yup.number()
+      .min(0, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+  });
+
+export type SalesOrderProductFormValues = Yup.InferType<
+  typeof SalesOrderProductSchema
+>;
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
new file mode 100644
index 00000000..e1eec98d
--- /dev/null
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
@@ -0,0 +1,337 @@
+'use client';
+
+import { useFormik } from 'formik';
+import {
+  SalesOrderProductFormValues,
+  SalesOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { RefObject, useMemo, useState } from 'react';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { KandangApi } from '@/services/api/master-data';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatVechicleNumber } from '@/lib/helper';
+import PatternInput from '@/components/input/PatternInput';
+import Alert from '@/components/Alert';
+
+const SalesOrderProductForm = ({
+  initialValues,
+  exisitingValues,
+  onSubmitForm,
+}: {
+  initialValues?: SalesOrderProductFormValues;
+  exisitingValues?: SalesOrderProductFormValues[];
+  modalRef?: RefObject<HTMLDialogElement | null>;
+  onSubmitForm?: (value: SalesOrderProductFormValues) => Promise<void>;
+}) => {
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+  const [currentInput, setCurrentInput] = useState<string>('');
+
+  const formik = useFormik<SalesOrderProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      vehicle_number: initialValues?.vehicle_number || undefined,
+      kandang_id: initialValues?.kandang_id || undefined,
+      kandang: initialValues?.kandang || undefined,
+      product_warehouse: initialValues?.product_warehouse || undefined,
+      product_warehouse_id: initialValues?.product_warehouse_id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+    },
+    validationSchema: SalesOrderProductSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      onSubmitForm?.(values);
+      handleResetForm();
+    },
+    validateOnBlur: true,
+    isInitialValid: false,
+  });
+
+  const {
+    options: kandangSourceOptions,
+    isLoadingOptions: isLoadingKandangSourceOptions,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+
+  const {
+    options: warehouseSourceOptions,
+    rawData: warehouseSourceRawData,
+    isLoadingOptions: isLoadingWarehouseSourceOptions,
+  } = useSelect<ProductWarehouse>(
+    ProductWarehouseApi.basePath,
+    'id',
+    'product.name',
+    'search',
+    {
+      warehouse_id: formik.values.kandang_id?.toString() ?? '',
+    }
+  );
+
+  const productOptionsFiltered = useMemo(() => {
+    return warehouseSourceOptions.filter(
+      (product) =>
+        !exisitingValues
+          ?.map((item) => item.product_warehouse_id)
+          .includes(product.value)
+    );
+  }, [warehouseSourceOptions, exisitingValues]);
+
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang', val as OptionType);
+    formik.setFieldValue('kandang_id', (val as OptionType)?.value);
+    formik.setFieldValue('product_warehouse_id', null);
+    formik.setFieldValue('product_warehouse', null);
+    formik.setFieldValue('qty', null);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('product_warehouse', val as OptionType);
+    const newId = (val as OptionType)?.value;
+    formik.setFieldValue('product_warehouse_id', newId);
+
+    if (isResponseSuccess(warehouseSourceRawData) && newId) {
+      const productWarehouse = warehouseSourceRawData?.data.find(
+        (item: ProductWarehouse) => item.id === newId
+      );
+      formik.setFieldValue('qty', productWarehouse?.quantity);
+      handleBlurField('qty');
+    } else {
+      formik.setFieldValue('qty', null);
+    }
+  };
+
+  const handleResetForm = () => {
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        vehicle_number: '',
+        kandang_id: undefined,
+        kandang: null,
+        product_warehouse: null,
+        product_warehouse_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        avg_weight: '',
+        total_price: '',
+      },
+    });
+  };
+
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
+        formik.setFieldValue(
+          'total_price',
+          (qty as number) * (unit_price as number)
+        );
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue(
+          'unit_price',
+          (total_price as number) / (qty as number)
+        );
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
+        formik.setFieldValue(
+          'total_weight',
+          (qty as number) * (avg_weight as number)
+        );
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue(
+          'avg_weight',
+          (total_weight as number) / (qty as number)
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleBlurField(currentInput);
+          formik.handleSubmit(e);
+        }}
+        onReset={handleResetForm}
+      >
+        {formErrorMessage && (
+          <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
+            <Alert color='error'>
+              {formErrorMessage ? formErrorMessage : ''}
+            </Alert>
+          </div>
+        )}
+        {/* <small className='block text-rose-500'>
+          {JSON.stringify(formik.errors)}
+        </small> */}
+        <div className='grid grid-cols-2 gap-4 z-200'>
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.vehicle_number &&
+              Boolean(formik.errors.vehicle_number)
+            }
+            errorMessage={formik.errors.vehicle_number}
+          />
+          <SelectInput
+            required
+            label='Kandang'
+            options={kandangSourceOptions}
+            isLoading={isLoadingKandangSourceOptions}
+            value={formik.values.kandang}
+            onChange={kandangChangeHandler}
+            isClearable
+            isError={
+              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+            }
+            errorMessage={formik.errors.kandang_id}
+            placeholder='Pilih Kandang'
+          />
+          <SelectInput
+            required
+            label='Produk'
+            options={productOptionsFiltered}
+            isLoading={isLoadingWarehouseSourceOptions}
+            value={formik.values.product_warehouse}
+            onChange={warehouseChangeHandler}
+            isClearable
+            placeholder={
+              formik.values.kandang_id
+                ? productOptionsFiltered.length == 0
+                  ? 'Tidak ada produk yang tersedia'
+                  : 'Pilih produk'
+                : 'Pilih Kandang Terlebih Dahulu'
+            }
+            isDisabled={!formik.values.kandang_id}
+            isError={
+              formik.touched.product_warehouse_id &&
+              Boolean(formik.errors.product_warehouse_id)
+            }
+            errorMessage={formik.errors.product_warehouse_id}
+          />
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('qty')}
+            isError={formik.touched.qty && Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={
+              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+            }
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={
+              formik.touched.unit_price && Boolean(formik.errors.unit_price)
+            }
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={
+              formik.touched.total_weight && Boolean(formik.errors.total_weight)
+            }
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_price')}
+            isError={
+              formik.touched.total_price && Boolean(formik.errors.total_price)
+            }
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning' onClick={handleResetForm}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default SalesOrderProductForm;
diff --git a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
new file mode 100644
index 00000000..c67b1a3c
--- /dev/null
+++ b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
@@ -0,0 +1,272 @@
+import Table from '@/components/Table';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import * as TanStack from '@tanstack/react-table';
+import { useMemo, useRef } from 'react';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+
+type DeliveryOrderProductTableProps = {
+  data: DeliveryOrderProductFormValues[];
+  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  onEdit: (id: number) => void;
+  onAddProductClick: () => void;
+};
+
+const DeliveryOrderProductTable = ({
+  data,
+  formType,
+  onEdit,
+  onAddProductClick,
+}: DeliveryOrderProductTableProps) => {
+  const onEditRef = useRef(onEdit);
+  onEditRef.current = onEdit;
+
+  const canAddData = data.filter((item) => !Boolean(item.qty));
+
+  const columns = useMemo(() => {
+    const cols = [
+      // {
+      //   id: 'select',
+      //   header: ({
+      //     table,
+      //   }: {
+      //     table: TanStack.Table<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div className='w-full flex flex-row justify-center'>
+      //       <CheckboxInput
+      //         name='allRow'
+      //         checked={table.getIsAllRowsSelected()}
+      //         indeterminate={table.getIsSomeRowsSelected()}
+      //         onChange={table.getToggleAllRowsSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      //   cell: ({
+      //     row,
+      //   }: {
+      //     row: TanStack.Row<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div>
+      //       <CheckboxInput
+      //         name='row'
+      //         checked={row.getIsSelected()}
+      //         disabled={!row.getCanSelect()}
+      //         indeterminate={row.getIsSomeSelected()}
+      //         onChange={row.getToggleSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      // },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
+        header: 'No. Pengiriman',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) => (
+          <>
+            {props.row.original.do_number ? props.row.original.do_number : '-'}
+          </>
+        ),
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.vehicle_number,
+        header: 'No. Polisi',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.vehicle_number
+            ? formatVechicleNumber(props.row.original.vehicle_number as string)
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.marketing_product?.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.marketing_product?.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.delivery_date
+            ? formatDate(row.delivery_date as string, 'DD MMM YYYY')
+            : '-',
+        header: 'Tanggal Delivery',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.delivery_date
+            ? formatDate(
+                props.row.original.delivery_date as string,
+                'DD MMM YYYY'
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.unit_price,
+        header: 'Harga Satuan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.unit_price
+            ? formatCurrency(
+                parseFloat(props.row.original.unit_price as string)
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_weight,
+        header: 'Total Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_weight
+            ? formatNumber(
+                parseFloat(props.row.original.total_weight as string)
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.qty,
+        header: 'Kuantitas',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.qty
+            ? formatNumber(parseFloat(props.row.original.qty as string))
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.avg_weight,
+        header: 'Avg. Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.avg_weight
+            ? formatNumber(parseFloat(props.row.original.avg_weight as string))
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_price,
+        header: 'Total Penjualan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_price
+            ? formatCurrency(
+                parseFloat(props.row.original.total_price as string)
+              )
+            : '-',
+      },
+
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <>
+              {props.row.original.qty && (
+                <Button
+                  color='warning'
+                  className='px-2 py-1 text-sm'
+                  onClick={() =>
+                    onEditRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:edit' width={16} height={16} /> Edit
+                </Button>
+              )}
+              {!props.row.original.qty && '-'}
+              {/* {formType == 'add_deliver' && (
+                <Button
+                  color='error'
+                  className='p-1'
+                  onClick={() =>
+                    onDeleteRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:trash' width={16} height={16} />
+                </Button>
+              )} */}
+            </>
+          </div>
+        ),
+      },
+    ];
+    if (formType == 'add_deliver') {
+      return cols.filter((col) => col.header != 'No. Pengiriman');
+    }
+    return cols;
+  }, [formType, onEditRef]);
+
+  return (
+    <>
+      <Table<DeliveryOrderProductFormValues>
+        data={data}
+        columns={columns}
+        className={{
+          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-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-2 py-2 last:flex last:flex-row last:justify-end',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div
+            className={cn(
+              'w-full h-16 flex flex-col justify-center items-center gap-2'
+            )}
+          >
+            <span className='text-gray-500'>Belum ada data pengiriman</span>
+          </div>
+        }
+      />
+      <div className='flex flex-row gap-3 mt-3'>
+        <Button
+          type='button'
+          variant='outline'
+          className='justify-start w-fit py-1 text-sm'
+          onClick={onAddProductClick}
+          disabled={!canAddData}
+        >
+          <Icon icon='mdi:plus' width={16} height={16} />
+          Tambah Pengiriman
+        </Button>
+        {/* {selectedRowIds.length > 0 && (
+          <Button
+            type='button'
+            variant='outline'
+            color='error'
+            className='justify-start w-fit py-1 text-sm'
+            onClick={onBulkDelete}
+          >
+            <Icon icon='mdi:trash' width={16} height={16} />
+            Hapus
+            {selectedRowIds.length > 0
+              ? ` (${selectedRowIds.length})`
+              : ''}{' '}
+            Pengiriman
+          </Button>
+        )} */}
+      </div>
+    </>
+  );
+};
+
+export default DeliveryOrderProductTable;
diff --git a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
new file mode 100644
index 00000000..c37bbfb1
--- /dev/null
+++ b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import Button from '@/components/Button';
+import Table from '@/components/Table';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { useMemo, useRef, useState } from 'react';
+import * as TanStack from '@tanstack/react-table';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+type SalesOrderProductTableProps = {
+  data: SalesOrderProductFormValues[];
+  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  rowSelection: Record<string, boolean>;
+  setRowSelection: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+  selectedRowIds: number[];
+  onDelete: (id: number) => void;
+  onBulkDelete: () => void;
+  onAddProductClick: () => void;
+};
+
+const SalesOrderProductTable = ({
+  data,
+  formType,
+  rowSelection,
+  setRowSelection,
+  selectedRowIds,
+  onDelete,
+  onBulkDelete,
+  onAddProductClick,
+}: SalesOrderProductTableProps) => {
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({
+          table,
+        }: {
+          table: TanStack.Table<SalesOrderProductFormValues>;
+        }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<SalesOrderProductFormValues> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              value={`${row.original.product_warehouse_id}${row.original.kandang_id}`}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatVechicleNumber(row.vehicle_number as string),
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) => row.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          row.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.unit_price as string)),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.total_weight as string)),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.qty as string)),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.avg_weight as string)),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.total_price as string)),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<SalesOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() =>
+                onDeleteRef.current(props.row.original.id as number)
+              }
+              type='button'
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <Table<SalesOrderProductFormValues>
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        data={data}
+        columns={
+          formType == 'add_deliver' || formType == 'edit_deliver'
+            ? columns.filter(
+                (col) => col.header != 'Aksi' && col.id != 'select'
+              )
+            : columns
+        }
+        className={{
+          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-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div
+            className={cn(
+              'w-full h-16 flex flex-col justify-center items-center gap-2'
+            )}
+          >
+            <span className='text-gray-500'>Belum ada data penjualan</span>
+          </div>
+        }
+      />
+      {formType != 'add_deliver' && formType != 'edit_deliver' && (
+        <div className='flex flex-row gap-3 mt-3'>
+          <Button
+            type='button'
+            variant='outline'
+            className='justify-start w-fit py-1 text-sm'
+            onClick={onAddProductClick}
+          >
+            <Icon icon='mdi:plus' width={16} height={16} />
+            Tambah Produk
+          </Button>
+          {selectedRowIds.length > 0 && (
+            <Button
+              type='button'
+              variant='outline'
+              color='error'
+              className='justify-start w-fit py-1 text-sm'
+              onClick={onBulkDelete}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+              Hapus
+              {selectedRowIds.length > 0
+                ? ` (${selectedRowIds.length})`
+                : ''}{' '}
+              Produk
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SalesOrderProductTable;
diff --git a/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx b/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx
new file mode 100644
index 00000000..46e85a23
--- /dev/null
+++ b/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx
@@ -0,0 +1,235 @@
+import Button from '@/components/Button';
+import { BaseDeliveryOrder, Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { useMemo, useState } from 'react';
+import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
+import { format } from 'path';
+import { date } from 'yup';
+import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
+
+interface DeliveryOrderExportProps {
+  data?: Marketing;
+  deliveryOrder: BaseDeliveryOrder;
+  className?: string;
+}
+
+const DeliveryOrderExport = ({
+  data,
+  deliveryOrder,
+}: DeliveryOrderExportProps) => {
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
+  const salesData = data;
+
+  const handleDownloadPDF = async () => {
+    if (!salesData) {
+      alert('No sales order data available');
+      return;
+    }
+    setIsGeneratingPDF(true);
+    try {
+      const blob = await pdf(
+        <PDFDocument data={salesData} deliveryOrder={deliveryOrder} />
+      ).toBlob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${deliveryOrder?.do_number || 'delivery-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!salesData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No sales order data available</div>
+      </div>
+    );
+  }
+
+  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+      isLoading={isGeneratingPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {deliveryOrder.do_number}
+    </Button>
+  ) : null;
+};
+
+export default DeliveryOrderExport;
+const PDFDocument = ({
+  data,
+  deliveryOrder,
+}: {
+  data: Marketing;
+  deliveryOrder: BaseDeliveryOrder;
+}) => {
+  const grandTotal = useMemo(() => {
+    return (
+      deliveryOrder.deliveries?.reduce((a, b) => a + b.total_price, 0) ?? 0
+    );
+  }, []);
+
+  return (
+    <Document>
+      <Page size='A4' style={pdfStyles.page}>
+        {/* Header Section */}
+        <View style={pdfStyles.header}>
+          <Image
+            src={'https://placehold.co/120x30/png'}
+            style={pdfStyles.logo}
+            id={'mbu-logo'}
+          />
+          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
+          <Text style={pdfStyles.address}>
+            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+            Cipedes, Kec. Sukajadi, Kota Bandung 40162
+          </Text>
+          <View style={pdfStyles.divider} />
+        </View>
+
+        {/* Delivery Order Title */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.title}>DELIVERY ORDER</Text>
+          <View style={pdfStyles.poInfo}>
+            <Text>{deliveryOrder.do_number || '-'}</Text>
+          </View>
+        </View>
+
+        {/* Depature Table */}
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Ship To</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Depature From</Text>
+            </View>
+          </View>
+          <View style={pdfStyles.tableRow}>
+            <View style={pdfStyles.tableCell}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {data?.customer?.name || '-'} ({data?.customer?.type || '-'})
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {data?.customer.email || ''} - {data?.customer.phone || ''}
+              </Text>
+              <Text></Text>
+              <Text>{data?.customer.address || ''}</Text>
+              <Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
+            </View>
+            <View style={pdfStyles.tableCellLast}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {deliveryOrder.warehouse?.name || '-'}
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {formatDate(deliveryOrder.delivery_date, 'DD MMM YYYY')}
+              </Text>
+              <Text>{deliveryOrder.warehouse?.area?.name}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Delivery Table */}
+        <Text style={pdfStyles.sectionTitle}>Product Shipped</Text>
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Item Description</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Vehicle Number</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Unit Price</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Quantity</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Total Amount</Text>
+            </View>
+          </View>
+          {deliveryOrder.deliveries?.map((item, index) => {
+            return (
+              <View key={index} style={[pdfStyles.tableRow]}>
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.product?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCell}>
+                  <Text>
+                    {formatVechicleNumber(item.vehicle_number) || '-'}
+                  </Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>Rp{formatNumber(item.unit_price || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>{formatNumber(item.qty || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRightLast}>
+                  <Text>Rp{formatNumber(item.total_price || 0)}</Text>
+                </View>
+              </View>
+            );
+          }) || []}
+
+          {/* Grand Total Row inside table */}
+          <View style={pdfStyles.grandTotalRow}>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={pdfStyles.tableCellRight}>
+              <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+            </View>
+            <View
+              style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
+            >
+              <Text>Rp{formatNumber(grandTotal)}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer with Special Instructions */}
+        <View style={pdfStyles.footer}>
+          <View style={pdfStyles.specialInstructionTable}>
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={pdfStyles.tableCellHeaderLast}>
+                <Text>From Sales Order</Text>
+              </View>
+            </View>
+            <View style={pdfStyles.tableRow}>
+              <View style={pdfStyles.tableCellLast}>
+                <Text>
+                  {data?.so_number || '-'} -{' '}
+                  {formatDate(data.so_date, 'DD MMM YYYY')}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View style={pdfStyles.footerCompany}>
+            <Text>PT LUMBUNG TELUR INDONESIA</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
diff --git a/src/components/pages/marketing/pdf/SalesOrderExport.tsx b/src/components/pages/marketing/pdf/SalesOrderExport.tsx
new file mode 100644
index 00000000..f9f0a6c5
--- /dev/null
+++ b/src/components/pages/marketing/pdf/SalesOrderExport.tsx
@@ -0,0 +1,227 @@
+import Button from '@/components/Button';
+import { Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { useMemo, useState } from 'react';
+import { formatDate, formatNumber } from '@/lib/helper';
+import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
+
+interface SalesOrderExportProps {
+  data?: Marketing;
+  className?: string;
+}
+
+const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
+  const salesData = data;
+
+  const handleDownloadPDF = async () => {
+    if (!salesData) {
+      alert('No sales order data available');
+      return;
+    }
+    setIsGeneratingPDF(true);
+    try {
+      const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!salesData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No sales order data available</div>
+      </div>
+    );
+  }
+
+  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+      isLoading={isGeneratingPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {salesData.so_number}
+    </Button>
+  ) : null;
+};
+
+export default SalesOrderExport;
+const PDFDocument = ({ data }: { data: Marketing }) => {
+  const grandTotal = useMemo(() => {
+    return data?.sales_order?.reduce((a, b) => a + b.total_price, 0) ?? 0;
+  }, [data?.sales_order]);
+
+  return (
+    <Document>
+      <Page size='A4' style={pdfStyles.page}>
+        {/* Header Section */}
+        <View style={pdfStyles.header}>
+          <Image
+            src={'https://placehold.co/120x30/png'}
+            style={pdfStyles.logo}
+            id={'mbu-logo'}
+          />
+          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
+          <Text style={pdfStyles.address}>
+            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+            Cipedes, Kec. Sukajadi, Kota Bandung 40162
+          </Text>
+          <View style={pdfStyles.divider} />
+        </View>
+
+        {/* Sales Order Title */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.title}>SALES ORDER</Text>
+          <View style={pdfStyles.poInfo}>
+            <Text>SO Number: {data?.so_number || '-'}</Text>
+            <Text>
+              Date:{' '}
+              {data?.so_date
+                ? formatDate(data.so_date, 'DD MMM YYYY')
+                : formatDate(new Date(), 'DD MMM YYYY')}
+            </Text>
+          </View>
+        </View>
+
+        {/* Customer Table */}
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Customer</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Sales</Text>
+            </View>
+          </View>
+          <View style={pdfStyles.tableRow}>
+            <View style={pdfStyles.tableCell}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {data?.customer?.name || '-'} ({data?.customer?.type || '-'})
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {data?.customer.email || ''} - {data?.customer.phone || ''}
+              </Text>
+              <Text></Text>
+              <Text>{data?.customer.address || ''}</Text>
+              <Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
+            </View>
+            <View style={pdfStyles.tableCellLast}>
+              <Text style={{ fontWeight: 'bold' }}>
+                PT LUMBUNG TELUR INDONESIA
+              </Text>
+              <Text style={{ fontWeight: 'bold', marginTop: '2px' }}>
+                {data?.sales_person?.name || '-'}
+              </Text>
+              <Text>{data?.sales_person.email}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Product Sales Order Table */}
+        <Text style={pdfStyles.sectionTitle}>Product Sold</Text>
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Item Description</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>From</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Unit Price</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Quantity</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Total Amount</Text>
+            </View>
+          </View>
+          {data?.sales_order?.map((item, index) => {
+            const isLastItem = index === (data?.sales_order?.length || 0) - 1;
+            return (
+              <View
+                key={index}
+                style={[
+                  pdfStyles.tableRow,
+                  // isLastItem ? {} : pdfStyles.tableBorderBottom,
+                ]}
+              >
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.product?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.warehouse?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>Rp{formatNumber(item.unit_price || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>{formatNumber(item.qty || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRightLast}>
+                  <Text>Rp{formatNumber(item.total_price || 0)}</Text>
+                </View>
+              </View>
+            );
+          }) || []}
+
+          {/* Grand Total Row inside table */}
+          <View style={pdfStyles.grandTotalRow}>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={pdfStyles.tableCellRight}>
+              <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+            </View>
+            <View
+              style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
+            >
+              <Text>Rp{formatNumber(grandTotal)}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer with Special Instructions */}
+        <View style={pdfStyles.footer}>
+          <View style={pdfStyles.specialInstructionTable}>
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={pdfStyles.tableCellHeaderLast}>
+                <Text>Notes</Text>
+              </View>
+            </View>
+            <View style={pdfStyles.tableRow}>
+              <View style={pdfStyles.tableCellLast}>
+                <Text>{data?.notes || '-'}</Text>
+              </View>
+            </View>
+          </View>
+          <View style={pdfStyles.footerCompany}>
+            <Text>PT LUMBUNG TELUR INDONESIA</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
diff --git a/src/components/pages/marketing/pdf/styles/MarketingPDFStyles.tsx b/src/components/pages/marketing/pdf/styles/MarketingPDFStyles.tsx
new file mode 100644
index 00000000..3a0aa5c7
--- /dev/null
+++ b/src/components/pages/marketing/pdf/styles/MarketingPDFStyles.tsx
@@ -0,0 +1,212 @@
+import { StyleSheet } from '@react-pdf/renderer';
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 10,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    marginBottom: 20,
+  },
+  logo: {
+    width: 120,
+    height: 30,
+    marginBottom: 8,
+  },
+  companyInfo: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+    color: '#1f74bf',
+  },
+  address: {
+    fontSize: 8,
+    color: '#666666',
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    marginBottom: 15,
+  },
+  titleSection: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    flex: 3,
+    color: '#1f74bf',
+  },
+  poInfo: {
+    flex: 1,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1f74bf',
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#000000',
+    borderTopStyle: 'solid',
+  },
+  grandTotalLabel: {
+    flex: 3,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+  },
+  grandTotalValue: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 0,
+  },
+  allocationSection: {
+    marginBottom: 15,
+  },
+  allocationTable: {
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerTable: {
+    marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  innerCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  footer: {
+    marginTop: 30,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  footerCompany: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    flex: 1,
+    color: '#1f74bf',
+  },
+  specialInstructionTable: {
+    width: '60%',
+    maxWidth: 300,
+    borderWidth: 1,
+    borderColor: '#000000',
+    flex: 1,
+  },
+});
+
+export default pdfStyles;
diff --git a/src/components/pages/master-data/area/AreasTable.tsx b/src/components/pages/master-data/area/AreasTable.tsx
index c1ec1ef5..207fb8a6 100644
--- a/src/components/pages/master-data/area/AreasTable.tsx
+++ b/src/components/pages/master-data/area/AreasTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
         variant='ghost'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const AreasTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const AreasTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/area/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/area/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Area
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/bank/BanksTable.tsx b/src/components/pages/master-data/bank/BanksTable.tsx
index 0d084491..58b09ef8 100644
--- a/src/components/pages/master-data/bank/BanksTable.tsx
+++ b/src/components/pages/master-data/bank/BanksTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -163,7 +155,7 @@ const BanksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -212,10 +204,15 @@ const BanksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/bank/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/bank/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Bank
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
index d3fde60b..89401638 100644
--- a/src/components/pages/master-data/customer/CustomersTable.tsx
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -15,10 +16,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
-import {
-  CellContext,
-  ColumnDef,
-} from '@tanstack/react-table';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -33,16 +31,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
         variant='ghost'
@@ -53,10 +42,10 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        className='justify-start text-sm'
         href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
+        className='justify-start text-sm'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
@@ -65,7 +54,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -75,7 +64,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -174,7 +163,7 @@ const CustomersTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -210,10 +199,15 @@ const CustomersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/customer/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/customer/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Customer
+                Tambah
               </Button>
             </div>
 
@@ -285,4 +279,4 @@ const CustomersTable = () => {
   );
 };
 
-export default CustomersTable;
\ No newline at end of file
+export default CustomersTable;
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index ac848834..52d27834 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -11,7 +11,11 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema';
+import {
+  CustomerFormSchema,
+  CustomerFormValues,
+  UpdateCustomerFormSchema,
+} from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -150,7 +154,8 @@ const CustomerForm = ({
   const formik = useFormik<CustomerFormValues>({
     initialValues: formikInitialValues,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setCustomerFormErrorMessage('');
diff --git a/src/components/pages/master-data/fcr/FcrsTable.tsx b/src/components/pages/master-data/fcr/FcrsTable.tsx
index 5f0285bb..b582222e 100644
--- a/src/components/pages/master-data/fcr/FcrsTable.tsx
+++ b/src/components/pages/master-data/fcr/FcrsTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const FcrsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const FcrsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/fcr/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/fcr/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah FCR
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
index b0684a1a..5350c518 100644
--- a/src/components/pages/master-data/flock/FlocksTable.tsx
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -12,6 +12,7 @@ import { FlockApi } from '@/services/api/master-data';
 import { useModal } from '@/components/Modal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -30,16 +31,7 @@ const RowsOptions = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
         variant='ghost'
@@ -54,7 +46,7 @@ const RowsOptions = ({
         />
         Edit
       </Button>
-       <Button
+      <Button
         href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -72,7 +64,7 @@ const RowsOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowsOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -203,9 +195,15 @@ const FlockTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/flock/add' color='primary'>
-                Tambah Flock
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/flock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
               </Button>
             </div>
 
@@ -275,4 +273,4 @@ const FlockTable = () => {
   );
 };
 
-export default FlockTable;
\ No newline at end of file
+export default FlockTable;
diff --git a/src/components/pages/master-data/flock/form/FlockForm.schema.ts b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
index 76445610..56550b4e 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.schema.ts
+++ b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
@@ -3,10 +3,7 @@ import * as Yup from 'yup';
 export const FlockFormSchema = Yup.object({
   name: Yup.string()
     .required('Nama wajib diisi!')
-    .matches(
-      /^[\p{L}\p{N}\s]+$/u,
-      'Nama tidak boleh mengandung simbol'
-    ),
+    .matches(/^[\p{L}\p{N}\s]+$/u, 'Nama tidak boleh mengandung simbol'),
 });
 
 export const UpdateFlockFormSchema = FlockFormSchema;
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
index cc227fa6..2a2193ec 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.tsx
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -1,11 +1,15 @@
-'use client'
+'use client';
 
 import { useModal } from '@/components/Modal';
 import { FlockApi } from '@/services/api/master-data';
 import { Flock } from '@/types/api/master-data/flock';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema';
+import {
+  FlockFormSchema,
+  FlockFormValues,
+  UpdateFlockFormSchema,
+} from '@/components/pages/master-data/flock/form/FlockForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -48,7 +52,8 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
   const formik = useFormik<FlockFormValues>({
     initialValues: formikInitialValue,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setFlockFormErrorMessage('');
diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx
index c51eeb21..eebc490a 100644
--- a/src/components/pages/master-data/kandang/KandangsTable.tsx
+++ b/src/components/pages/master-data/kandang/KandangsTable.tsx
@@ -19,10 +19,11 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -93,12 +85,19 @@ const KandangsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    initial: {
+      search: '',
+      nameSort: '',
+      locationSort: '',
+      capacitySort: '',
+      picSort: '',
+    },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       locationSort: 'sort_location',
+      capacitySort: 'sort_capacity',
       picSort: ' sort_pic',
     },
   });
@@ -138,6 +137,11 @@ const KandangsTable = () => {
       header: 'Lokasi',
       cell: (props) => props.row.original.location.name,
     },
+    {
+      accessorKey: 'capacity',
+      header: 'Kapasitas',
+      cell: (props) => formatNumber(props.row.original.capacity ?? 0),
+    },
     {
       accessorKey: 'pic',
       header: 'PIC',
@@ -173,7 +177,7 @@ const KandangsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -238,10 +242,15 @@ const KandangsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/kandang/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/kandang/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Kandang
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/kandang/form/KandangForm.schema.ts b/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
index 9a0e42a0..3da93aef 100644
--- a/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
+++ b/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
@@ -1,22 +1,48 @@
 import * as Yup from 'yup';
 
-export const KandangFormSchema = Yup.object({
-  name: Yup.string().required('Nama wajib diisi!'),
+type KandangFormSchemaType = {
+  name: string;
+  locationId: number | undefined;
+  location:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  capacity: number | undefined;
+  picId: number | undefined;
+  pic:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+};
 
-  locationId: Yup.number()
-    .min(1, 'Lokasi wajib diisi!')
-    .required('Lokasi wajib diisi!'),
-  location: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
+export const KandangFormSchema: Yup.ObjectSchema<KandangFormSchemaType> =
+  Yup.object({
+    name: Yup.string().required('Nama wajib diisi!'),
 
-  picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
-  pic: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-});
+    locationId: Yup.number()
+      .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!'),
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+
+    capacity: Yup.number()
+      .min(1, 'Kapasitas wajib diisi!')
+      .required('Kapasitas wajib diisi!'),
+
+    picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
+    pic: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+  });
 
 export const UpdateKandangFormSchema = KandangFormSchema;
 
diff --git a/src/components/pages/master-data/kandang/form/KandangForm.tsx b/src/components/pages/master-data/kandang/form/KandangForm.tsx
index f0d68983..d3a5f460 100644
--- a/src/components/pages/master-data/kandang/form/KandangForm.tsx
+++ b/src/components/pages/master-data/kandang/form/KandangForm.tsx
@@ -27,6 +27,7 @@ import {
 import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { UserApi } from '@/services/api/user';
+import NumberInput from '@/components/input/NumberInput';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -81,6 +82,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
             label: initialValues.location.name,
           }
         : null,
+      capacity: initialValues?.capacity,
       picId: initialValues?.pic?.id ?? 0,
       pic: initialValues?.pic
         ? {
@@ -100,8 +102,9 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
 
       const kandangPayload: CreateKandangPayload = {
         name: values.name,
-        location_id: values.locationId,
-        pic_id: values.picId,
+        location_id: values.locationId!,
+        capacity: values.capacity ? parseInt(values.capacity.toString()) : 0,
+        pic_id: values.picId!,
       };
 
       switch (type) {
@@ -249,6 +252,21 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               isClearable
             />
 
+            <NumberInput
+              required
+              name='capacity'
+              label='Kapasitas'
+              placeholder='Masukan kapasitas kandang'
+              value={formik.values.capacity}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.capacity && Boolean(formik.errors.capacity)
+              }
+              errorMessage={formik.errors.capacity as string}
+              readOnly={type === 'detail'}
+            />
+
             <SelectInput
               required
               label='PIC'
diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx
index 2548fb28..19f11298 100644
--- a/src/components/pages/master-data/location/LocationsTable.tsx
+++ b/src/components/pages/master-data/location/LocationsTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -172,7 +164,7 @@ const LocationsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -237,10 +229,15 @@ const LocationsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/location/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/location/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Location
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/nonstock/NonstocksTable.tsx b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
index 462b3488..ae38c573 100644
--- a/src/components/pages/master-data/nonstock/NonstocksTable.tsx
+++ b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -184,7 +176,7 @@ const NonstocksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -249,10 +241,15 @@ const NonstocksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/nonstock/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/nonstock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Nonstock
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
index 63b1c919..1a6e641c 100644
--- a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
+++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
         variant='ghost'
@@ -64,7 +56,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -74,7 +66,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -154,7 +146,7 @@ const ProductCategoryTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -200,10 +192,15 @@ const ProductCategoryTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product-category/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product-category/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Product Category
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
index 102bb812..bbcf9a8d 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
@@ -1,10 +1,22 @@
 import * as Yup from 'yup';
 
-export const ProductCategoryFormSchema = Yup.object({
-  code: Yup.string().required('Kode wajib diisi!').max(3, 'Kode kategori produk melebihi 3 karakter!'),
-  name: Yup.string().required('Nama wajib diisi!'),
-});
+type ProductCategoryFormSchemaType = {
+  code: string;
+  name: string;
+};
+
+export const ProductCategoryFormSchema: Yup.ObjectSchema<ProductCategoryFormSchemaType> =
+  Yup.object({
+    code: Yup.string()
+      .required('Kode wajib diisi!')
+      .max(3, 'Kode kategori produk melebihi 3 karakter!'),
+    name: Yup.string()
+      .required('Nama wajib diisi!')
+      .max(50, 'Nama kategori produk melebihi 50 karakter!'),
+  });
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;
 
-export type ProductCategoryFormValues = Yup.InferType<typeof ProductCategoryFormSchema>;
\ No newline at end of file
+export type ProductCategoryFormValues = Yup.InferType<
+  typeof ProductCategoryFormSchema
+>;
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
index 453670f3..7331cbb5 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
@@ -30,7 +30,10 @@ interface ProductCategoryFormProps {
   initialValues?: ProductCategory;
 }
 
-const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFormProps) => {
+const ProductCategoryForm = ({
+  type = 'add',
+  initialValues,
+}: ProductCategoryFormProps) => {
   const router = useRouter();
   const deleteModal = useModal();
 
@@ -68,16 +71,20 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
     [router]
   );
 
-  const formikInitialValues = useMemo<ProductCategoryFormValues>(() => {
-    return {
+  const formikInitialValues = useMemo<ProductCategoryFormValues>(
+    () => ({
       code: initialValues?.code ?? '',
       name: initialValues?.name ?? '',
-    };
-  }, [initialValues]);
+    }),
+    [initialValues]
+  );
 
   const formik = useFormik<ProductCategoryFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductCategoryFormSchema : ProductCategoryFormSchema,
+    validationSchema:
+      type === 'edit'
+        ? UpdateProductCategoryFormSchema
+        : ProductCategoryFormSchema,
     onSubmit: async (values) => {
       setFormErrorMessage('');
 
@@ -91,7 +98,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           await createProductCategoryHandler(payload);
           break;
         case 'edit':
-          await updateProductCategoryHandler(initialValues?.id as number, payload);
+          await updateProductCategoryHandler(
+            initialValues?.id as number,
+            payload
+          );
           break;
       }
     },
@@ -109,7 +119,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
     await ProductCategoryApi.delete(initialValues?.id as number);
 
     deleteModal.closeModal();
-    toast.success('Successfully delete Product Category!');
+    toast.success('Berhasil menghapus data Kategori Produk!');
     setIsDeleteLoading(false);
     router.push('/master-data/product-category');
   };
@@ -120,7 +130,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
 
   return (
     <>
-      <section className='w-full max-w-xl'>
+      <section className='w-full max-w-2xl'>
         <header className='flex flex-col gap-4'>
           <Button
             href='/master-data/product-category'
@@ -132,9 +142,9 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           </Button>
 
           <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Product Category'}
-            {type === 'edit' && 'Edit Product Category'}
-            {type === 'detail' && 'Detail Product Category'}
+            {type === 'add' && 'Tambah Kategori Produk'}
+            {type === 'edit' && 'Edit Kategori Produk'}
+            {type === 'detail' && 'Detail Kategori Produk'}
           </h1>
         </header>
 
@@ -148,7 +158,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
               required
               label='Kode'
               name='code'
-              placeholder='Masukkan kode kategori produk'
+              placeholder='Masukkan kode...'
               value={formik.values.code}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -160,7 +170,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama kategori produk'
+              placeholder='Masukkan nama...'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -247,7 +257,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
         <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
-          text={`Apakah anda yakin ingin menghapus data Product Category ini (${initialValues?.name})?`}
+          text={`Apakah anda yakin ingin menghapus data Kategori Produk ini (${initialValues?.name})?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -263,4 +273,4 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
   );
 };
 
-export default ProductCategoryForm;
\ No newline at end of file
+export default ProductCategoryForm;
diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx
index b38a749a..2a94656c 100644
--- a/src/components/pages/master-data/product/ProductTable.tsx
+++ b/src/components/pages/master-data/product/ProductTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -36,16 +37,7 @@ const RowOptionsMenu = ({
   props: CellContext<Product, unknown>;
   deleteClickHandler: () => void;
 }) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`/master-data/product/detail/?productId=${props.row.original.id}`}
       variant='ghost'
@@ -68,7 +60,7 @@ const RowOptionsMenu = ({
       onClick={deleteClickHandler}
       variant='ghost'
       color='error'
-      className='text-error hover:text-inherit'
+      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
     >
       <Icon
         icon='material-symbols:delete-outline-rounded'
@@ -78,7 +70,7 @@ const RowOptionsMenu = ({
       />
       Delete
     </Button>
-  </div>
+  </RowOptionsMenuWrapper>
 );
 
 const ProductsTable = () => {
@@ -217,7 +209,7 @@ const ProductsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -280,10 +272,15 @@ const ProductsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product/add'
+                variant='outline'
+                className='w-full sm:w-fit'
+                color='primary'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Produk
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput
diff --git a/src/components/pages/master-data/product/form/ProductForm.schema.ts b/src/components/pages/master-data/product/form/ProductForm.schema.ts
index eea9abf7..37881636 100644
--- a/src/components/pages/master-data/product/form/ProductForm.schema.ts
+++ b/src/components/pages/master-data/product/form/ProductForm.schema.ts
@@ -1,53 +1,87 @@
 import * as Yup from 'yup';
 
-export const ProductFormSchema = Yup.object({
-  name: Yup.string().required('Nama wajib diisi!'),
-  brand: Yup.string().required('Merek wajib diisi!'),
-  sku: Yup.string().required('SKU wajib diisi!'),
-  uom: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
-  uom_id: Yup.number().required('Satuan wajib diisi!').typeError('Satuan wajib diisi!'),
-  product_category: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
-  product_category_id: Yup.number()
+type ProductFormSchemaType = {
+  name: string;
+  brand: string;
+  sku: string;
+  uom?: {
+    value: number;
+    label: string;
+  } | null;
+  uom_id: number;
+  product_category?: {
+    value: number;
+    label: string;
+  } | null;
+  product_category_id: number;
+  product_price: number | string;
+  selling_price: number | string;
+  tax: number | string;
+  expiry_period: number | string;
+  supplier_ids: number[];
+  flags: string[];
+};
+
+export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
+  Yup.object({
+    name: Yup.string().required('Nama wajib diisi!'),
+    brand: Yup.string().required('Merek wajib diisi!'),
+    sku: Yup.string().required('SKU wajib diisi!'),
+
+    uom: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    })
+      .nullable()
+      .required('Satuan wajib diisi!'),
+
+    uom_id: Yup.number()
+      .required('Satuan wajib diisi!')
+      .typeError('Satuan wajib diisi!'),
+
+    product_category: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    })
+      .nullable()
+      .required('Kategori produk wajib diisi!'),
+
+    product_category_id: Yup.number()
       .required('Kategori produk wajib diisi!')
       .typeError('Kategori produk wajib diisi!'),
-  product_price: Yup.number()
+
+    product_price: Yup.number()
       .required('Harga produk wajib diisi!')
       .typeError('Harga produk wajib diisi!')
       .min(0, 'Harga produk tidak boleh kurang dari 0!'),
-  selling_price: Yup.number()
+
+    selling_price: Yup.number()
       .required('Harga jual wajib diisi!')
       .typeError('Harga jual wajib diisi!')
       .min(0, 'Harga jual tidak boleh kurang dari 0!'),
-  tax: Yup.number()
+
+    tax: Yup.number()
       .required('Pajak wajib diisi!')
       .typeError('Pajak wajib diisi!')
       .min(0, 'Pajak tidak boleh kurang dari 0!')
       .max(100, 'Pajak tidak boleh lebih dari 100%!'),
-  expiry_period: Yup.number()
+
+    expiry_period: Yup.number()
       .required('Periode kadaluarsa wajib diisi!')
       .typeError('Periode kadaluarsa wajib diisi!')
       .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
-  supplier: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
-  supplier_ids: Yup.array()
-      .of(Yup.number().typeError('Supplier tidak valid!'))
+
+    supplier_ids: Yup.array()
+      .of(Yup.number().required().typeError('Supplier tidak valid!'))
       .min(1, 'Minimal harus ada 1 supplier!')
       .required('Supplier wajib diisi!'),
-  flags: Yup.array()
-      .of(Yup.string())
+
+    flags: Yup.array()
+      .of(Yup.string().required())
       .min(1, 'Minimal harus ada 1 flag!')
       .required('Flag wajib diisi!'),
-});
+  });
 
 export const UpdateProductFormSchema = ProductFormSchema;
 
 export type ProductFormValues = Yup.InferType<typeof ProductFormSchema>;
-
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 02afbfc9..44457c81 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -9,7 +9,11 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
@@ -24,7 +28,12 @@ import {
   CreateProductPayload,
   UpdateProductPayload,
 } from '@/types/api/master-data/product';
-import { UomApi, ProductCategoryApi, SupplierApi, ProductApi } from '@/services/api/master-data';
+import {
+  UomApi,
+  ProductCategoryApi,
+  SupplierApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
 
@@ -67,30 +76,36 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     [router]
   );
 
-  const formikInitialValues = useMemo<ProductFormValues>(() => ({
-    name: initialValues?.name ?? '',
-    brand: initialValues?.brand ?? '',
-    sku: initialValues?.sku ?? '',
-    uom: initialValues?.uom
-      ? { value: initialValues.uom.id, label: initialValues.uom.name }
-      : null,
-    uom_id: initialValues?.uom?.id ?? 0,
-    product_category: initialValues?.product_category
-      ? { value: initialValues.product_category.id, label: initialValues.product_category.name }
-      : null,
-    product_category_id: initialValues?.product_category?.id ?? 0,
-    product_price: initialValues?.product_price ?? 0,
-    selling_price: initialValues?.selling_price ?? 0,
-    tax: initialValues?.tax ?? 0,
-    expiry_period: initialValues?.expiry_period ?? 0,
-    supplier: null, // not used for payload, just for UI
-    supplier_ids: initialValues?.suppliers?.map(s => s.id) ?? [],
-    flags: initialValues?.flags ?? [],
-  }), [initialValues]);
+  const formikInitialValues = useMemo<ProductFormValues>(
+    () => ({
+      name: initialValues?.name ?? '',
+      brand: initialValues?.brand ?? '',
+      sku: initialValues?.sku ?? '',
+      uom: initialValues?.uom
+        ? { value: initialValues.uom.id, label: initialValues.uom.name }
+        : undefined,
+      uom_id: initialValues?.uom?.id ?? 0,
+      product_category: initialValues?.product_category
+        ? {
+            value: initialValues.product_category.id,
+            label: initialValues.product_category.name,
+          }
+        : undefined,
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_price: initialValues?.product_price ?? '',
+      selling_price: initialValues?.selling_price ?? '',
+      tax: initialValues?.tax ?? '',
+      expiry_period: initialValues?.expiry_period ?? '',
+      supplier_ids: initialValues?.suppliers?.map((s) => s.id) ?? [],
+      flags: initialValues?.flags ?? [],
+    }),
+    [initialValues]
+  );
 
   const formik = useFormik<ProductFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
+    validationSchema:
+      type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
     onSubmit: async (values) => {
       setProductFormErrorMessage('');
       const payload: CreateProductPayload = {
@@ -99,12 +114,14 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
         sku: values.sku,
         uom_id: values.uom_id,
         product_category_id: values.product_category_id,
-        product_price: values.product_price,
-        selling_price: values.selling_price,
-        tax: values.tax,
-        expiry_period: values.expiry_period,
-        supplier_ids: (values.supplier_ids ?? []).filter((id): id is number => typeof id === 'number'),
-        flags: (values.flags ?? []).filter((f): f is string => typeof f === 'string'),
+        product_price: parseInt(values.product_price.toString()) || 0,
+        selling_price: parseInt(values.selling_price.toString()) || 0,
+        tax: parseInt(values.tax.toString()) || 0,
+        expiry_period: parseInt(values.expiry_period.toString()) || 0,
+        supplier_ids: values.supplier_ids.filter(
+          (id): id is number => typeof id === 'number'
+        ),
+        flags: values.flags.filter((f): f is string => typeof f === 'string'),
       };
       switch (type) {
         case 'add':
@@ -120,12 +137,11 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // UOM
-  const [uomSelectInputValue, setUomSelectInputValue] = useState('');
-  const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({ search: uomSelectInputValue ?? '' }).toString()}`;
-  const { data: uoms, isLoading: isLoadingUoms } = useSWR(uomsUrl, UomApi.getAllFetcher);
-  const uomOptions = isResponseSuccess(uoms)
-    ? uoms?.data.map((uom) => ({ value: uom.id, label: uom.name }))
-    : [];
+  const {
+    setInputValue: setUomSelectInputValue,
+    options: uomOptions,
+    isLoadingOptions: isLoadingUoms,
+  } = useSelect(UomApi.basePath, 'id', 'name');
   const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('uom', true);
     formik.setFieldValue('uom', val);
@@ -134,12 +150,11 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   };
 
   // Product Category
-  const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
-  const categoriesUrl = `${ProductCategoryApi.basePath}?${new URLSearchParams({ search: categorySelectInputValue ?? '' }).toString()}`;
-  const { data: categories, isLoading: isLoadingCategories } = useSWR(categoriesUrl, ProductCategoryApi.getAllFetcher);
-  const categoryOptions = isResponseSuccess(categories)
-    ? categories?.data.map((cat) => ({ value: cat.id, label: cat.name }))
-    : [];
+  const {
+    setInputValue: setCategorySelectInputValue,
+    options: categoryOptions,
+    isLoadingOptions: isLoadingCategories,
+  } = useSelect(ProductCategoryApi.basePath, 'id', 'name');
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('product_category', true);
     formik.setFieldValue('product_category', val);
@@ -147,19 +162,25 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     formik.setFieldValue('product_category_id', (val as OptionType)?.value);
   };
 
-  // Supplier (multi select)
+  // Supplier (multi select) - using SWR to filter by category
   const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
   const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue ?? '' }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(suppliersUrl, SupplierApi.getAllFetcher);
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
   const supplierOptions = isResponseSuccess(suppliers)
-      ? suppliers?.data
-          .filter((sup) => sup.category === 'SAPRONAK')
-          .map((sup) => ({ value: sup.id, label: sup.name }))
-      : [];
+    ? suppliers?.data
+        .filter((sup) => sup.category === 'SAPRONAK')
+        .map((sup) => ({ value: sup.id, label: sup.name }))
+    : [];
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     const arr = Array.isArray(val) ? val : val ? [val] : [];
     formik.setFieldTouched('supplier_ids', true);
-    formik.setFieldValue('supplier_ids', arr.map((v) => (v as OptionType).value));
+    formik.setFieldValue(
+      'supplier_ids',
+      arr.map((v) => (v as OptionType).value)
+    );
   };
 
   const deleteProductClickHandler = () => {
@@ -181,7 +202,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-xl'>
+      <section className='w-full max-w-2xl'>
         <header className='flex flex-col gap-4'>
           <Button
             href='/master-data/product'
@@ -207,7 +228,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama produk'
+              placeholder='Masukkan nama...'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -219,7 +240,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Merek'
               name='brand'
-              placeholder='Masukkan merek produk'
+              placeholder='Masukkan merek...'
               value={formik.values.brand}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -231,7 +252,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='SKU'
               name='sku'
-              placeholder='Masukkan SKU produk'
+              placeholder='Masukkan SKU...'
               value={formik.values.sku}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -242,6 +263,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             <SelectInput
               required
               label='Satuan'
+              placeholder='Pilih satuan...'
               value={formik.values.uom ?? undefined}
               onChange={uomChangeHandler}
               options={uomOptions}
@@ -255,78 +277,113 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             <SelectInput
               required
               label='Kategori Produk'
+              placeholder='Pilih kategori produk...'
               value={formik.values.product_category ?? undefined}
               onChange={categoryChangeHandler}
               options={categoryOptions}
               onInputChange={setCategorySelectInputValue}
               isLoading={isLoadingCategories}
-              isError={formik.touched.product_category_id && Boolean(formik.errors.product_category_id)}
+              isError={
+                formik.touched.product_category_id &&
+                Boolean(formik.errors.product_category_id)
+              }
               errorMessage={formik.errors.product_category_id as string}
               isDisabled={type === 'detail'}
               isClearable
             />
-            <TextInput
+            <NumberInput
               required
               label='Harga Produk'
               name='product_price'
-              type='number'
-              placeholder='Masukkan harga produk'
+              placeholder='Masukkan harga produk...'
               value={formik.values.product_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.product_price && Boolean(formik.errors.product_price)}
+              decimalScale={2}
+              allowNegative={false}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix='Rp '
+              isError={
+                formik.touched.product_price &&
+                Boolean(formik.errors.product_price)
+              }
               errorMessage={formik.errors.product_price as string}
               readOnly={type === 'detail'}
             />
-            <TextInput
+            <NumberInput
               required
               label='Harga Jual'
               name='selling_price'
-              type='number'
-              placeholder='Masukkan harga jual'
+              placeholder='Masukkan harga jual...'
               value={formik.values.selling_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.selling_price && Boolean(formik.errors.selling_price)}
+              decimalScale={2}
+              allowNegative={false}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix='Rp '
+              isError={
+                formik.touched.selling_price &&
+                Boolean(formik.errors.selling_price)
+              }
               errorMessage={formik.errors.selling_price as string}
               readOnly={type === 'detail'}
             />
-            <TextInput
+            <NumberInput
               required
               label='Pajak (%)'
               name='tax'
-              type='number'
-              placeholder='Masukkan pajak'
+              placeholder='Masukkan pajak...'
               value={formik.values.tax}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
+              decimalScale={2}
+              allowNegative={false}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputSuffix='%'
               isError={formik.touched.tax && Boolean(formik.errors.tax)}
               errorMessage={formik.errors.tax as string}
               readOnly={type === 'detail'}
             />
-            <TextInput
+            <NumberInput
               required
               label='Periode Kadaluarsa (hari)'
               name='expiry_period'
-              type='number'
-              placeholder='Masukkan periode kadaluarsa'
+              placeholder='Masukkan periode kadaluarsa...'
               value={formik.values.expiry_period}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.expiry_period && Boolean(formik.errors.expiry_period)}
+              decimalScale={0}
+              allowNegative={false}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputSuffix='hari'
+              isError={
+                formik.touched.expiry_period &&
+                Boolean(formik.errors.expiry_period)
+              }
               errorMessage={formik.errors.expiry_period as string}
               readOnly={type === 'detail'}
             />
             <SelectInput
               required
               label='Supplier'
+              placeholder='Pilih supplier...'
               isMulti
-              value={supplierOptions.filter(opt => formik.values.supplier_ids.includes(opt.value))}
+              value={supplierOptions.filter((opt) =>
+                (formik.values.supplier_ids || []).includes(opt.value)
+              )}
               onChange={supplierChangeHandler}
               options={supplierOptions}
               onInputChange={setSupplierSelectInputValue}
               isLoading={isLoadingSuppliers}
-              isError={formik.touched.supplier_ids && Boolean(formik.errors.supplier_ids)}
+              isError={
+                formik.touched.supplier_ids &&
+                Boolean(formik.errors.supplier_ids)
+              }
               errorMessage={formik.errors.supplier_ids as string}
               isDisabled={type === 'detail'}
               isClearable
@@ -334,11 +391,17 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             <SelectInput
               required
               label='Flags'
+              placeholder='Pilih flags...'
               isMulti
-              value={PRODUCT_FLAG_OPTIONS.filter(opt => formik.values.flags.includes(opt.value))}
-              onChange={val => {
+              value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                (formik.values.flags || []).includes(opt.value)
+              )}
+              onChange={(val) => {
                 const arr = Array.isArray(val) ? val : val ? [val] : [];
-                formik.setFieldValue('flags', arr.map((v) => (v as OptionType).value));
+                formik.setFieldValue(
+                  'flags',
+                  arr.map((v) => (v as OptionType).value)
+                );
               }}
               options={PRODUCT_FLAG_OPTIONS}
               isError={formik.touched.flags && Boolean(formik.errors.flags)}
@@ -435,4 +498,4 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   );
 };
 
-export default ProductForm;
\ No newline at end of file
+export default ProductForm;
diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx
index 672f70a6..da84afc0 100644
--- a/src/components/pages/master-data/supplier/SupplierTable.tsx
+++ b/src/components/pages/master-data/supplier/SupplierTable.tsx
@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -30,16 +31,7 @@ const RowOptions = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
         variant='ghost'
@@ -72,7 +64,7 @@ const RowOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -226,10 +218,15 @@ const SuppliersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/supplier/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/supplier/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Supplier
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
index 44d15478..12c70b1c 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
@@ -1,41 +1,44 @@
 import * as Yup from 'yup';
 
 export const SupplierFormSchema = Yup.object({
-    name: Yup.string().required('Nama wajib diisi!'),
-    alias: Yup.string()
-    .matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
+  name: Yup.string().required('Nama wajib diisi!'),
+  alias: Yup.string()
+    .matches(
+      /^[A-Za-z0-9]+$/,
+      'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!'
+    )
     .max(5, 'Alias maksimal 5 karakter!')
     .required('Alias wajib diisi!'),
-    pic: Yup.string().required('PIC wajib diisi!'),
-    type: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    category: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    hatchery: Yup.string().required('Hatchery wajib diisi!'),
-    phone: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
-        .min(10, 'Nomor telepon minimal 10 digit!')
-        .max(12, 'Nomor telepon maksimal 12 digit!')
-        .required('Nomor telepon wajib diisi!'),
-    email: Yup.string()
-        .email('Format email tidak valid!')
-        .required('Email wajib diisi!'),
-    address: Yup.string().required('Alamat wajib diisi!'),
-    npwp: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
-        .required('Nomor NPWP wajib diisi!'),
-    account_number: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
-        .required('Nomor rekening wajib diisi!'),
-    due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
+  pic: Yup.string().required('PIC wajib diisi!'),
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  category: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  hatchery: Yup.string().required('Hatchery wajib diisi!'),
+  phone: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+    .min(10, 'Nomor telepon minimal 10 digit!')
+    .max(12, 'Nomor telepon maksimal 12 digit!')
+    .required('Nomor telepon wajib diisi!'),
+  email: Yup.string()
+    .email('Format email tidak valid!')
+    .required('Email wajib diisi!'),
+  address: Yup.string().required('Alamat wajib diisi!'),
+  npwp: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
+    .required('Nomor NPWP wajib diisi!'),
+  account_number: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+    .required('Nomor rekening wajib diisi!'),
+  due_date: Yup.number()
+    .min(1, 'Tanggal jatuh tempo wajib diisi!')
+    .required('Tanggal jatuh tempo wajib diisi!'),
 });
 
 export const UpdateSupplierFormSchema = SupplierFormSchema;
 
-export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
\ No newline at end of file
+export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
index e400ead2..429c3bb6 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -41,7 +41,9 @@ const SupplierForm = ({
   // Setup State
   const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
+  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<
+    OptionType[]
+  >([]);
 
   // -- Options data mapping
   const typeOptions = TYPE_OPTIONS;
@@ -167,7 +169,7 @@ const SupplierForm = ({
   // Initialize Formik
   useEffect(() => {
     formikSetValues(formikInitialValues);
-    if(formType != 'add'){
+    if (formType != 'add') {
       const hatcheryArrays = formikInitialValues.hatchery.split(',');
       const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
         value: item,
@@ -177,11 +179,13 @@ const SupplierForm = ({
     }
   }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
   useEffect(() => {
-    const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
+    const commaSeparatedValues = hatcheryOptionsValues
+      .map((item) => item.value)
+      .join(',');
     formikSetValues({
       ...formik.values,
       hatchery: commaSeparatedValues,
-    })
+    });
   }, [hatcheryOptionsValues, formikSetValues]);
 
   // Option Handler
@@ -302,10 +306,11 @@ const SupplierForm = ({
               label='Hatchery'
               value={hatcheryOptionsValues}
               onChange={(val) => {
-                console.log(val); // pastikan val = array of { value, label }
                 setHatcheryOptionValues(val as OptionType[]);
               }}
-              isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+              isError={
+                formik.touched.hatchery && Boolean(formik.errors.hatchery)
+              }
               errorMessage={formik.errors.hatchery as string}
               isDisabled={formType === 'detail'}
               isClearable
diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx
index dcec5fe5..edf67f34 100644
--- a/src/components/pages/master-data/uom/UomsTable.tsx
+++ b/src/components/pages/master-data/uom/UomsTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const UomsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const UomsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/uom/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/uom/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah UOM
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
index f6d2d071..a61f6f5b 100644
--- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx
+++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
         variant='ghost'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -206,7 +198,7 @@ const WarehousesTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -277,10 +269,15 @@ const WarehousesTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/warehouse/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/warehouse/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Warehouse
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index 65ab3c16..732923d4 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -8,18 +8,18 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatNumber } from '@/lib/helper';
-import { ChickinApi } from '@/services/api/production';
+import { ChickinApi } from '@/services/api/production/chickin';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 import useSWR from 'swr';
-import ChickinForm from './form/ChickinForm';
 
 const ChickinTable = () => {
   const {
@@ -86,8 +86,10 @@ const ChickinTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <Button
-              href='/production/chickin/add?projectFlockId=1'
+              href='/production/project-flock/chickin/add?projectFlockId=1'
+              variant='outline'
               color='primary'
+              className='w-full sm:w-fit'
             >
               <Icon icon='uil:plus' width={24} height={24} />
               Tambah
@@ -130,20 +132,20 @@ const ChickinTable = () => {
               } else {
                 return '-';
               }
-            }
+            },
           },
           {
             accessorFn: (row) => row.chick_in_date,
             header: 'Tanggal Chickin',
             cell: (props) => {
               if (props.row.original.chick_in_date) {
-                return new Date(props.row.original.chick_in_date).toLocaleDateString(
-                  'id-ID'
-                );
+                return new Date(
+                  props.row.original.chick_in_date
+                ).toLocaleDateString('id-ID');
               } else {
                 return '-';
               }
-            }
+            },
           },
           {
             accessorFn: (row) => row.note,
@@ -166,7 +168,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () =>  {
+              const editClickHandler = () => {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -240,7 +242,9 @@ const ChickinTable = () => {
       <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 - { selectedChickin?.project_flock_kandang && selectedChickin?.project_flock_kandang.kandang?.name}
+            Chickin Kandang -{' '}
+            {selectedChickin?.project_flock_kandang &&
+              selectedChickin?.project_flock_kandang.kandang?.name}
           </h1>
           <Button
             color='error'
@@ -255,10 +259,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm initialValues={selectedChickin} formType='edit' afterSubmit={() => {
-          refreshChickins()
-          chickinModal.closeModal()
-        }}/>
+        {/* <ChickinForm
+          initialValues={selectedChickin}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickins();
+            chickinModal.closeModal();
+          }}
+        /> */}
       </Modal>
     </>
   );
@@ -276,18 +284,9 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
+        href={`/production/project-flock/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -308,7 +307,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -318,7 +317,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
index 42d3b6ea..b9da9256 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.schema.ts
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -1,11 +1,37 @@
 import * as Yup from 'yup';
 
-export const ChickinFormSchema = Yup.object({
-  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
-  note: Yup.string().required('Catatan wajib diisi!'),
-  quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
-})
+type ChickinRequestSchemaType = {
+  chick_in_date: string;
+  note?: string | undefined | null;
+  product_warehouse_id: number;
+};
 
-export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
+type ChickinSchemaType = {
+  project_flock_kandang_id: number;
+  chickin_requests: ChickinRequestSchemaType[];
+};
 
-export const UpdateChickinFormSchema = ChickinFormSchema;
\ No newline at end of file
+export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
+  Yup.object({
+    chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
+    note: Yup.string().nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
+  project_flock_kandang_id: Yup.number()
+    .min(1, 'Project Flock Kandang wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!'),
+  chickin_requests: Yup.array()
+    .of(ChickinRequestSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export type ChickinRequestFormValues = Yup.InferType<
+  typeof ChickinRequestSchema
+>;
+
+export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 8ac6b6ee..b6c5a2c0 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -1,220 +1,188 @@
 'use client';
 
-import Button from '@/components/Button';
-import {
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
-import {
-  ChickinFormSchema,
-  ChickinFormValues,
-  UpdateChickinFormSchema,
-} from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { useFormik } from 'formik';
-import { ChickinApi } from '@/services/api/production';
-import DateInput from '@/components/input/DateInput';
-import { isResponseError } from '@/lib/api-helper';
-import toast from 'react-hot-toast';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import Table from '@/components/Table';
+import { formatNumber } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import Tabs from '@/components/Tabs';
+import { useState } from 'react';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import ChickinFormView from '@/components/pages/production/chickin/form/tabs/ChickinFormView';
+import ChickinLogsView from '@/components/pages/production/chickin/form/tabs/ChickLogsView';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { Icon } from '@iconify/react';
-import TextArea from '@/components/input/TextArea';
-import TextInput from '@/components/input/TextInput';
-import NumberInput from '@/components/input/NumberInput';
-
-interface ChickinFormProps {
-  formType?: 'add' | 'detail' | 'edit';
-  initialValues?: Chickin;
-  afterSubmit?: () => void;
-}
-
-const ChickinForm = ({
+import Badge from '@/components/Badge';
+import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
+const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
   afterSubmit,
-}: ChickinFormProps) => {
-  // Helper Function
-  const formatDateForInput = (dateString?: string): string => {
-    if (!dateString) return '';
-    return new Date(dateString).toISOString().split('T')[0];
-  };
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const [openChickin, setOpenChickin] = useState<boolean>(false);
 
-  // State
-  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
-
-  // Initial Value
-  const formikInitialValue = useMemo<ChickinFormValues>(() => {
-    return {
-      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? '',
-      quantity:
-        initialValues?.quantity ??
-        initialValues?.project_flock_kandang?.available_quantity ??
-        0,
-    };
-  }, [initialValues]);
-
-  // Handle Submit Function
-  const handleCreate = useCallback(
-    async (
-      payload: CreateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.create(payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-  const handleUpdate = useCallback(
-    async (
-      payload: UpdateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.update(payload.id, payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-
-  // Formik
-  const formik = useFormik<ChickinFormValues>({
-    initialValues: formikInitialValue,
-    enableReinitialize: true,
-    validationSchema:
-      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
-    onSubmit: async (values) => {
-      // reset error message
-      setChickinFormErrorMessage('');
-
-      if (
-        initialValues?.project_flock_kandang?.id == undefined ||
-        (formType == 'edit' && initialValues?.id == undefined)
-      ) {
-        return;
-      }
-
-      // create payload
-      const payload = {
-        chick_in_date: values.chick_in_date,
-        project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
-        note: values.note,
-        quantity: values.quantity,
-        id: initialValues.id ?? 0,
-      };
-
-      // cek type form yang disubmit
-      console.log(formType);
-      switch (formType) {
-        case 'add':
-          handleCreate(payload, afterSubmit);
-          break;
-        case 'edit':
-          handleUpdate(payload, afterSubmit);
-          break;
-        default:
-          break;
-      }
-    },
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: CHICKINS_APPROVAL_LINE,
+    moduleName: 'CHICKINS',
+    moduleId: initialValues?.id.toString() ?? '',
   });
 
-  // Initialize Formik
-  const { setValues: formikSetValues } = formik;
-  useEffect(() => {
-    formikSetValues(formikInitialValue);
-  }, [formikSetValues, formikInitialValue]);
+  const afterSubmitFormChickin = () => {
+    setOpenChickin(true);
+    afterSubmit && afterSubmit();
+    refreshApprovals();
+  };
 
   return (
     <>
-      <form
-        className='min-h-48 flex flex-col gap-4'
-        onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
-      >
-        <DateInput
-          value={formik.values.chick_in_date}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='chick_in_date'
-          label='Tanggal Chickin'
-          required
-          isError={
-            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
-          }
-          errorMessage={formik.errors.chick_in_date}
-        />
-        <NumberInput
-          value={formik.values.quantity}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='quantity'
-          label='Jumlah (Ekor)'
-          required
-          isError={
-            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
-            formik.values.quantity == 0
-          }
-          errorMessage={
-            formik.values.quantity == 0
-              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
-              : formik.errors.quantity
-          }
-          readOnly
-        />
-        <TextArea
-          required
-          label='Catatan'
-          name='note'
-          placeholder='Masukan catatan chickin'
-          value={formik.values.note}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          isError={formik.touched.note && Boolean(formik.errors.note)}
-          errorMessage={formik.errors.note}
-        />
-        {initialValues?.project_flock_kandang?.id == undefined && (
-          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
-        )}
-        {chickinFormErrorMessage && (
-          <div
-            role='alert'
-            className='alert alert-error'
-            onClick={() => {
-              setChickinFormErrorMessage('');
-            }}
-          >
-            <Icon icon='mdi:times' />
-            <span>{chickinFormErrorMessage}</span>
+      <DrawerHeader
+        subtitle={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
+        leftIcon='mdi:arrow-left'
+        leftIconHref={`/production/project-flock/detail?projectFlockId=${initialValues?.project_flock?.id}`}
+      />
+
+      {/* Informasi Kandang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-xl font-semibold'>Informasi Kandang</h2>
+
+        {approvals && !approvalsLoading && (
+          <div className='mb-3 text-sm'>
+            <ApprovalSteps approvals={approvals} />
           </div>
         )}
-        <div className='flex justify-center mt-auto gap-2'>
-          <Button color='warning' type='reset'>
-            Reset
-          </Button>
-          <Button
-            type='submit'
-            isLoading={formik.isSubmitting}
-            disabled={
-              !formik.isValid ||
-              formik.isSubmitting ||
-              !initialValues?.project_flock_kandang?.id
-            }
+
+        {/* Badge Row */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color='success'
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
           >
-            Submit
-          </Button>
+            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+            Aktif
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2' }}
+          >
+            <Icon icon='mdi:home' width={12} height={12} />
+            {` Kapasitas ${formatNumber(initialValues.kandang.capacity)} Ekor`}
+          </Badge>
         </div>
-      </form>
+
+        {/* Information Grid */}
+        <div className='grid grid-cols-3 gap-4'>
+          {/* Area */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+          </div>
+          <div className='col-span-2'>
+            {initialValues.project_flock.area.name}
+          </div>
+
+          {/* Lokasi */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+          </div>
+          <div className='col-span-2'>
+            {initialValues.project_flock?.location.name}
+          </div>
+
+          {/* Kandang */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
+          </div>
+          <div className='col-span-2'>{initialValues.kandang.name}</div>
+
+          {/* Jumlah DOC */}
+          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
+          </div>
+          <div className='col-span-2'>
+            {formatNumber(
+              initialValues.chickins?.reduce(
+                (total, chickin) => total + chickin.usage_qty,
+                0
+              ) ?? 0
+            )}{' '}
+            Ekor
+          </div>
+        </div>
+      </div>
+
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-xl font-semibold'>Informasi Chick In</h2>
+        {/* Badge Row  */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color={'success'}
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
+          >
+            <Icon icon='mdi:circle' width={12} height={12} color={'success'} />{' '}
+            Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
+            onClick={() => setOpenChickin(!openChickin)}
+          >
+            {`Riwayat Chick In ${formatNumber(initialValues.chickins?.length ?? 0)}`}
+            <Icon
+              icon={`mdi:${openChickin ? 'eye' : 'eye-off'}`}
+              width={12}
+              height={12}
+            />
+          </Badge>
+        </div>
+      </div>
+      {openChickin && (
+        <ChickinLogsView
+          initialValues={initialValues}
+          afterSubmit={afterSubmitFormChickin}
+        />
+      )}
+      <ChickinFormView
+        initialValues={initialValues}
+        formType={formType}
+        afterSubmit={afterSubmitFormChickin}
+      />
     </>
   );
 };
 
-export default ChickinForm;
+export default ChickinFormKandang;
diff --git a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
new file mode 100644
index 00000000..99eb1cb3
--- /dev/null
+++ b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
@@ -0,0 +1,186 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { useModal } from '@/components/Modal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import PillBadge from '@/components/PillBadge';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { formatDate, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production/chickin';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const ChickinLogsView = ({
+  initialValues,
+  afterSubmit,
+}: {
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const confirmModal = useModal();
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const handleClickApprove = () => {
+    confirmModal.openModal();
+  };
+
+  const confirmationModalApproveClickHandler = async (notes?: string) => {
+    setChickinErrorMessage('');
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.singleApproval(
+      initialValues?.id as number,
+      'APPROVED',
+      notes
+    );
+    if (isResponseSuccess(approveChickinRes)) {
+      toast.success(approveChickinRes?.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+      setChickinErrorMessage(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+    afterSubmit && afterSubmit();
+  };
+
+  return (
+    <>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        {/* Card List Chickin Logs */}
+        {(initialValues?.chickins || []).length === 0 ? (
+          <div className='w-full p-8 text-center'>
+            <span className='text-lg opacity-50'>
+              Belum ada riwayat Chick In...
+            </span>
+          </div>
+        ) : (
+          (initialValues?.chickins || []).map((chickin, index) => {
+            const isApproved = chickin.usage_qty !== 0;
+            const isPending = chickin.pending_usage_qty !== 0;
+            const quantity = isApproved
+              ? chickin.usage_qty
+              : isPending
+                ? chickin.pending_usage_qty
+                : 0;
+
+            return (
+              <Card
+                key={chickin.id || index}
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full',
+                  body: 'p-3',
+                }}
+              >
+                <div className='flex flex-col gap-4'>
+                  {/* Header with Status Badge */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='text-lg font-semibold'>
+                      Chick In #{index + 1}
+                    </div>
+                    <PillBadge
+                      content={
+                        isApproved ? 'Disetujui' : isPending ? 'Pending' : '-'
+                      }
+                      color={
+                        isApproved ? 'green' : isPending ? 'yellow' : 'gray'
+                      }
+                    />
+                  </div>
+
+                  {/* Tanggal Chick In */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:calendar'} width={14} height={14} />{' '}
+                      <span>Tanggal Chick In</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
+                    </div>
+                  </div>
+
+                  {/* Kandang */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:home'} width={14} height={14} />{' '}
+                      <span>Kandang</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {chickin.product_warehouse?.warehouse?.name || '-'}
+                    </div>
+                  </div>
+
+                  {/* Produk */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon
+                        icon={'mdi:package-variant'}
+                        width={14}
+                        height={14}
+                      />{' '}
+                      <span>Produk</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {chickin.product_warehouse?.product?.name || '-'}
+                    </div>
+                  </div>
+
+                  {/* Jumlah Chick In */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:counter'} width={14} height={14} />{' '}
+                      <span>Jumlah Chick In</span>
+                    </div>
+                    <div className='text-end text-gray-500 font-semibold'>
+                      {quantity > 0 ? `${formatNumber(quantity)} Ekor` : '-'}
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            );
+          })
+        )}
+
+        {initialValues?.approval?.step_number <= 2 && (
+          <Button
+            color='success'
+            onClick={handleClickApprove}
+            className='w-full'
+          >
+            <Icon width={24} height={24} icon='material-symbols:check' />
+            Approve Semua Chick In
+          </Button>
+        )}
+
+        {chickinErrorMessage && (
+          <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+            <Alert color='error'>{chickinErrorMessage}</Alert>
+          </div>
+        )}
+      </div>
+
+      <ConfirmationModalWithNotes
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data Chickin yang Pending?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: (notes) => {
+            confirmationModalApproveClickHandler(notes);
+          },
+          isLoading: isApproveLoading,
+        }}
+      />
+    </>
+  );
+};
+
+export default ChickinLogsView;
diff --git a/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
new file mode 100644
index 00000000..2dcc502e
--- /dev/null
+++ b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from '@/components/pages/production/chickin/form/ChickinForm.schema';
+import DateInput from '@/components/input/DateInput';
+import Button from '@/components/Button';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import { flushSync } from 'react-dom';
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production/chickin';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { useRouter } from 'next/navigation';
+import Alert from '@/components/Alert';
+import { formatNumber } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+
+const ChickinFormView = ({
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      // router.push(
+      //   `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      // );
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+    [router]
+  );
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
+  return (
+    <form
+      className='flex flex-col gap-4 p-4'
+      onReset={() => {
+        handleReset();
+      }}
+      onSubmit={formik.handleSubmit}
+    >
+      {(formik.values.chickin_requests || []).map((chickinRequest, index) => {
+        const availableQty = initialValues?.available_qtys?.find(
+          (availableQty) =>
+            availableQty.product_warehouse.id ===
+            chickinRequest.product_warehouse_id
+        );
+        return (
+          <Card
+            key={index}
+            // title={`${formatNumber(availableQty?.available_qty ?? 0)} Ekor - ${availableQty?.product_warehouse?.product?.name}`}
+            variant='bordered'
+            size='sm'
+            className={{
+              wrapper: 'w-full',
+              body: 'p-3',
+            }}
+          >
+            <div className='flex flex-row justify-between items-center'>
+              <div className='text-lg font-semibold'>
+                {formatNumber(availableQty?.available_qty ?? 0)} Ekor -{' '}
+                {availableQty?.product_warehouse?.product?.name}
+              </div>
+              {chickinRequest.chick_in_date && (
+                <Icon
+                  icon='mdi:check-circle-outline'
+                  color='success'
+                  className='text-success'
+                  width={20}
+                  height={20}
+                />
+              )}
+            </div>
+            <DateInput
+              className={{
+                wrapper: 'w-full',
+                inputWrapper: 'bg-white',
+              }}
+              label='Tanggal Chick In'
+              name={`chickin_requests[${index}].chick_in_date`}
+              value={chickinRequest.chick_in_date}
+              onChange={formik.handleChange}
+            />
+          </Card>
+        );
+      })}
+      {/* <Table<ChickinRequestFormValues>
+        data={formik.values.chickin_requests || []}
+        columns={[
+          {
+            accessorFn: (row) => row.chick_in_date,
+            header: 'Tanggal Chick In',
+            cell(props) {
+              return (
+                <DateInput
+                  className={{
+                    wrapper: 'w-fit',
+                    inputWrapper: 'bg-white',
+                  }}
+                  name={`chickin_requests[${props.row.index}].chick_in_date`}
+                  value={
+                    formik.values.chickin_requests[props.row.index]
+                      ?.chick_in_date as string
+                  }
+                  onChange={formik.handleChange}
+                />
+              );
+            },
+          },
+          {
+            accessorFn: (row) => row.product_warehouse_id,
+            header: 'Produk',
+            cell(props) {
+              const availableQty = initialValues?.available_qtys?.find(
+                (availableQty) =>
+                  availableQty.product_warehouse.id ===
+                  props.row.original.product_warehouse_id
+              );
+              return (
+                <div>{availableQty?.product_warehouse?.product?.name}</div>
+              );
+            },
+          },
+          {
+            accessorFn: (row) => row.product_warehouse_id,
+            header: 'Jumlah (ekor)',
+            cell(props) {
+              const availableQty = initialValues?.available_qtys?.find(
+                (availableQty) =>
+                  availableQty.product_warehouse.id ===
+                  props.row.original.product_warehouse_id
+              );
+              return (
+                <div>
+                  {availableQty?.available_qty
+                    ? formatNumber(availableQty?.available_qty)
+                    : '-'}
+                </div>
+              );
+            },
+          },
+        ]}
+        className={{
+          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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div className='w-full p-5 text-center'>
+            <span className='text-lg opacity-50'>
+              Isi persediaan DOC untuk kandang belum tersedia...
+            </span>
+          </div>
+        }
+      /> */}
+      {formik.values.chickin_requests?.length > 0 && (
+        <Button
+          type='submit'
+          color='primary'
+          disabled={!formik.isValid || formik.isSubmitting}
+        >
+          <Icon icon='mdi:checkbox-marked-outline' width={24} height={24} />
+          Chick In
+        </Button>
+      )}
+      {chickinErrorMessage && (
+        <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+          <Alert color='error'>{chickinErrorMessage}</Alert>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default ChickinFormView;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 99f26721..4be30f7a 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -1,29 +1,27 @@
 'use client';
 
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
+import FloatingActionsButton from '@/components/FloatingActionsButton';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatDate } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
-import {
-  ProjectFlockApprovalPayload,
-  ProjectFlock,
-} from '@/types/api/production/project-flock';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
-import { ChangeEventHandler, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -44,59 +42,60 @@ const RowOptionsMenu = ({
           'dropdown-content': type === 'dropdown',
           'mt-2': type === 'collapse',
         },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      <Button
-        href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      {props.row.original.approval.step_name === 'Aktif' && (
+      <div className='flex flex-col gap-1'>
         <Button
-          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
           variant='ghost'
-          color='success'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='mdi:home-import-outline' width={16} height={16} />
-          Chickin
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
         </Button>
-      )}
-      {props.row.original.approval.step_name === 'Pengajuan' && (
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <Button
+            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:home-import-outline' width={16} height={16} />
+            Chickin
+          </Button>
+        )}
+        {props.row.original.approval.step_name === 'Pengajuan' && (
+          <Button
+            href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:pencil-outline' width={16} height={16} />
+            Edit
+          </Button>
+        )}
         <Button
-          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          onClick={deleteClickHandler}
           variant='ghost'
-          color='warning'
-          className='justify-start text-sm'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
-          <Icon icon='mdi:pencil-outline' width={16} height={16} />
-          Edit
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+          />
+          Delete
         </Button>
-      )}
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+      </div>
     </div>
   );
 };
 
-const ProjectFlockTable = () => {
+const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const {
     state: tableFilterState,
     updateFilter,
@@ -121,8 +120,9 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+  const router = useRouter();
 
-  // State
+  // ===== State =====
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection)
     .filter((id) => rowSelection[id])
@@ -143,17 +143,21 @@ const ProjectFlockTable = () => {
     useState<ProjectFlock>();
   const deleteModal = useModal();
   const confirmModal = useModal();
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
-  // Fetch Data
+  // ===== Fetch Data =====
   const {
     data: projectFlocks,
     isLoading,
     mutate: refreshProjectFlocks,
   } = useSWR(
     `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
+    ProjectFlockApi.getAllFetcher,
+    { revalidateOnMount: true }
   );
 
   const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
@@ -186,7 +190,7 @@ const ProjectFlockTable = () => {
     KandangApi.getAllFetcher
   );
 
-  // Data to Options Mapping
+  // ===== Data to Options Mapping ======
   const optionsArea = isResponseSuccess(areas)
     ? areas?.data.map((area) => ({
         value: area.id,
@@ -206,7 +210,7 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // Handler
+  // ====== HANDLER ======
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
     setPageSize(newVal.value as number);
@@ -214,29 +218,32 @@ const ProjectFlockTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
+    await ProjectFlockApi.delete(selectedSingleRow?.id as number);
     refreshProjectFlocks();
 
     deleteModal.closeModal();
     toast.success('Successfully delete Project Flock!');
     setIsDeleteLoading(false);
+    setRowSelection({});
   };
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmApprovalHandler = async (
+    notes: string,
+    approvalAction: 'APPROVED' | 'REJECTED'
+  ) => {
     setIsApproveLoading(true);
-    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
-      BaseApiResponse<ProjectFlock>,
-      ProjectFlockApprovalPayload
-    >(`/approvals`, {
-      method: 'POST',
-      payload: {
-        action: 'APPROVED',
-        approvable_ids: selectedRowIds.map((id) => id),
-      },
-    });
+    const approveProjectFlockRes =
+      approvalAction === 'APPROVED'
+        ? await ProjectFlockApi.bulkApprove(
+            selectedRowIds.map((id) => id),
+            notes
+          )
+        : await ProjectFlockApi.bulkReject(
+            selectedRowIds.map((id) => id),
+            notes
+          );
 
     if (isResponseSuccess(approveProjectFlockRes)) {
       toast.success('Project Flock berhasil di-approve!');
@@ -251,24 +258,48 @@ const ProjectFlockTable = () => {
     setIsApproveLoading(false);
   };
 
+  // ====== EFFECT ======
+  useEffect(() => {
+    refreshProjectFlocks();
+  }, [refresh]);
+
+  // ====== MEMO ======
+  const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
+    return selectedRowIds.length === 1
+      ? isResponseSuccess(projectFlocks)
+        ? projectFlocks?.data.find((row) => row.id === selectedRowIds[0])
+        : null
+      : null;
+  }, [rowSelection]);
+
+  const canApprove = useMemo(() => {
+    if (!selectedSingleRow || isApproveLoading) return false;
+
+    const isPengajuan = selectedSingleRow.approval.step_number == 1;
+    const isNotRejected = selectedSingleRow.approval.action != 'REJECTED';
+
+    return isPengajuan && isNotRejected;
+  }, [selectedSingleRow, isApproveLoading]);
+
   return (
     <>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='min-h-screen w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
               <Button
-                href='/production/project-flock/add'
                 color='primary'
                 className='w-full sm:w-fit'
+                href='/production/project-flock/add'
               >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
-              <Button
+              {/* <Button
                 variant='outline'
                 color='success'
                 onClick={() => {
+                  setApprovalAction('APPROVED');
                   confirmModal.openModal();
                 }}
                 disabled={selectedRowIds.length === 0}
@@ -277,6 +308,19 @@ const ProjectFlockTable = () => {
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
               </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  setApprovalAction('REJECTED');
+                  confirmModal.openModal();
+                }}
+                disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button> */}
               <div className='ms-auto w-full sm:w-auto'>
                 <DebouncedTextInput
                   name='search'
@@ -368,13 +412,11 @@ const ProjectFlockTable = () => {
                 id: 'select',
                 header: ({ table }) => {
                   const allRows = table.getRowModel().rows;
-                  const selectableRows = allRows.filter(
-                    (row) => row.original?.approval?.step_number == 1
-                  );
-                  
-                  const allSelected = selectableRows.every((row) =>
-                    row.getIsSelected()
-                  ) && selectableRows.length != 0;
+                  const selectableRows = allRows;
+
+                  const allSelected =
+                    selectableRows.every((row) => row.getIsSelected()) &&
+                    selectableRows.length != 0;
 
                   const someSelected =
                     selectableRows.some((row) => row.getIsSelected()) &&
@@ -394,12 +436,6 @@ const ProjectFlockTable = () => {
                         checked={allSelected}
                         indeterminate={someSelected}
                         onChange={toggleSelectableRows}
-                        disabled={
-                          isResponseSuccess(projectFlocks) &&
-                          projectFlocks?.data?.filter(
-                            (flock) => flock.approval.step_number == 1
-                          ).length == 0
-                        }
                       />
                     </div>
                   );
@@ -408,14 +444,8 @@ const ProjectFlockTable = () => {
                   return (
                     <CheckboxInput
                       name='row'
-                      checked={
-                        row.getIsSelected() &&
-                        row.original.approval.step_number == 1
-                      }
-                      disabled={
-                        !row.getCanSelect() ||
-                        row.original.approval.step_number != 1
-                      }
+                      checked={row.getIsSelected()}
+                      disabled={!row.getCanSelect()}
                       indeterminate={row.getIsSomeSelected()}
                       onChange={row.getToggleSelectedHandler()}
                     />
@@ -424,7 +454,7 @@ const ProjectFlockTable = () => {
               },
 
               {
-                accessorKey: 'flock.name',
+                accessorKey: 'flock_name',
                 header: 'Flock',
               },
               {
@@ -446,6 +476,40 @@ const ProjectFlockTable = () => {
               {
                 accessorKey: 'approval.step_name',
                 header: 'Status',
+                cell: (props) => {
+                  const approval = props.row.original.approval;
+
+                  return (
+                    <Badge
+                      variant='soft'
+                      className={{
+                        badge:
+                          'rounded-lg px-2 w-full flex flex-row justify-start',
+                      }}
+                      color={
+                        approval.step_number == 1
+                          ? 'neutral'
+                          : approval.step_number == 2
+                            ? 'success'
+                            : 'error'
+                      }
+                    >
+                      <Icon
+                        icon='mdi:circle'
+                        width={12}
+                        height={12}
+                        color={
+                          approval.step_number == 1
+                            ? 'neutral'
+                            : approval.step_number == 2
+                              ? 'success'
+                              : 'error'
+                        }
+                      />
+                      {approval.step_name}
+                    </Badge>
+                  );
+                },
               },
               {
                 header: 'Kandang',
@@ -473,51 +537,51 @@ const ProjectFlockTable = () => {
                 accessorKey: 'created_at',
                 header: 'Dibuat pada',
                 cell: (props) =>
-                  new Date(props.row.original.created_at).toLocaleDateString(),
+                  formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
               },
-              {
-                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;
+              // {
+              //   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 - 2;
+              //     const isLast2Rows =
+              //       currentRowRelativeIndex > currentPageSize - 2;
 
-                  const deleteClickHandler = () => {
-                    setSelectedProjectFlock(props.row.original);
-                    deleteModal.openModal();
-                  };
+              //     const deleteClickHandler = () => {
+              //       setSelectedProjectFlock(props.row.original);
+              //       deleteModal.openModal();
+              //     };
 
-                  return (
-                    <>
-                      {currentPageSize > 2 && (
-                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                          <RowOptionsMenu
-                            type='dropdown'
-                            props={props}
-                            deleteClickHandler={deleteClickHandler}
-                          />
-                        </RowDropdownOptions>
-                      )}
+              //     return (
+              //       <>
+              //         {currentPageSize > 2 && (
+              //           <RowDropdownOptions isLast2Rows={isLast2Rows}>
+              //             <RowOptionsMenu
+              //               type='dropdown'
+              //               props={props}
+              //               deleteClickHandler={deleteClickHandler}
+              //             />
+              //           </RowDropdownOptions>
+              //         )}
 
-                      {currentPageSize <= 2 && (
-                        <RowCollapseOptions>
-                          <RowOptionsMenu
-                            type='dropdown'
-                            props={props}
-                            deleteClickHandler={deleteClickHandler}
-                          />
-                        </RowCollapseOptions>
-                      )}
-                    </>
-                  );
-                },
-              },
+              //         {currentPageSize <= 2 && (
+              //           <RowCollapseOptions>
+              //             <RowOptionsMenu
+              //               type='collapse'
+              //               props={props}
+              //               deleteClickHandler={deleteClickHandler}
+              //             />
+              //           </RowCollapseOptions>
+              //         )}
+              //       </>
+              //     );
+              //   },
+              // },
             ]}
             pageSize={tableFilterState.pageSize}
             page={
@@ -553,10 +617,61 @@ const ProjectFlockTable = () => {
         </div>
       </div>
 
+      <FloatingActionsButton
+        actions={[
+          {
+            action: 'DETAIL',
+            icon: 'mdi:eye-outline',
+            label: 'Lihat Detail',
+            hidden: selectedRowIds.length !== 1,
+            onClick() {
+              router.push(
+                `/production/project-flock/detail?projectFlockId=${selectedRowIds[0]}`
+              );
+              setRowSelection({});
+            },
+          },
+          {
+            action: 'DELETE',
+            icon: 'material-symbols:delete-outline-rounded',
+            label: `Hapus data`,
+            hidden: selectedRowIds.length !== 1,
+            onClick: () => {
+              deleteModal.openModal();
+            },
+          },
+        ]}
+        approvals={[
+          {
+            icon: 'material-symbols:check',
+            label: 'Approve',
+            action: 'APPROVED',
+            onClick: () => {
+              setApprovalAction('APPROVED');
+              confirmModal.openModal();
+            },
+            disabled: !canApprove,
+          },
+          {
+            icon: 'mdi:times',
+            label: 'Reject',
+            action: 'REJECTED',
+            onClick: () => {
+              setApprovalAction('REJECTED');
+              confirmModal.openModal();
+            },
+          },
+        ]}
+        selectedRowIds={selectedRowIds}
+        onClose={() => {
+          setRowSelection({});
+        }}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock_name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -568,29 +683,19 @@ const ProjectFlockTable = () => {
         }}
       />
 
-      <ConfirmationModal
+      <ConfirmationModalWithNotes
         ref={confirmModal.ref}
-        type='success'
-        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
-        // text={
-        //   selectedFlocks.length > 0
-        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-        //         .map(
-        //           (flock) =>
-        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-        //               flock.area?.name ?? '-'
-        //             }`
-        //         )
-        //         .join(', ')})`
-        //     : 'Tidak ada Project Flock yang dipilih.'
-        // }
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data Project Flock ini (${selectedRowIds.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'success',
-          onClick: confirmationModalApproveClickHandler,
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          onClick: (notes) => {
+            confirmApprovalHandler(notes, approvalAction);
+          },
           isLoading: isApproveLoading,
         }}
       />
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
new file mode 100644
index 00000000..3b2b8f45
--- /dev/null
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -0,0 +1,640 @@
+'use client';
+
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatDate, formatTitleCase } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import Link from 'next/link';
+
+const ProjectFlockChickinDetail = ({
+  projectFlockId,
+}: {
+  projectFlockId: number | undefined;
+}) => {
+  const router = useRouter();
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
+
+  // Fetch Data
+  const { data: listProjectFlockKandang } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );
+
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    '',
+    {
+      search: searchProjectFlock,
+    }
+  );
+
+  // Handle Function
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
+    router.push(
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+    );
+  };
+
+  const handleChangeProjectFlock = (val: OptionType | null) => {
+    setSelectedProjectFlock(val);
+    if (isResponseSuccess(listProjectFlock) && val) {
+      const selected = listProjectFlock.data.find(
+        (pf) => pf.id === Number(val.value)
+      );
+      setProjectFlock(selected);
+    } else {
+      setProjectFlock(undefined);
+    }
+    if (projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+    if (!val && projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+  };
+
+  useEffect(() => {
+    if (projectFlockId && isResponseSuccess(listProjectFlock)) {
+      setProjectFlock(
+        listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
+      );
+    }
+  }, [projectFlockId, listProjectFlock]);
+  return (
+    <>
+      {/* Header */}
+      <div className='flex flex-row justify-between items-center px-4 py-4'>
+        <div className='flex flex-row items-center h-full gap-2'>
+          <Link
+            href={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
+            className='hover:text-gray-400'
+          >
+            <Icon icon='mdi:arrow-left' width={24} height={24} />
+          </Link>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <div className='text-sm text-neutral'>
+            Chick In {projectFlock?.flock_name}
+          </div>
+        </div>
+      </div>
+      {/* <FormHeader
+        title={`Chick In ${projectFlock?.flock_name ?? 'Project Flock'}`}
+        backUrl={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
+      /> */}
+      {/* <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
+            label='Ganti Project Flock'
+            placeholder='Pilih Project Flock'
+            options={options}
+            onInputChange={(val) => {
+              setSearchProjectFlock(val);
+            }}
+            isLoading={isLoadingListProjectFlock}
+            value={
+              projectFlock
+                ? {
+                    label: `${projectFlock?.flock_name}`,
+                    value: projectFlock?.id,
+                  }
+                : null
+            }
+            onChange={(val) => {
+              handleChangeProjectFlock(val as OptionType | null);
+            }}
+            isSearchable
+            isClearable
+            startAdornment={
+              projectFlock && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{
+                    badge: 'whitespace-nowrap font-semibold',
+                  }}
+                >
+                  Periode {projectFlock?.period}
+                </Badge>
+              )
+            }
+          />
+        </div>
+      </div> */}
+      {/* Informasi Umum */}
+      {projectFlock && (
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={
+                  projectFlock.approval.step_number == 1
+                    ? 'neutral'
+                    : projectFlock.approval.step_number == 2
+                      ? 'success'
+                      : projectFlock.approval.step_number >= 3
+                        ? 'error'
+                        : undefined
+                }
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={
+                    projectFlock.approval.step_number == 1
+                      ? 'neutral'
+                      : projectFlock.approval.step_number == 2
+                        ? 'success'
+                        : projectFlock.approval.step_number >= 3
+                          ? 'error'
+                          : undefined
+                  }
+                />{' '}
+                {projectFlock.approval.step_name}
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2' }}
+              >
+                <Icon icon='mdi:bookmark' width={12} height={12} />
+                {` ${formatTitleCase(projectFlock.category)}`}
+              </Badge>
+            </div>
+            {/* Information Grid */}
+            <div className='grid grid-cols-3 gap-4'>
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:account' /> Submitted
+              </div>
+              <div className='col-span-2'>
+                <Badge
+                  variant='soft'
+                  color='neutral'
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
+                  {projectFlock.created_user.name}
+                </Badge>
+              </div>
+
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon={'mdi:clock'} /> History
+              </div>
+              <div className='col-span-2'>
+                <Button variant='outline' className='py-1 text-sm'>
+                  See History{' '}
+                  <Icon
+                    icon='mdi:arrow-top-right-thin'
+                    width={11}
+                    height={11}
+                  />
+                </Button>
+              </div>
+
+              {/* BARIS 1 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+              </div>
+              <div className='col-span-2'>{projectFlock.area.name}</div>
+
+              {/* BARIS 2 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+              </div>
+              <div className='col-span-2'>{projectFlock.location.name}</div>
+
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
+              </div>
+              <div className='col-span-2'>{projectFlock.fcr.name}</div>
+
+              {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
+                Kategori
+              </div>
+              <div className='col-span-2'>
+                {formatTitleCase(projectFlock.category)}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* <Card
+        title='Informasi Flock'
+        className={{
+          wrapper: 'w-full bg-white mb-3',
+        }}
+      >
+        <Table<ProjectFlock>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={projectFlock ? [projectFlock] : []}
+          columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
+            {
+              header: 'Area',
+              accessorKey: 'area.name',
+            },
+            {
+              header: 'Lokasi',
+              accessorKey: 'location.name',
+            },
+            {
+              header: 'Nama Flock',
+              accessorKey: 'flock_name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'category',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'AKTIF':
+                          return 'red';
+                        case 'PENGAJUAN':
+                          return 'green';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  '-'
+                );
+              },
+            },
+            {
+              header: 'FCR Layer',
+              accessorKey: 'fcr.name',
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.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',
+          }}
+        />
+      </Card> */}
+      {/* Card Kandangs */}
+      <div className='border-t-1 border-gray-300'>
+        <div className='p-4 flex flex-col gap-4'>
+          <h2 className='text-2xl font-semibold'>Daftar Kandang</h2>
+          {isResponseSuccess(listProjectFlock) ? (
+            <>
+              {/* Badge Row  */}
+              <div className='flex flex-row gap-2'>
+                <Badge
+                  variant='soft'
+                  color={'success'}
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon
+                    icon='mdi:circle'
+                    width={12}
+                    height={12}
+                    color={'success'}
+                  />{' '}
+                  Disetujui (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval?.step_number == 1
+                    ).length}
+                  )
+                </Badge>
+                <div className='divider divider-horizontal p-0 m-0'></div>
+                <Badge
+                  variant='soft'
+                  color={'neutral'}
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon
+                    icon='mdi:circle'
+                    width={12}
+                    height={12}
+                    color={'neutral'}
+                  />{' '}
+                  Pengajuan (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval?.step_number == 2
+                    ).length}
+                  )
+                </Badge>
+                <div className='divider divider-horizontal p-0 m-0'></div>
+                <Badge
+                  color='error'
+                  variant='soft'
+                  className={{ badge: 'rounded-lg px-2' }}
+                >
+                  <Icon
+                    icon={`mdi:circle`}
+                    width={12}
+                    height={12}
+                    color='error'
+                  />
+                  Belum Chickin (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval == null
+                    ).length}
+                  )
+                </Badge>
+              </div>
+              {/* Card Kandang */}
+              <Card
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full',
+                  body: 'p-3',
+                }}
+              >
+                <div className='flex flex-col gap-6'>
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.map((kandang) => (
+                      <div
+                        key={kandang.id}
+                        className='flex flex-row justify-between items-center'
+                      >
+                        <div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
+                          <Badge
+                            variant='soft'
+                            color={
+                              kandang.approval
+                                ? kandang.approval.step_number == 1
+                                  ? 'success'
+                                  : 'neutral'
+                                : 'error'
+                            }
+                            className={{
+                              badge: 'rounded-lg px-2',
+                            }}
+                          >
+                            <Icon
+                              icon='mdi:circle'
+                              width={12}
+                              height={12}
+                              color={
+                                kandang.approval
+                                  ? kandang.approval.step_number == 1
+                                    ? 'success'
+                                    : 'neutral'
+                                  : 'gray'
+                              }
+                            />
+                          </Badge>
+                          <span className='font-semibold'>
+                            {kandang.kandang.name}
+                          </span>
+                        </div>
+                        <Button
+                          variant='outline'
+                          className='py-1 text-sm'
+                          onClick={() => {
+                            handleChickinClick(kandang);
+                          }}
+                          disabled={projectFlock?.approval?.step_number === 1}
+                        >
+                          Chick In{' '}
+                          <Icon
+                            icon='mdi:arrow-top-right-thin'
+                            width={11}
+                            height={11}
+                          />
+                        </Button>
+                      </div>
+                    ))}
+                </div>
+              </Card>
+            </>
+          ) : (
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+      {/* <Card
+        title='Daftar Kandang'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ProjectFlockKandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={
+            projectFlock && isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
+          columns={[
+            {
+              header: '#',
+              cell: (props) =>
+                tableFilterState.pageSize * (tableFilterState.page - 1) +
+                props.row.index +
+                1,
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.area?.name,
+              header: 'Area',
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.location?.name,
+              header: 'Lokasi',
+            },
+            {
+              accessorKey: 'kandang.name',
+              header: 'Kandang',
+            },
+            {
+              accessorKey: 'kandang.capacity',
+              header: 'Kapasitas',
+            },
+            {
+              accessorFn: () => projectFlock?.period,
+              header: 'Periode',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'PENGAJUAN':
+                          return 'yellow';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : projectFlock?.approval?.step_number === 1 ? (
+                  <PillBadge color='red' content={'Tidak Dapat Chick In'} />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                return (
+                  <>
+                    <Button
+                      color='success'
+                      variant='outline'
+                      onClick={() => {
+                        handleChickinClick(props.row.original);
+                      }}
+                      className='p-1'
+                      disabled={projectFlock?.approval?.step_number === 1}
+                    >
+                      <Icon
+                        icon='mdi:home-import-outline'
+                        width={18}
+                        height={18}
+                      />
+                      Chickin
+                    </Button>
+                  </>
+                );
+              },
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.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',
+          }}
+        />
+      </Card> */}
+    </>
+  );
+};
+
+export default ProjectFlockChickinDetail;
diff --git a/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
new file mode 100644
index 00000000..26072927
--- /dev/null
+++ b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
@@ -0,0 +1,305 @@
+'use client';
+
+import Button from '@/components/Button';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import Table from '@/components/Table';
+import Badge from '@/components/Badge';
+import { cn, formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import {
+  ClosingExpense,
+  ProjectFlockKandang,
+  StockItem,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import useSWR from 'swr';
+import { ProjectFlockKandangApi } from '@/services/api/production/project-flock-kandang';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+
+const ProjectFlockClosingForm = ({
+  projectFlock,
+  projectFlockKandang,
+}: {
+  projectFlock: ProjectFlock;
+  projectFlockKandang: ProjectFlockKandang;
+}) => {
+  const router = useRouter();
+  const closeModal = useModal();
+  const isCanClose = projectFlock.approval?.step_number <= 2;
+  const [isClosingLoading, setIsClosingLoading] = useState(false);
+
+  const { data: closingData, isLoading } = useSWR(
+    `${ProjectFlockKandangApi.basePath}/${projectFlockKandang.id}/closing`,
+    () => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
+  );
+
+  const confirmationModalCloseClickHandler = async () => {
+    setIsClosingLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
+      projectFlockKandang?.id as number,
+      {
+        closed_date: formatDate(new Date(), 'YYYY-MM-DD'),
+        action: isCanClose ? 'close' : 'unclose',
+      }
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push(`/production/project-flock`);
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsClosingLoading(false);
+    closeModal.closeModal();
+  };
+
+  const errorStock = useMemo(() => {
+    return isResponseSuccess(closingData)
+      ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
+      : true;
+  }, [closingData]);
+
+  const errorExpense = useMemo(() => {
+    return isResponseSuccess(closingData)
+      ? closingData?.data?.expenses.every((expense) => expense.step < 5)
+      : true;
+  }, [closingData]);
+
+  const isCanCloseValid = true;
+
+  return (
+    <>
+      <DrawerHeader
+        leftIcon='mdi:arrow-left'
+        leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
+        subtitle={`Close ${projectFlock.flock_name}`}
+      ></DrawerHeader>
+
+      {/* Informasi Kandang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-2xl font-semibold'>Informasi Kandang</h2>
+
+        {/* Badge Row */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color='success'
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
+          >
+            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+            Aktif
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2' }}
+          >
+            <Icon icon='mdi:home' width={12} height={12} />
+            {` Kapasitas ${formatNumber(projectFlockKandang.kandang?.capacity)} Ekor`}
+          </Badge>
+        </div>
+
+        {/* Information Grid */}
+        <div className='grid grid-cols-3 gap-4'>
+          {/* Area */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+          </div>
+          <div className='col-span-2'>{projectFlock.area?.name}</div>
+
+          {/* Lokasi */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+          </div>
+          <div className='col-span-2'>{projectFlock.location?.name}</div>
+
+          {/* Kandang */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
+          </div>
+          <div className='col-span-2'>{projectFlockKandang.kandang?.name}</div>
+
+          {/* Jumlah DOC */}
+          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
+          </div>
+          <div className='col-span-2'>
+            {formatNumber(
+              projectFlockKandang.chickins?.reduce(
+                (total, chickin) => total + chickin.usage_qty,
+                0
+              ) ?? 0
+            )}{' '}
+            Ekor
+          </div>
+        </div>
+      </div>
+
+      {/* Table Biaya */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4'>
+        <h2 className='text-2xl font-semibold'>Biaya</h2>
+        <Table<ClosingExpense>
+          data={
+            isResponseSuccess(closingData) ? closingData.data?.expenses : []
+          }
+          columns={[
+            {
+              header: 'PO Number',
+              accessorKey: 'po_number',
+            },
+            {
+              header: 'Total',
+              accessorKey: 'total',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell(props) {
+                return (
+                  <Badge
+                    className={{
+                      badge: 'rounded-lg',
+                    }}
+                    variant='soft'
+                    color={
+                      props.row.original.step < 5
+                        ? props.row.original.step == 1
+                          ? 'neutral'
+                          : 'success'
+                        : 'error'
+                    }
+                  >
+                    {formatTitleCase(props.row.original.step_name)}
+                  </Badge>
+                );
+              },
+            },
+          ]}
+          className={{
+            containerClassName: cn('my-4'),
+            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
+            tableClassName: 'font-inter w-full table-sm min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {/* {errorExpense && (
+          <div className='text-center text-error text-sm'>
+            *Pastikan semua biaya sudah selesai sebelum melakukan closing.
+          </div>
+        )} */}
+      </div>
+
+      {/* Table Persediaan Gudang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4'>
+        <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
+        <Table<StockItem>
+          data={
+            isResponseSuccess(closingData)
+              ? closingData.data?.stock_remaining
+              : []
+          }
+          columns={[
+            {
+              header: 'Product',
+              accessorKey: 'product_name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'product_category',
+            },
+            {
+              header: 'Quantity',
+              accessorKey: 'quantity',
+            },
+            {
+              header: 'UOM',
+              accessorKey: 'uom',
+            },
+          ]}
+          className={{
+            containerClassName: cn('my-4'),
+            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
+            tableClassName: 'font-inter w-full table-sm min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {/* {errorStock && (
+          <div className='text-center text-error text-sm'>
+            *Masih ada sisa stock yang belum dihabiskan.
+          </div>
+        )} */}
+      </div>
+
+      <div className='p-4 mt-6'>
+        <Button
+          className='w-full'
+          color='error'
+          isLoading={isLoading}
+          disabled={!isCanCloseValid}
+          onClick={() => closeModal.openModal()}
+        >
+          <Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
+          {isCanClose ? 'Close' : 'Unclose'}
+        </Button>
+      </div>
+
+      <ConfirmationModal
+        ref={closeModal.ref}
+        type='error'
+        text={
+          isCanClose
+            ? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
+            : 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
+        }
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isClosingLoading,
+          onClick: confirmationModalCloseClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockClosingForm;
diff --git a/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx b/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
new file mode 100644
index 00000000..92510a8d
--- /dev/null
+++ b/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
@@ -0,0 +1,476 @@
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
+import Tooltip from '@/components/Tooltip';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import {
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatTitleCase,
+} from '@/lib/helper';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import {
+  PROJECT_FLOCK_APPROVAL_LINE,
+  PROJECT_FLOCK_KANDANGS_APPROVAL_LINE,
+} from '@/config/approval-line';
+import useSWR from 'swr';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+
+const ProjectFlockDetail = ({
+  projectFlock,
+}: {
+  projectFlock: ProjectFlock;
+}) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [openBudgets, setOpenBudget] = useState(false);
+  const [selectedKandangId, setSelectedKamdangId] = useState<string | null>(
+    null
+  );
+
+  const selectedKandang = projectFlock.kandangs?.find(
+    (kandang) => kandang.id === Number(selectedKandangId)
+  );
+
+  const { data: projectFlockKandang, isLoading: projectFlockKandangLoading } =
+    useSWR(
+      selectedKandangId
+        ? `${ProjectFlockKandangApi.basePath}/get-detail/${selectedKandangId}`
+        : null,
+      selectedKandangId
+        ? () =>
+            ProjectFlockKandangApi.getSingle(
+              Number(selectedKandang?.project_flock_kandang_id)
+            )
+        : null
+    );
+
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: projectFlock?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: projectFlock?.id.toString() ?? '',
+  });
+
+  const { approvals: kandangApprovals, isLoading: kandangApprovalsLoading } =
+    useApprovalSteps({
+      latestApproval:
+        selectedKandangId && isResponseSuccess(projectFlockKandang)
+          ? projectFlockKandang?.data?.approval
+          : undefined,
+      approvalLines: PROJECT_FLOCK_KANDANGS_APPROVAL_LINE,
+      moduleName: 'PROJECT_FLOCK_KANDANGS',
+      moduleId:
+        selectedKandangId && isResponseSuccess(projectFlockKandang)
+          ? projectFlockKandang?.data?.id?.toString()
+          : '',
+    });
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockApi.delete(
+      projectFlock?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='h-full w-full flex flex-col gap-4'>
+        {/* Header */}
+        <DrawerHeader
+          leftIcon='mdi:close'
+          leftIconHref='/production/project-flock'
+          subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
+        >
+          <Link
+            href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
+            className='p-0'
+          >
+            <Tooltip content='Edit' position='bottom'>
+              <Button variant='link' className='p-0 text-neutral'>
+                <Icon icon='mdi:square-edit-outline' width={20} height={20} />
+              </Button>
+            </Tooltip>
+          </Link>
+          <Button
+            variant='link'
+            className='p-0 text-error'
+            onClick={() => {
+              deleteModal.openModal();
+            }}
+          >
+            <Tooltip content='Hapus' position='bottom'>
+              <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            </Tooltip>
+          </Button>
+        </DrawerHeader>
+
+        {/* Informasi Umum */}
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            {/* Status Approval */}
+            {approvals && !approvalsLoading && (
+              <div className='text-sm my-3'>
+                <ApprovalSteps approvals={approvals} />
+              </div>
+            )}
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={
+                  projectFlock.approval?.step_number == 1
+                    ? 'neutral'
+                    : projectFlock.approval?.step_number == 2
+                      ? 'success'
+                      : projectFlock.approval?.step_number >= 3
+                        ? 'error'
+                        : undefined
+                }
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={
+                    projectFlock.approval?.step_number == 1
+                      ? 'neutral'
+                      : projectFlock.approval?.step_number == 2
+                        ? 'success'
+                        : projectFlock.approval?.step_number >= 3
+                          ? 'error'
+                          : undefined
+                  }
+                />{' '}
+                {projectFlock.approval?.step_name}
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2' }}
+              >
+                <Icon icon='mdi:bookmark' width={12} height={12} />
+                {` ${formatTitleCase(projectFlock.category ?? '')}`}
+              </Badge>
+            </div>
+            {/* Information Grid */}
+            <div className='grid grid-cols-3 gap-4'>
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:account' /> Submitted
+              </div>
+              <div className='col-span-2'>
+                <Badge
+                  variant='soft'
+                  color='neutral'
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
+                  {projectFlock.created_user?.name}
+                </Badge>
+              </div>
+
+              {/* <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon={'mdi:clock'} /> History
+              </div>
+              <div className='col-span-2'>
+                <Button variant='outline' className='py-1 text-sm'>
+                  See History{' '}
+                  <Icon
+                    icon='mdi:arrow-top-right-thin'
+                    width={11}
+                    height={11}
+                  />
+                </Button>
+              </div> */}
+
+              {/* BARIS 1 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+              </div>
+              <div className='col-span-2'>{projectFlock?.area?.name}</div>
+
+              {/* BARIS 2 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+              </div>
+              <div className='col-span-2'>{projectFlock?.location?.name}</div>
+
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
+              </div>
+              <div className='col-span-2'>{projectFlock?.fcr?.name}</div>
+
+              {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
+                Kategori
+              </div>
+              <div className='col-span-2'>
+                {formatTitleCase(projectFlock.category ?? '')}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Kandang Aktif */}
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Kandang Aktif</h2>
+            {kandangApprovals && !kandangApprovalsLoading && (
+              <ApprovalSteps approvals={kandangApprovals} />
+            )}
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={'success'}
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={'success'}
+                />{' '}
+                Kandang Aktif ({projectFlock.kandangs?.length})
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
+                onClick={() => {
+                  setOpenBudget(!openBudgets);
+                }}
+              >
+                {` ${formatCurrency(
+                  (projectFlock.project_budgets ?? []).reduce(
+                    (acc, curr) => acc + curr.price * curr.qty,
+                    0
+                  )
+                )}`}
+                <Icon
+                  icon={`mdi:${openBudgets ? 'eye' : 'eye-off'}`}
+                  width={12}
+                  height={12}
+                />
+              </Badge>
+            </div>
+
+            {/* Card List Project Budgets */}
+            {openBudgets &&
+              (projectFlock.project_budgets ?? []).map((budget) => (
+                <Card
+                  key={budget.id}
+                  variant='bordered'
+                  className={{
+                    wrapper: 'w-full',
+                    body: 'p-3',
+                  }}
+                >
+                  <div className='flex flex-col gap-6'>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:tag'} width={14} height={14} />{' '}
+                        <span>Jenis Produk</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {budget?.nonstock?.name}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:tag'} width={14} height={14} />{' '}
+                        <span>Nama Satuan</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {budget?.nonstock?.uom?.name}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon
+                          icon={'mdi:file-multiple'}
+                          width={14}
+                          height={14}
+                        />{' '}
+                        <span>Jumlah Pembelian</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatNumber(budget.qty)}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:file'} width={14} height={14} />{' '}
+                        <span>Harga Satuan</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatCurrency(budget.price)}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:calculator'} width={14} height={14} />{' '}
+                        <span>Total Harga</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatCurrency(budget.price * budget.qty)}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+
+            {/* Card Kandangs */}
+            <Card
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+                body: 'p-3',
+              }}
+            >
+              <RadioGroup
+                name='gender'
+                className={{
+                  radioWrapper: 'grid grid-cols-1 gap-6',
+                }}
+                onChange={(e) => setSelectedKamdangId(e.target.value)}
+                value={selectedKandangId?.toString()}
+                size='md'
+                color='neutral'
+                disabled={projectFlock?.approval?.step_number == 1}
+              >
+                {projectFlock.kandangs?.map((kandang) => (
+                  <div
+                    key={kandang.id}
+                    className={`grid grid-cols-2 gap-6 cursor-pointer hover:text-gray-800`}
+                    onClick={() =>
+                      projectFlock?.approval?.step_number > 1 &&
+                      setSelectedKamdangId(kandang?.id?.toString())
+                    }
+                  >
+                    <RadioGroupItem
+                      value={kandang?.id?.toString()}
+                      label={kandang?.name}
+                      disabled={projectFlock?.approval?.step_number == 1}
+                    />
+                    <div className='text-end'>
+                      <Badge
+                        className={{
+                          badge: 'rounded-lg',
+                        }}
+                      >
+                        Kapasitas {kandang?.capacity} Ekor
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </RadioGroup>
+            </Card>
+            <div className='grid grid-cols-4 gap-3'>
+              <Link
+                href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='success'
+                  disabled={
+                    !selectedKandangId ||
+                    projectFlock?.approval?.step_number == 1
+                  }
+                >
+                  Chickin <Icon icon='mdi:checkbox-marked-outline' />
+                </Button>
+              </Link>
+              <Link
+                href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='error'
+                  disabled={
+                    !selectedKandangId ||
+                    projectFlock?.approval?.step_number == 1
+                  }
+                >
+                  Close <Icon icon='mdi:checkbox-marked-circle-outline' />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${projectFlock?.flock_name} - ${projectFlock?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockDetail;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 162282fb..9ac07c0f 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -1,58 +1,124 @@
 import * as Yup from 'yup';
 
-export const ProjectFlockFormSchema = Yup.object({
-  // Flock
-  flock: Yup.object({
-    value: Yup.number().required('ID Flock wajib diisi!'),
-    label: Yup.string().required('Nama Flock wajib diisi!'),
-  }).nullable(),
-  flock_id: Yup.number()
-    .min(1, 'Flock wajib diisi!')
-    .required('Flock wajib diisi!'),
+type ProjectFlockFormSchemaType = {
+  flock: {
+    value: number | string;
+    label: string;
+  } | null;
+  flock_name: string;
+  area: {
+    value: number | string;
+    label: string;
+  } | null;
+  area_id: number;
+  category_option: {
+    value: string;
+    label: string;
+  } | null;
+  category: string;
+  fcr: {
+    value: number | string;
+    label: string;
+  } | null;
+  fcr_id: number;
+  location: {
+    value: number | string;
+    label: string;
+  } | null;
+  location_id: number;
+  kandang_ids: number[];
+  project_budgets: ProjectFlockBudgetsSchemaType[];
+};
 
-  // Area
-  area: Yup.object({
-    value: Yup.number().required('ID Area wajib diisi!'),
-    label: Yup.string().required('Nama Area wajib diisi!'),
-  }).nullable(),
-  area_id: Yup.number()
-    .min(1, 'Area wajib diisi!')
-    .required('Area wajib diisi!'),
+export type ProjectFlockBudgetsSchemaType = {
+  nonstock: {
+    value: number | string;
+    label: string;
+  } | null;
+  nonstock_id: number | string;
+  qty: number | string;
+  price: number | string;
+  total_price: number | string;
+};
 
-  // Kategori
-  category_option: Yup.object({
-    value: Yup.string().required('Nilai Kategori wajib diisi!'),
-    label: Yup.string().required('Label Kategori wajib diisi!'),
-  }).nullable(),
-  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
-    .required('Kategori wajib diisi!'),
+export const ProjectFlockBudgetsSchema: Yup.ObjectSchema<ProjectFlockBudgetsSchemaType> =
+  Yup.object({
+    nonstock: Yup.object({
+      value: Yup.number().required('ID Nonstock wajib diisi!'),
+      label: Yup.string().required('Nama Nonstock wajib diisi!'),
+    }).required('Nonstock wajib diisi!'),
+    nonstock_id: Yup.number()
+      .min(1, 'Nonstock wajib diisi!')
+      .required('Nonstock wajib diisi!'),
+    qty: Yup.number()
+      .typeError('Jumlah harus berupa angka!')
+      .min(1, 'Jumlah minimal 1!')
+      .required('Jumlah wajib diisi!'),
+    price: Yup.number()
+      .typeError('Harga harus berupa angka!')
+      .min(1, 'Harga minimal 1!')
+      .required('Harga wajib diisi!'),
+    total_price: Yup.number()
+      .typeError('Harga harus berupa angka!')
+      .min(1, 'Harga minimal 1!')
+      .required('Harga wajib diisi!'),
+  });
 
-  // FCR
-  fcr: Yup.object({
-    value: Yup.number().required('ID FCR wajib diisi!'),
-    label: Yup.string().required('Nama FCR wajib diisi!'),
-  }).nullable(),
-  fcr_id: Yup.number().min(1, 'FCR wajib diisi!').required('FCR wajib diisi!'),
+export const ProjectFlockFormSchema: Yup.ObjectSchema<ProjectFlockFormSchemaType> =
+  Yup.object({
+    // Flock
+    flock: Yup.object({
+      value: Yup.number().required('ID Flock wajib diisi!'),
+      label: Yup.string().required('Nama Flock wajib diisi!'),
+    }).nullable(),
+    flock_name: Yup.string().required('Nama Flock wajib diisi!'),
 
-  // Location
-  location: Yup.object({
-    value: Yup.number().required('ID Lokasi wajib diisi!'),
-    label: Yup.string().required('Nama Lokasi wajib diisi!'),
-  }).nullable(),
-  location_id: Yup.number()
-    .min(1, 'Lokasi wajib diisi!')
-    .required('Lokasi wajib diisi!'),
+    // Area
+    area: Yup.object({
+      value: Yup.number().required('ID Area wajib diisi!'),
+      label: Yup.string().required('Nama Area wajib diisi!'),
+    }).nullable(),
+    area_id: Yup.number()
+      .min(1, 'Area wajib diisi!')
+      .required('Area wajib diisi!'),
 
-  period: Yup.number()
-    .required('Periode wajib diisi!')
-    .typeError('Periode harus berupa angka')
-    .min(1, 'Minimal periode adalah 1'),
+    // Kategori
+    category_option: Yup.object({
+      value: Yup.string().required('Nilai Kategori wajib diisi!'),
+      label: Yup.string().required('Label Kategori wajib diisi!'),
+    }).nullable(),
+    category: Yup.string()
+      .oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+      .required('Kategori wajib diisi!'),
 
-  kandang_ids: Yup.array()
-    .of(Yup.number().typeError('Kandang tidak valid!'))
-    .min(1, 'Minimal harus ada 1 kandang!')
-    .required('Kandang wajib diisi!'),
-});
+    // FCR
+    fcr: Yup.object({
+      value: Yup.number().required('ID FCR wajib diisi!'),
+      label: Yup.string().required('Nama FCR wajib diisi!'),
+    }).nullable(),
+    fcr_id: Yup.number()
+      .min(1, 'FCR wajib diisi!')
+      .required('FCR wajib diisi!'),
+
+    // Location
+    location: Yup.object({
+      value: Yup.number().required('ID Lokasi wajib diisi!'),
+      label: Yup.string().required('Nama Lokasi wajib diisi!'),
+    }).nullable(),
+    location_id: Yup.number()
+      .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!'),
+
+    kandang_ids: Yup.array()
+      .of(Yup.number().required('Kandang tidak valid!'))
+      .min(1, 'Minimal harus ada 1 kandang!')
+      .required('Kandang wajib diisi!'),
+
+    project_budgets: Yup.array()
+      .of(ProjectFlockBudgetsSchema)
+      .min(1, 'Minimal harus ada 1 data budget!')
+      .required('Data budget wajib diisi!'),
+  });
 
 export type ProjectFlockFormValues = Yup.InferType<
   typeof ProjectFlockFormSchema
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 14eee9b7..9e5eaeef 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   AreaApi,
@@ -9,33 +12,44 @@ import {
   FlockApi,
   KandangApi,
   LocationApi,
+  NonstockApi,
 } from '@/services/api/master-data';
 import { Icon } from '@iconify/react';
-import { useFormik } from 'formik';
+import { FormikErrors, useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
+  ProjectFlockBudgetsSchemaType,
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
   UpdateProjectFlockFormSchema,
 } from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
-  ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
-  PeriodFlock,
   ProjectFlock,
+  ProjectFlockBudget,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
-import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import ProjectFlockKandangTable from './ProjectFlockKandangTable';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import NumberInput from '@/components/input/NumberInput';
+import Card from '@/components/Card';
+import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { useUiStore } from '@/stores/ui/ui.store';
+import Link from 'next/link';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import { formatDate } from '@/lib/helper';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -52,24 +66,28 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
-
   const [selectedLocation, setSelectedLocation] = useState('');
-  const [disabledLocation, setDisabledLocation] = useState(true);
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
-
+  const [disabledLocation, setDisabledLocation] = useState(
+    initialValues?.location?.id ? false : true
+  );
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-
-  const [selectedFlock, setSelectedFlock] = useState<number>(
-    initialValues?.flock?.id ?? 0
+  const [selectedFlock, setSelectedFlock] = useState<string | undefined>(
+    initialValues?.flock_name?.slice(
+      0,
+      initialValues?.flock_name?.lastIndexOf(' ')
+    ) ?? ''
   );
+  const subscribeValidate = useUiStore((s) => s.subscribeValidate);
+  const setIsValid = useUiStore((s) => s.setIsValid);
 
   const deleteModal = useModal();
   const confirmModal = useModal();
@@ -77,11 +95,10 @@ const ProjectFlockForm = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isApprovedDisabled, setIsApprovedDisabled] = useState(
-    initialValues?.approval.step_name == 'Pengajuan' ? false : true
-  );
-  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
-    !isApprovedDisabled
+    initialValues?.approval?.step_name == 'Pengajuan' ? false : true
   );
+  const [isRejectedDisabled, setIsRejectedDisabled] =
+    useState(!isApprovedDisabled);
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
     !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
   );
@@ -96,98 +113,61 @@ const ProjectFlockForm = ({
       )
   );
 
-  useEffect(() => {
-    if (initialValues?.approval?.step_name) {
-      const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
-      setIsApprovedDisabled(approvedDisabled);
-      setIsRejectedDisabled(!approvedDisabled);
-      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
-    }
-  }, [initialValues]);
-
   // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-    flockUrl,
-    FlockApi.getAllFetcher
+  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
+    useSelect(FlockApi.basePath, 'id', 'name');
+
+  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
+    AreaApi.basePath,
+    'id',
+    'name'
   );
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
+  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
+    useSelect(LocationApi.basePath, 'id', 'name', '', {
+      area_id:
+        selectedArea != ''
+          ? selectedArea
+          : ((initialValues?.area?.id ?? '') as string),
+    });
 
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: '',
-    area_id: selectedArea,
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
+  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
+    FcrApi.basePath,
+    'id',
+    'name'
   );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
-    kandangUrl,
-    KandangApi.getAllFetcher
+  const {
+    data: kandang,
+    isLoading: isLoadingKandang,
+    mutate: refreshKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+
+  const { data: periodFlocks, mutate: refreshPeriodFlocks } = useSWR(
+    `${selectedFlock?.toString()}/periods`,
+    () => ProjectFlockApi.getNextPeriod(parseInt(selectedLocation as string))
   );
 
-  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
+  const {
+    options: optionsNonstock,
+    rawData: nonstocks,
+    isLoadingOptions: isLoadingNonstocks,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
-  const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    getPeriodFlocksUrl,
-    () =>
-      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
-        getPeriodFlocksUrl,
-        { method: 'GET' }
-      )
-  );
-
-  // Map Data to Options
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsFcr = isResponseSuccess(fcrs)
-    ? fcrs?.data.map((fcr) => ({
-        value: fcr.id,
-        label: fcr.name,
-      }))
-    : [];
-  const optionsFlock = isResponseSuccess(flocks)
-    ? flocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.name,
-      }))
-    : [];
-
-  useEffect(() => {
-    if (isResponseSuccess(locations)) {
-      const options = locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }));
-      setOptionsLocation(options);
-    }
-  }, [locations, setSelectedLocation]);
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: initialValues?.id.toString() ?? '',
+  });
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
@@ -195,33 +175,48 @@ const ProjectFlockForm = ({
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
       } else {
+        formik.setFieldValue('kandang_ids', []);
         setOptionsKandang([]);
         setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
+        const selectedRowIds = Object.keys(rowSelection)
+          .filter((id) => rowSelection[id])
+          .map((id) => parseInt(id));
+        if (
+          JSON.stringify(kandang.data.map((k) => k.id)) !==
+          JSON.stringify(formik.values.kandang_ids)
+        ) {
+          formik.setFieldValue('kandang_ids', []);
+          setRowSelection({});
+        } else {
+          formik.setFieldValue('kandang_ids', selectedRowIds);
+        }
       }
+      refreshPeriodFlocks();
     }
-  }, [kandang]);
+  }, [kandang, selectedLocation]);
   useEffect(() => {
     if (initialValues?.kandangs) {
       refreshKandang();
       setOpenSelectKandangs(true);
 
       const newRowSelection = Object.fromEntries(
-        initialValues.kandangs.map((k: Kandang) => [
-          k.id.toString(),
-          true,
-        ])
+        initialValues.kandangs.map((k: Kandang) => [k.id.toString(), true])
       );
       setRowSelection(newRowSelection);
     }
-  }, [initialValues, refreshKandang]);
+  }, [initialValues, kandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('area_id', (val as OptionType)?.value);
     formik.setFieldValue('area', val);
 
-    formik.setFieldTouched('area_id', true);
+    if (Boolean(val)) {
+      formik.setFieldTouched('area_id', false);
+      formik.setFieldError('area_id', '');
+    } else {
+      formik.setFieldTouched('area_id', true);
+    }
 
     setSelectedArea((val as OptionType)?.value as string);
     setSelectedLocation('');
@@ -235,9 +230,13 @@ const ProjectFlockForm = ({
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang_ids', []);
     setSelectedLocation((val as OptionType)?.value as string);
     optionChangeHandler(val, 'location');
-    formik.setFieldValue('kandang_ids', []);
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formik.setFieldValue('kandang_ids', selectedRowIds);
   };
 
   const optionChangeHandler = (
@@ -250,7 +249,12 @@ const ProjectFlockForm = ({
       val ? (val as OptionType)?.value : 0
     );
 
-    formik.setFieldTouched(`${inputName}_id`, true);
+    if (Boolean(val)) {
+      formik.setFieldTouched(`${inputName}_id`, false);
+      formik.setFieldError(`${inputName}_id`, '');
+    } else {
+      formik.setFieldTouched(`${inputName}_id`, true);
+    }
   };
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -267,6 +271,7 @@ const ProjectFlockForm = ({
 
     if (isResponseSuccess(createProjectFlockRes)) {
       toast.success(createProjectFlockRes?.message as string);
+      handleReset();
       router.push('/production/project-flock');
     }
     if (isResponseError(createProjectFlockRes)) {
@@ -277,13 +282,14 @@ const ProjectFlockForm = ({
   const updateProjectFlockHandler = async (
     payload: CreateProjectFlockPayload
   ) => {
-    const updateProjectFlockRes = await ProjectFlockApi.update(
+    const updateProjectFlockRes = await ProjectFlockApi.resubmit(
       initialValues?.id as number,
       payload
     );
 
     if (isResponseSuccess(updateProjectFlockRes)) {
       toast.success(updateProjectFlockRes?.message as string);
+      handleReset();
       router.push('/production/project-flock');
     }
     if (isResponseError(updateProjectFlockRes)) {
@@ -291,20 +297,34 @@ const ProjectFlockForm = ({
       toast.error(updateProjectFlockRes?.message as string);
     }
   };
+  const handleReset = () => {
+    formik.resetForm();
+    setSelectedArea('');
+    setSelectedLocation('');
+    setDisabledLocation(true);
+    setOpenSelectKandangs(false);
+    setOptionsKandang([]);
+    formikSetValues(formikInitialValues);
+  };
 
   // Formik InitialValue
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
+    const trimFlock =
+      initialValues?.flock_name?.slice(
+        0,
+        initialValues?.flock_name?.lastIndexOf(' ')
+      ) ?? '';
+    const optionFind = optionsFlock.find((flock) => {
+      return flock.label == trimFlock;
+    }) as OptionType;
     return {
-      name: initialValues?.name ?? '',
-      flock: initialValues?.flock
-        ? {
-            value: initialValues.flock.id,
-            label: initialValues.flock.name,
-          }
-        : null,
+      flock:
+        optionsFlock.find((flock) => {
+          return flock.label == trimFlock;
+        }) ?? null,
       area: initialValues?.area
         ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
             label: initialValues.area.name,
           }
         : null,
@@ -316,50 +336,78 @@ const ProjectFlockForm = ({
         : null,
       fcr: initialValues?.fcr
         ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
             label: initialValues.fcr.name,
           }
         : null,
       location: initialValues?.location
         ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
             label: initialValues.location.name,
           }
         : null,
-      flock_id: initialValues?.flock?.id ?? 0,
+      flock_name:
+        optionsFlock.find((flock) => {
+          return flock.label == trimFlock;
+        })?.label ?? trimFlock,
       area_id: initialValues?.area?.id ?? 0,
       category: initialValues?.category as NonNullable<
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
-      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
-        | number
-        | undefined
-      )[],
+      kandang_ids: initialValues?.kandangs?.map(
+        (k: Kandang) => k.id
+      ) as number[],
+      project_budgets: initialValues?.project_budgets?.map((budget) => {
+        return {
+          nonstock: {
+            value: budget.nonstock?.id ?? '',
+            label: budget.nonstock?.name ?? '',
+          },
+          nonstock_id: budget.nonstock?.id ?? '',
+          qty: budget.qty,
+          price: budget.price,
+          total_price: budget.qty * budget.price,
+        };
+      }) ?? [
+        {
+          nonstock: null,
+          nonstock_id: '',
+          qty: '',
+          price: '',
+          total_price: '',
+        },
+      ],
     };
-  }, [initialValues]);
+  }, [initialValues, optionsFlock]);
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
-    initialValues: formikInitialValues,
-    enableReinitialize: true,
+    initialValues: {
+      ...formikInitialValues,
+    } as ProjectFlockFormValues,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
     validateOnBlur: true,
-    validateOnChange: true,
-    validateOnMount: true,
+    // validateOnChange: true,
+    // validateOnMount: true,
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock_name as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
         location_id: values.location_id as number,
-        period: values.period as number,
         kandang_ids: values.kandang_ids as number[],
+        project_budgets: values.project_budgets.flatMap((budget) => {
+          return {
+            nonstock_id: budget.nonstock_id,
+            qty: budget.qty,
+            price: budget.price,
+          } as ProjectFlockBudget;
+        }),
       };
 
       switch (formType) {
@@ -374,27 +422,36 @@ const ProjectFlockForm = ({
       }
     },
   });
-
   const { setValues: formikSetValues } = formik;
+
   // Effect Initial
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues?.area.id,
-        label: initialValues?.area.name,
+        value: initialValues?.area?.id,
+        label: initialValues?.area?.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
       if (initialValues?.area_id) {
         setSelectedArea(initialValues?.area_id.toString() as string);
       }
-
-      formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
 
   useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+    const trimFlock =
+      initialValues?.flock_name?.slice(
+        0,
+        initialValues?.flock_name?.lastIndexOf(' ')
+      ) ?? '';
+    formikSetValues({
+      ...formikInitialValues,
+      flock: optionsFlock.find((flock) => {
+        return flock.label == trimFlock;
+      }) as OptionType,
+      flock_name: trimFlock ?? '',
+    });
+  }, [formikSetValues]);
 
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
@@ -405,22 +462,14 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType != 'add' && initialValues?.location?.id) {
-      setSelectedLocation(initialValues.location?.id.toString());
-      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    if (formType != 'add') {
+      if (initialValues?.location?.id) {
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
     }
   }, [formType, initialValues]);
 
-  useEffect(() => {
-    formik.validateForm();
-  }, [formik.values]);
-
-  useEffect(() => {
-    if (isResponseSuccess(periodFlocks)) {
-      formik.setFieldValue('period', periodFlocks.data.next_period);
-    }
-  }, [periodFlocks]);
-
   useEffect(() => {
     const selectedRowIds = Object.keys(rowSelection)
       .filter((id) => rowSelection[id])
@@ -431,6 +480,46 @@ const ProjectFlockForm = ({
     });
   }, [rowSelection, formikSetValues]);
 
+  useEffect(() => {
+    const unsub = subscribeValidate(() => {
+      formik.validateForm().then((errors) => {
+        if (Object.keys(errors).length > 0) {
+          // Membentuk touched object yang strongly-typed
+          const touched: Record<string, boolean | Record<string, boolean>[]> =
+            {};
+          Object.keys(formik.values).forEach((key) => {
+            if (
+              key === 'project_budgets' &&
+              Array.isArray(formik.values.project_budgets)
+            ) {
+              touched[key] = formik.values.project_budgets.map(() => ({})); // Mark each item as touched if it's an array
+            } else {
+              touched[key] = true;
+            }
+          });
+
+          formik.setTouched(touched, true);
+        }
+        setIsValid(Object.keys(errors).length === 0);
+      });
+    });
+
+    return unsub;
+  }, []);
+
+  useEffect(() => {
+    if (initialValues?.approval?.step_name) {
+      const pengajuanRejected =
+        initialValues.approval.step_number == 1 &&
+        initialValues.approval.action == 'REJECTED';
+      const approvedDisabled =
+        initialValues.approval.step_number !== 1 || pengajuanRejected;
+      setIsApprovedDisabled(approvedDisabled);
+      setIsRejectedDisabled(!approvedDisabled || pengajuanRejected);
+      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+    }
+  }, [initialValues]);
+
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -448,63 +537,178 @@ const ProjectFlockForm = ({
     setIsDeleteLoading(false);
   };
 
-  const confirmationModalClickHandler = async ({
-    action = 'APPROVED',
-  }: {
-    action: 'APPROVED' | 'REJECTED';
-  }) => {
+  const onAddBudgetRowHandler = () => {
+    const newProjectBudgets = [
+      ...(formik.values.project_budgets ?? []),
+      {
+        nonstock: null,
+        nonstock_id: '',
+        qty: '',
+        price: '',
+      },
+    ];
+    formik.setFieldValue('project_budgets', newProjectBudgets);
+  };
+
+  const onDeleteBudgetRowHandler = (nonstock_id: number, index?: number) => {
+    console.log(`nonstock_id: ${nonstock_id}, index: ${index}`);
+    if (!nonstock_id) {
+      const updatedBudgets = formik.values.project_budgets
+        .map((budget, i) => {
+          if (i == index) {
+            console.log(`buget: ${null}, index: ${index}, i: ${i}`);
+            return null;
+          } else {
+            console.log(`buget: ${budget}, index: ${index}, i: ${i}`);
+            return budget;
+          }
+        })
+        .filter((budget) => budget != null);
+      formik.setFieldValue('project_budgets', updatedBudgets);
+    } else {
+      const updatedBudgets = (formik.values.project_budgets ?? []).filter(
+        (budget) => budget.nonstock_id !== nonstock_id
+      );
+      formik.setFieldValue('project_budgets', updatedBudgets);
+    }
+  };
+
+  const confirmApprovalHandler = async (
+    notes: string,
+    approvalAction: 'REJECTED' | 'APPROVED'
+  ) => {
     if (initialValues?.id === undefined) return;
     setIsApproveLoading(true);
-    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
-      BaseApiResponse<ProjectFlock>,
-      ProjectFlockApprovalPayload
-    >(`/approvals`, {
-      method: 'POST',
-      payload: {
-        action: action,
-        approvable_ids: [initialValues.id],
-      },
-    });
 
-    if (isResponseSuccess(approveProjectFlockRes)) {
-      if (refreshProjectFlocks) {
-        await refreshProjectFlocks();
-      }
-      // if (action == 'APPROVED') {
-      //   setIsApprovedDisabled(true);
-      //   setIsRejectedDisabled(false);
-      // }
-      // if (action == 'REJECTED') {
-      //   setIsRejectedDisabled(true);
-      //   setIsApprovedDisabled(false);
-      // }
-      toast.success(approveProjectFlockRes.message as string);
+    const approvalRes =
+      approvalAction == 'APPROVED'
+        ? await ProjectFlockApi.approve(initialValues?.id, notes)
+        : await ProjectFlockApi.reject(initialValues?.id, notes);
+    if (isResponseSuccess(approvalRes)) {
+      refreshProjectFlocks?.();
+      toast.success(approvalRes.message as string);
     }
-    if (isResponseError(approveProjectFlockRes)) {
-      toast.error(approveProjectFlockRes?.message as string);
+    if (isResponseError(approvalRes)) {
+      toast.error(approvalRes?.message as string);
     }
+    refreshApprovals();
     confirmModal.closeModal();
     setIsApproveLoading(false);
   };
 
+  const handleBudgetChange = (
+    index: number,
+    fieldName: 'qty' | 'price' | 'total_price',
+    value: string
+  ) => {
+    const updatedBudgets = [...formik.values.project_budgets];
+    const currentBudget = updatedBudgets[index];
+
+    const isNewValueEmpty = value === '';
+
+    let numericValue: number;
+
+    if (isNewValueEmpty) {
+      (currentBudget[fieldName] as string) = '';
+      numericValue = 0;
+
+      formik.setFieldValue('project_budgets', updatedBudgets);
+      return;
+    } else {
+      numericValue = Math.max(0, parseFloat(value) || 0);
+
+      (currentBudget[fieldName] as number) = numericValue;
+    }
+
+    const getSafeNumber = (val: string | number) =>
+      Math.max(0, parseFloat(String(val)) || 0);
+
+    const currentQty = getSafeNumber(currentBudget.qty);
+    const currentPrice = getSafeNumber(currentBudget.price);
+    const currentTotal = getSafeNumber(currentBudget.total_price);
+
+    let newQty = currentQty;
+    let newPrice = currentPrice;
+    let newTotal = currentTotal;
+
+    if (fieldName === 'price') {
+      // Jika Harga Satuan diubah, hitung Total Harga
+      newTotal = newQty * numericValue;
+      newPrice = numericValue;
+    } else if (fieldName === 'qty') {
+      // Jika Kuantitas diubah, hitung Total Harga
+      newTotal = numericValue * newPrice;
+      newQty = numericValue;
+    } else if (fieldName === 'total_price') {
+      // Jika Total Harga diubah, hitung Harga Satuan
+      newTotal = numericValue;
+      if (newQty > 0) {
+        newPrice = newTotal / newQty;
+      } else {
+        // Jika Qty 0, Harga Satuan tetap 0
+        newPrice = 0;
+      }
+    }
+
+    currentBudget.qty = newQty;
+    currentBudget.price = newPrice;
+    currentBudget.total_price = newTotal;
+
+    formik.setFieldValue('project_budgets', updatedBudgets);
+  };
+
+  const selectedPeriod = isResponseSuccess(periodFlocks)
+    ? periodFlocks.data.find((kandang) =>
+        formik.values.kandang_ids?.includes(kandang.id)
+      )?.period
+    : undefined;
+  const inputPeriod =
+    (initialValues?.period ?? selectedPeriod == 0) ? 1 : selectedPeriod;
+
+  const filteredNonStockOptions = optionsNonstock.filter((nonstock) => {
+    const isNonstockAlreadyInBudgets = (
+      formik.values.project_budgets ?? []
+    ).some((budget) => budget.nonstock_id === nonstock.value);
+
+    return !isNonstockAlreadyInBudgets;
+  });
+
   return (
     <>
       <section className='w-full'>
-        <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>
-
-          <h1 className='text-2xl font-bold text-center'>
-            {formType === 'add' && 'Tambah Project Flock'}
-            {formType === 'detail' && 'Detail Project Flock'}
-          </h1>
-        </header>
+        {/* Header */}
+        <DrawerHeader
+          leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
+          leftIconSize={24}
+          leftIconHref={
+            formType == 'add'
+              ? '/production/project-flock'
+              : `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
+          }
+          leftIconClassName='hover:text-gray-400'
+          subtitle={formType == 'add' ? 'Add Flock' : 'Update Flock'}
+          subtitleClassName='text-sm text-neutral'
+          showDivider
+        >
+          {formType == 'edit' && (
+            <Button
+              onClick={() => {
+                if (initialValues?.id) {
+                  deleteModal.openModal();
+                }
+              }}
+              variant='link'
+              className='p-0 text-error'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={20}
+                height={20}
+                className='justify-start text-sm'
+              />
+            </Button>
+          )}
+        </DrawerHeader>
         {projectFlockFormErrorMessage && (
           <div className='my-4'>
             <div role='alert' className='alert alert-error'>
@@ -525,6 +729,9 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        {approvals && !approvalsLoading && formType == 'detail' && (
+          <ApprovalSteps approvals={approvals} />
+        )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
@@ -564,196 +771,381 @@ const ProjectFlockForm = ({
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
         >
-          <div className='card bg-base-100 shadow w-full mb-6'>
-            <div className='card-body'>
-              <div className='card-title mb-4'>Informasi Umum</div>
-
-              <div className='grid sm:grid-cols-2 gap-4'>
-                <SelectInput
-                  required
-                  label='Area'
-                  value={formik.values.area as OptionType}
-                  onChange={areaChangeHandler}
-                  options={optionsArea}
-                  isLoading={isLoadingAreas}
-                  isError={
-                    formik.touched.area_id && Boolean(formik.errors.area_id)
-                  }
-                  errorMessage={formik.errors.area_id as string}
-                  isClearable
-                  isDisabled={formType === 'detail'}
-                />
-                <SelectInput
-                  required
-                  label='Flock'
-                  value={formik.values.flock as OptionType}
-                  onChange={(val) => {
-                    optionChangeHandler(val, 'flock');
-                    setSelectedFlock((val as OptionType)?.value as number);
-                  }}
-                  options={optionsFlock}
-                  isLoading={isLoadingFlocks}
-                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                  }
-                  errorMessage={formik.errors.flock_id as string}
-                  isClearable
-                  isDisabled={formType === 'detail'}
-                />
-                <SelectInput
-                  required
-                  label='Lokasi'
-                  value={formik.values.location as OptionType}
-                  onChange={locationChangeHandler}
-                  options={optionsLocation}
-                  isLoading={isLoadingLocations}
-                  isError={
-                    formik.touched.location_id &&
-                    Boolean(formik.errors.location_id)
-                  }
-                  errorMessage={formik.errors.location_id as string}
-                  isClearable
-                  isDisabled={formType === 'detail' || disabledLocation}
-                />
-                <SelectInput
-                  required
-                  label='FCR'
-                  value={formik.values.fcr as OptionType}
-                  onChange={(val) => {
-                    optionChangeHandler(val, 'fcr');
-                  }}
-                  options={optionsFcr}
-                  isLoading={isLoadingFcrs}
-                  isError={
-                    formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
-                  }
-                  errorMessage={formik.errors.fcr_id as string}
-                  isClearable
-                  isDisabled={formType === 'detail'}
-                />
-                <SelectInput
-                  required
-                  label='Kategori'
-                  value={formik.values.category_option as OptionType}
-                  onChange={categoryChangeHandler}
-                  options={FLOCK_CATEGORY_OPTIONS}
-                  isError={
-                    formik.touched.category && Boolean(formik.errors.category)
-                  }
-                  errorMessage={formik.errors.category as string}
-                  isClearable
-                  isDisabled={formType === 'detail'}
-                />
-                <TextInput
-                  required
-                  type='number'
-                  name='period'
-                  label='Periode'
-                  placeholder='Masukkan periode yang project'
-                  value={formik.values.period as number}
-                  onChange={formik.handleChange}
-                  isError={
-                    formik.touched.period && Boolean(formik.errors.period)
-                  }
-                  errorMessage={formik.errors.period as string}
-                  readOnly={formType === 'detail'}
-                  disabled={true}
-                  isLoading={isLoadingPeriodFlocks}
-                />
-              </div>
-            </div>
-          </div>
-          <div className='card bg-base-100 shadow w-full'>
-            <div className='card-body'>
-              <Collapse
-                title={
-                  <div className='card-actions justify-between w-full'>
-                    <div className='card-title'>Pilih Kandang</div>
-                    <Button
-                      variant='link'
-                      className={`text-primary rotate-${
-                        openSelectKandangs ? '180' : '0'
-                      } transition-transform hover:text-inherit me-3`}
-                    >
-                      <Icon
-                        icon='material-symbols:keyboard-arrow-down'
-                        width={24}
-                        height={24}
-                      />
-                    </Button>
-                  </div>
+          {/* Form Informasi Umum */}
+          <div className='divider mt-3'></div>
+          <div className='flex flex-col gap-4 px-4'>
+            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            <div className='flex flex-col gap-4'>
+              <SelectInput
+                required
+                label='Area'
+                value={formik.values.area as OptionType}
+                onChange={areaChangeHandler}
+                options={optionsArea}
+                isLoading={isLoadingAreas}
+                isError={
+                  formik.touched.area_id && Boolean(formik.errors.area_id)
                 }
-                className='sm:w-full'
-                titleClassName='w-full p-0!'
-                onOpenChange={setOpenSelectKandangs}
-                open={openSelectKandangs}
-              >
-                <div className='overflow-x-auto'>
-                  {isLoadingKandang && (
-                    <span className='loading loading-dots loading-xl'></span>
-                  )}
-                  <ProjectFlockKandangTable
-                    listKandang={optionsKandang}
-                    rowSelection={rowSelection}
-                    setRowSelection={setRowSelection}
-                    selectedIds={formik.values.kandang_ids}
-                    formType={formType}
-                  />
-                </div>
-              </Collapse>
+                errorMessage={formik.errors.area_id as string}
+                isClearable
+                isDisabled={formType === 'detail'}
+              />
+              <SelectInput
+                required
+                label='Lokasi'
+                value={formik.values.location as OptionType}
+                onChange={locationChangeHandler}
+                options={
+                  selectedArea != '' || initialValues?.area?.id
+                    ? optionsLocation
+                    : []
+                }
+                isLoading={isLoadingLocations}
+                isError={
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
+                }
+                errorMessage={formik.errors.location_id as string}
+                isClearable
+                isDisabled={formType === 'detail' || disabledLocation}
+              />
+              <SelectInput
+                required
+                label='Flock'
+                value={
+                  formik.values.flock_name
+                    ? ({
+                        label: formik.values.flock_name,
+                        value: optionsFlock.find((flock) => {
+                          return flock.label === formik.values.flock_name;
+                        })?.value,
+                      } as OptionType)
+                    : undefined
+                }
+                onChange={(val) => {
+                  optionChangeHandler(val, 'flock');
+                  setSelectedFlock((val as OptionType)?.label);
+                  formik.setFieldValue(
+                    'flock_name',
+                    (val as OptionType)?.label
+                  );
+                }}
+                options={optionsFlock}
+                isLoading={isLoadingFlocks}
+                isError={
+                  formik.touched.flock_name && Boolean(formik.errors.flock_name)
+                }
+                errorMessage={formik.errors.flock_name as string}
+                isClearable
+                isDisabled={formType === 'detail'}
+              />
+              <SelectInput
+                required
+                label='FCR'
+                value={formik.values.fcr as OptionType}
+                onChange={(val) => {
+                  optionChangeHandler(val, 'fcr');
+                }}
+                options={optionsFcr}
+                isLoading={isLoadingFcrs}
+                isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
+                errorMessage={formik.errors.fcr_id as string}
+                isClearable
+                isDisabled={formType === 'detail'}
+              />
+              <SelectInput
+                required
+                label='Kategori'
+                value={formik.values.category_option as OptionType}
+                onChange={categoryChangeHandler}
+                options={FLOCK_CATEGORY_OPTIONS}
+                isError={
+                  formik.touched.category && Boolean(formik.errors.category)
+                }
+                errorMessage={formik.errors.category as string}
+                isClearable
+                isDisabled={formType === 'detail'}
+              />
+              <NumberInput
+                name='period'
+                label='Periode'
+                disabled
+                readOnly
+                placeholder='Period'
+                value={selectedLocation ? inputPeriod : ''}
+              />
             </div>
           </div>
 
-          <div className='flex flex-row justify-center gap-2 flex-wrap my-6'>
-            {formType !== 'detail' && (
-              <div className='flex flex-row justify-end gap-2'>
-                <Button
-                  type='button'
-                  color='warning'
-                  className='px-4'
-                  onClick={formik.handleReset}
-                >
-                  Reset
-                </Button>
-                <Button
-                  type='submit'
-                  color='primary'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                  className='px-4'
-                >
-                  Submit
-                </Button>
+          {/* Form Pilih Kandang */}
+          <div className='divider'></div>
+          <div className='flex flex-col gap-4 px-4 pb-4'>
+            <h2 className='text-2xl font-semibold'>Pilih Kandang</h2>
+            <div className='overflow-x-auto duration-300 ease-in-out'>
+              {isLoadingKandang && (
+                <span className='loading loading-dots loading-xl'></span>
+              )}
+              <ProjectFlockKandangTable
+                listPeriods={
+                  isResponseSuccess(periodFlocks) ? periodFlocks.data : []
+                }
+                listKandang={optionsKandang}
+                rowSelection={rowSelection}
+                setRowSelection={setRowSelection}
+                selectedIds={formik.values.kandang_ids}
+                formType={formType}
+                initialValues={initialValues}
+              />
+            </div>
+          </div>
+
+          {/* Card Estimasi Budget */}
+          <div className='divider'></div>
+          <div className='flex flex-col gap-4 px-4 pb-4'>
+            <h2 className='text-2xl font-semibold'>
+              Estimasi Anggaran Per Flock
+            </h2>
+            <div className='flex flex-col gap-4'>
+              {formik.values.project_budgets &&
+              formik.values.project_budgets.length > 0 ? (
+                formik.values.project_budgets.map((budget, index) => (
+                  <Card
+                    key={index}
+                    variant='bordered'
+                    className={{
+                      wrapper: 'w-full',
+                      body: 'p-3',
+                    }}
+                  >
+                    <div className='flex flex-col gap-2'>
+                      <div className='flex flex-row justify-between items-center mb-2'>
+                        <div className='text-lg'>Anggaran ke-{index + 1}</div>
+                        <Button
+                          type='button'
+                          color='error'
+                          onClick={() =>
+                            onDeleteBudgetRowHandler(
+                              budget.nonstock_id as number,
+                              index
+                            )
+                          }
+                        >
+                          <Icon icon='mdi:trash' width={16} height={16} />
+                        </Button>
+                      </div>
+                      <div className='flex flex-row justify-between items-center'>
+                        <SelectInput
+                          isClearable
+                          options={filteredNonStockOptions ?? []}
+                          isLoading={isLoadingNonstocks}
+                          placeholder='Pilih barang non stock'
+                          value={formik.values.project_budgets[index].nonstock}
+                          onChange={(val) => {
+                            const updatedBudgets = [
+                              ...formik.values.project_budgets,
+                            ];
+                            updatedBudgets[index].nonstock = val as OptionType;
+                            updatedBudgets[index].nonstock_id =
+                              (val as OptionType)
+                                ? (val as OptionType).value
+                                : 0;
+                            formik.setFieldValue(
+                              'project_budgets',
+                              updatedBudgets
+                            );
+                            formik.setFieldTouched(
+                              `project_budgets[${index}].nonstock_id`,
+                              true
+                            );
+                          }}
+                          errorMessage={
+                            (
+                              formik.errors.project_budgets?.[
+                                index
+                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                            )?.nonstock_id as string
+                          }
+                          isError={
+                            formik.touched.project_budgets?.[index]
+                              ?.nonstock_id &&
+                            Boolean(
+                              (
+                                formik.errors.project_budgets?.[
+                                  index
+                                ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                              )?.nonstock_id as string
+                            )
+                          }
+                        />
+                      </div>
+                      <div className='flex flex-row justify-between items-center'>
+                        <NumberInput
+                          name={`project_budgets[${index}].qty`}
+                          placeholder='Masukkan jumlah'
+                          value={formik.values.project_budgets[index].qty}
+                          onChange={(e) =>
+                            handleBudgetChange(index, 'qty', e.target.value)
+                          }
+                          onBlur={formik.handleBlur}
+                          allowNegative={false}
+                          endAdornment={
+                            <div className='text-gray-500'>
+                              {isResponseSuccess(nonstocks)
+                                ? (nonstocks.data.find(
+                                    (ns) => ns.id === budget.nonstock_id
+                                  )?.uom?.name ?? '')
+                                : ''}
+                            </div>
+                          }
+                          errorMessage={
+                            (
+                              formik.errors.project_budgets?.[
+                                index
+                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                            )?.qty as string
+                          }
+                          isError={
+                            formik.touched.project_budgets?.[index]?.qty &&
+                            Boolean(
+                              (
+                                formik.errors.project_budgets?.[
+                                  index
+                                ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                              )?.qty as string
+                            )
+                          }
+                        />
+                      </div>
+                      <div className='flex flex-row justify-between items-center'>
+                        <NumberInput
+                          name={`project_budgets[${index}].price`}
+                          value={formik.values.project_budgets[index].price}
+                          onChange={(e) =>
+                            handleBudgetChange(index, 'price', e.target.value)
+                          }
+                          onBlur={formik.handleBlur}
+                          placeholder='Masukkan harga satuan'
+                          allowNegative={false}
+                          startAdornment='Rp'
+                          endAdornment={
+                            <div className='text-gray-500'>
+                              {`Per ${
+                                isResponseSuccess(nonstocks)
+                                  ? (nonstocks.data.find(
+                                      (ns) => ns.id === budget.nonstock_id
+                                    )?.uom?.name ?? 'Item')
+                                  : 'Item'
+                              }`}
+                            </div>
+                          }
+                          errorMessage={
+                            (
+                              formik.errors.project_budgets?.[
+                                index
+                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                            )?.price as string
+                          }
+                          isError={
+                            formik.touched.project_budgets?.[index]?.price &&
+                            Boolean(
+                              (
+                                formik.errors.project_budgets?.[
+                                  index
+                                ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                              )?.price as string
+                            )
+                          }
+                        />
+                      </div>
+                      <div className='flex flex-row justify-between items-center'>
+                        <NumberInput
+                          name={`project_budgets[${index}].total_price`}
+                          value={
+                            formik.values.project_budgets[index].total_price
+                          }
+                          onChange={(e) =>
+                            handleBudgetChange(
+                              index,
+                              'total_price',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          placeholder='Masukkan harga total'
+                          allowNegative={false}
+                          startAdornment='Rp'
+                          endAdornment={
+                            <div className='text-gray-500'>Total</div>
+                          }
+                          errorMessage={
+                            (
+                              formik.errors.project_budgets?.[
+                                index
+                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                            )?.total_price as string
+                          }
+                          isError={
+                            formik.touched.project_budgets?.[index]
+                              ?.total_price &&
+                            Boolean(
+                              (
+                                formik.errors.project_budgets?.[
+                                  index
+                                ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                              )?.total_price as string
+                            )
+                          }
+                        />
+                      </div>
+                    </div>
+                  </Card>
+                ))
+              ) : (
+                <div className='text-center py-4 text-gray-400'>
+                  Tidak ada data estimasi anggaran.
+                </div>
+              )}
+              <Button
+                type='button'
+                onClick={onAddBudgetRowHandler}
+                disabled={filteredNonStockOptions.length == 0}
+                color='success'
+                className='w-fit self-center'
+              >
+                <Icon icon='mdi:plus' width={16} height={16} /> Add Budget
+              </Button>
+            </div>
+          </div>
+
+          <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
+            {/* <div className='w-120'>
+              <div className='text-primary text-sm'>
+                {JSON.stringify(formik.values)}
               </div>
+              <div className='text-error text-sm'>
+                {JSON.stringify(formik.errors)}
+              </div>
+            </div> */}
+            {formType !== 'detail' && (
+              <Button
+                type='submit'
+                color='primary'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+                className='px-4 w-full'
+              >
+                <Icon icon='mdi:plus' width={24} height={24} />
+                {formType == 'add' ? 'Add Flock' : 'Update Flock'}
+              </Button>
             )}
           </div>
         </form>
-        {formType != 'add' && (
-          <div className='w-full'>
-            <Button
-              onClick={() => {
-                if (initialValues?.id) {
-                  deleteModal.openModal();
-                }
-              }}
-              color='error'
-            >
-              <Icon
-                icon='material-symbols:delete-outline-rounded'
-                width={16}
-                height={16}
-                className='justify-start text-sm'
-              />
-              Delete
-            </Button>
-          </div>
-        )}
       </section>
 
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${initialValues?.flock_name} - ${initialValues?.area?.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -765,12 +1157,12 @@ const ProjectFlockForm = ({
         }}
       />
 
-      <ConfirmationModal
+      <ConfirmationModalWithNotes
         ref={confirmModal.ref}
         type={approvalAction == 'APPROVED' ? 'success' : 'error'}
         text={`Apakah anda yakin ingin ${
           approvalAction == 'APPROVED' ? 'approve' : 'reject'
-        } Project Flock berikut? (${initialValues?.flock?.name} - ${
+        } Project Flock berikut? (${initialValues?.flock_name} - ${
           initialValues?.area?.name
         })?`}
         secondaryButton={{
@@ -780,10 +1172,8 @@ const ProjectFlockForm = ({
           text: 'Ya',
           color: approvalAction == 'APPROVED' ? 'success' : 'error',
           isLoading: isApproveLoading,
-          onClick: () => {
-            confirmationModalClickHandler({
-              action: approvalAction,
-            });
+          onClick: (notes) => {
+            confirmApprovalHandler(notes, approvalAction);
           },
         }}
       />
@@ -791,4 +1181,6 @@ const ProjectFlockForm = ({
   );
 };
 
+ProjectFlockForm.displayName = 'ProjectFlockForm';
+
 export default ProjectFlockForm;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
index bf930eec..14a9b11a 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -1,145 +1,151 @@
 'use client';
 
+import Badge from '@/components/Badge';
+import Card from '@/components/Card';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { OnChangeFn } from '@tanstack/react-table';
+import {
+  ProjectFlock,
+  ProjectFlockPeriods,
+} from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { OnChangeFn, Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
 
 const ProjectFlockKandangTable = ({
+  listPeriods,
   listKandang,
   rowSelection,
   setRowSelection,
   selectedIds,
+  initialValues,
   formType = 'add',
 }: {
+  listPeriods: ProjectFlockPeriods;
   listKandang: Kandang[];
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
   selectedIds: (number | undefined)[];
+  initialValues?: ProjectFlock;
   formType: 'add' | 'edit' | 'detail';
 }) => {
-  console.log('selectedIds');
-  console.log(selectedIds);
+  // Fungsi untuk menangani perubahan checkbox
+  const handleCheckboxChange = (kandang: Kandang, isChecked: boolean) => {
+    // Hanya izinkan perubahan jika tidak dalam mode 'detail'
+    if (formType === 'detail') return;
+
+    // Pastikan kandang.id ada dan tidak null/undefined
+    if (kandang.id === undefined) return;
+
+    const kandangIdString = kandang.id.toString();
+
+    setRowSelection((prev) => {
+      const newSelection = { ...prev };
+      if (isChecked) {
+        newSelection[kandangIdString] = true;
+      } else {
+        delete newSelection[kandangIdString];
+      }
+      return newSelection;
+    });
+  };
   return (
-    <Table<Kandang>
-      data={listKandang}
-      columns={[
-        {
-          id: 'select',
-          header: ({ table }) => {
-            const allRows = table.getRowModel().rows;
-            const selectableRows = allRows.filter(
-              (row) =>
-                row.original.status == 'NON_ACTIVE' ||
-                row.original.status == 'PENGAJUAN'
-            );
+    <>
+      {listKandang.length > 0 ? (
+        <>
+          {/* ... Bagian Badge Status ... */}
+          <div className='flex flex-row mb-4'>
+            <Badge
+              variant='soft'
+              color='primary'
+              className={{
+                badge: 'rounded-lg px-2',
+              }}
+            >
+              <Icon icon='mdi:circle' width={12} height={12} />
+              Tersedia (
+              {
+                listKandang.filter((kandang) => kandang.status == 'NON_ACTIVE')
+                  .length
+              }
+              )
+            </Badge>
+            <div className='divider divider-horizontal mx-1'></div>
+            <Badge
+              variant='soft'
+              color='neutral'
+              className={{
+                badge: 'rounded-lg px-2',
+              }}
+            >
+              <Icon icon='mdi:circle' width={12} height={12} />
+              Tidak Tersedia (
+              {
+                listKandang.filter((kandang) => kandang.status != 'NON_ACTIVE')
+                  .length
+              }
+              )
+            </Badge>
+          </div>
+          {/* --- */}
+          <Card
+            variant='bordered'
+            className={{
+              wrapper: 'w-full rounded-lg',
+              body: 'p-4',
+            }}
+          >
+            <div className='flex flex-col gap-4 w-full'>
+              {listKandang.map((kandang, index) => {
+                const kandangIdString =
+                  kandang.id?.toString() ?? `temp-${index}`;
 
-            const allSelected =
-              selectableRows.every((row) => row.getIsSelected()) &&
-              selectableRows.length != 0 && formType != 'detail';
+                const isSelected =
+                  !!rowSelection[kandangIdString] ||
+                  (kandang.id !== undefined &&
+                    selectedIds.includes(kandang.id));
 
-            const someSelected =
-              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+                const isDisabled =
+                  formType == 'detail' || kandang.status != 'NON_ACTIVE';
 
-            const toggleSelectableRows = () => {
-              const shouldSelect = !allSelected;
-              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
-            };
-
-            return (
-              <div className='w-full flex flex-row justify-center'>
-                <CheckboxInput
-                  name='allRow'
-                  checked={allSelected}
-                  indeterminate={someSelected}
-                  onChange={toggleSelectableRows}
-                  disabled={
-                    listKandang.filter(
-                      (kandang) =>
-                        kandang.status == 'NON_ACTIVE' ||
-                        kandang.status == 'PENGAJUAN'
-                    ).length == 0 || formType == 'detail'
-                  }
-                />
-              </div>
-            );
-          },
-          cell: ({ row }) => {
-            return (
-              <CheckboxInput
-                name='row'
-                checked={
-                  (row.getIsSelected() &&
-                    (row.original.status == 'NON_ACTIVE' ||
-                      row.original.status == 'PENGAJUAN')) ||
-                  selectedIds.includes(row.original.id)
-                }
-                disabled={
-                  !row.getCanSelect() ||
-                  (row.original.status != 'NON_ACTIVE' &&
-                    row.original.status != 'PENGAJUAN') ||
-                  formType == 'detail'
-                }
-                indeterminate={row.getIsSomeSelected()}
-                onChange={row.getToggleSelectedHandler()}
-              />
-            );
-          },
-        },
-        {
-          accessorFn: (row) => row.name,
-          header: 'Kandang',
-        },
-        {
-          accessorFn: (row) => row.status,
-          header: 'Status',
-          cell: (props) => {
-            return (
-              <PillBadge
-                color={(() => {
-                  switch (props.row.original.status) {
-                    case 'ACTIVE':
-                      return 'red';
-                    case 'PENGAJUAN':
-                      return 'green';
-                    case 'NON_ACTIVE':
-                      return 'blue';
-                    default:
-                      return 'gray';
-                  }
-                })()}
-                content={props.row.original.status
-                  .toLowerCase()
-                  .replace(/_/g, ' ')
-                  .replace(/\b\w/g, (char) => char.toUpperCase())}
-              />
-            );
-          },
-        },
-        {
-          accessorFn: (row) => row.pic?.name,
-          header: 'Penanggung Jawab',
-        },
-      ]}
-      className={{
-        containerClassName: cn({
-          'mb-20': listKandang?.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',
-      }}
-      rowSelection={rowSelection}
-      setRowSelection={setRowSelection}
-    />
+                return (
+                  <div key={index} className='flex flex-row justify-between'>
+                    <CheckboxInput
+                      name={`kandang-${kandang.id}`} // Nama unik untuk setiap checkbox
+                      label={kandang.name}
+                      checked={isSelected}
+                      disabled={isDisabled}
+                      onChange={(e) =>
+                        handleCheckboxChange(kandang, e.currentTarget.checked)
+                      }
+                    />
+                    <Badge
+                      variant='soft'
+                      color={
+                        kandang.status == 'NON_ACTIVE' ? 'primary' : 'neutral'
+                      }
+                      className={{
+                        badge: 'rounded-lg px-2',
+                      }}
+                    >
+                      <Icon icon='mdi:circle' width={12} height={12} />
+                      {kandang.status != 'NON_ACTIVE' && 'Tidak'} Tersedia
+                    </Badge>
+                  </div>
+                );
+              })}
+            </div>
+          </Card>
+        </>
+      ) : (
+        <div className='text-center py-4 text-gray-400'>
+          Pilih lokasi terlebih dahulu
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 85ec092f..65cead2a 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -1,143 +1,66 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import { RefObject } from 'react';
+import useSWR from 'swr';
 import { Icon } from '@iconify/react';
-import { SortingState } from '@tanstack/react-table';
-import { cn } from '@/lib/helper';
+import { SortingState, CellContext } from '@tanstack/react-table';
+import { cn, formatDate } from '@/lib/helper';
 import { useModal } from '@/components/Modal';
+import Modal from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import { OptionType } from '@/components/input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { TableToolbar } from '@/components/table/TableToolbar';
-import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import { type CellContext } from '@tanstack/react-table';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { type Recording } from '@/types/api/production/recording';
-
-const dummyRecordings: Recording[] = [
-  {
-    id: 1,
-    flock: {
-      id: 1,
-      name: 'Flock Recording 1',
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    recording_date: '2024-01-01',
-    location: {
-      id: 1,
-      name: 'Location 1',
-      address: 'Jl. Contoh No. 1',
-      area: {
-        id: 1,
-        name: 'Area 1',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    coop: {
-      id: 1,
-      name: 'Coop 1',
-      status: 'ACTIVE',
-      location: {
-        id: 1,
-        name: 'Location 1',
-        address: 'Jl. Contoh No. 1',
-        area: {
-          id: 1,
-          name: 'Area 1',
-        },
-      },
-      pic: {
-        id: 1,
-        id_user: 1,
-        email: 'pic@example.com',
-        name: 'PIC User',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    feed_data: [
-      {
-        feed_name: 'Feed 1',
-        feed_qty: 100,
-        feed_stock: 500,
-      },
-    ],
-    body_weight: [
-      {
-        chicken_weight: 2.5,
-        chicken_count: 1000,
-        average_chicken_weight: 2.5,
-      },
-    ],
-    vaccination: [
-      {
-        vaccine_name: 'Vaccine 1',
-        total_stock: 200,
-        used_stock: 150,
-      },
-    ],
-    mortality: [
-      {
-        condition: 'NORMAL',
-        count: 5,
-      },
-    ],
-    created_at: '2024-01-01',
-    updated_at: '2024-01-01',
-    created_user: {
-      id: 1,
-      id_user: 1,
-      email: 'admin@example.com',
-      name: 'Admin',
-    },
-  },
-];
+import { RecordingApi } from '@/services/api/production';
+import { ApprovalApi } from '@/services/api/approval';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import toast from 'react-hot-toast';
+import Badge from '@/components/Badge';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { BaseApproval, BaseApiResponse } from '@/types/api/api-general';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
   deleteClickHandler,
+  approveClickHandler,
+  rejectClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
   props: CellContext<Recording, unknown>;
   deleteClickHandler: () => void;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
 }) => {
+  const isRecordingApproved = (recording: Recording) => {
+    return (
+      recording.approval?.action === 'APPROVED' &&
+      recording.approval?.step_number === 2 &&
+      recording.approval?.step_name === 'Disetujui'
+    );
+  };
+
+  const isRecordingRejected = (recording: Recording) => {
+    return recording.approval?.action === 'REJECTED';
+  };
+
+  const isApproved = isRecordingApproved(props.row.original);
+  const isRejected = isRecordingRejected(props.row.original);
+
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`recording/detail/?recordingId=${props.row.original.id}`}
+        href={`/production/recording/detail/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -146,7 +69,7 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
+        href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
         className='justify-start text-sm'
@@ -154,11 +77,33 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:pencil-outline' width={16} height={16} />
         Edit
       </Button>
+      {!isApproved && !isRejected && (
+        <Button
+          onClick={approveClickHandler}
+          variant='ghost'
+          color='success'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:check' width={16} height={16} />
+          Approve
+        </Button>
+      )}
+      {!isApproved && !isRejected && (
+        <Button
+          onClick={rejectClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:close' width={16} height={16} />
+          Reject
+        </Button>
+      )}
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -168,31 +113,291 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const ApprovalHistoryModal = ({
+  ref,
+  currentApproval,
+  module_name = 'RECORDINGS',
+  module_id,
+}: {
+  ref: RefObject<HTMLDialogElement | null>;
+  currentApproval?: BaseApproval;
+  module_name?: string;
+  module_id?: number | undefined;
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const approvalHistoryUrl = useMemo(() => {
+    if (!isModalOpen) return null;
+    const params = new URLSearchParams({
+      module_name: module_name,
+      group_step_number: 'true',
+    });
+
+    if (module_id) {
+      params.append('module_id', module_id.toString());
+    }
+
+    return `${ApprovalApi.basePath}?${params.toString()}`;
+  }, [module_name, module_id, isModalOpen]);
+
+  type GroupedApprovalResponse = {
+    step_number: number;
+    step_name: string;
+    approvals: BaseApproval[];
+  };
+
+  const fetchGroupedApprovals = async (
+    url: string
+  ): Promise<BaseApiResponse<GroupedApprovalResponse[]>> => {
+    return (await ApprovalApi.getAllFetcher(url)) as BaseApiResponse<
+      GroupedApprovalResponse[]
+    >;
+  };
+
+  const { data: approvalHistoryData, isLoading } = useSWR<
+    BaseApiResponse<GroupedApprovalResponse[]>
+  >(approvalHistoryUrl, fetchGroupedApprovals);
+
+  useEffect(() => {
+    const checkModalOpen = () => {
+      const isOpen = ref.current?.open || false;
+      setIsModalOpen(isOpen);
+    };
+
+    checkModalOpen();
+
+    const observer = new MutationObserver(checkModalOpen);
+    if (ref.current) {
+      observer.observe(ref.current, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, [ref]);
+
+  const approvalHistory = useMemo(() => {
+    if (!approvalHistoryData || approvalHistoryData.status !== 'success')
+      return [];
+
+    const groupedData = approvalHistoryData.data || [];
+    const flattenedApprovals: BaseApproval[] = [];
+
+    groupedData.forEach((group) => {
+      group.approvals.forEach((approval) => {
+        flattenedApprovals.push(approval);
+      });
+    });
+
+    return flattenedApprovals;
+  }, [approvalHistoryData]);
+
+  const closeModalHandler = () => {
+    ref.current?.close();
+  };
+
+  return (
+    <Modal ref={ref} className={{ modalBox: 'max-w-2xl' }}>
+      <div className='w-full flex flex-col gap-6'>
+        {/* Header */}
+        <div className='flex items-center justify-between'>
+          <h2 className='text-xl font-bold'>Riwayat Approval</h2>
+          <Button
+            onClick={closeModalHandler}
+            variant='ghost'
+            className='btn-circle btn-sm p-0'
+          >
+            <Icon icon='mdi:close' width={20} height={20} />
+          </Button>
+        </div>
+
+        {isLoading ? (
+          <div className='flex justify-center py-8'>
+            <span className='loading loading-spinner loading-lg'></span>
+          </div>
+        ) : (
+          <>
+            {/* Current Status */}
+            {currentApproval && (
+              <div className='bg-base-200 rounded-lg p-4'>
+                <h3 className='font-semibold mb-2'>Status Saat Ini</h3>
+                <div className='flex items-center gap-3'>
+                  <Badge
+                    variant='soft'
+                    color={
+                      currentApproval.action === 'APPROVED'
+                        ? 'success'
+                        : currentApproval.action === 'REJECTED'
+                          ? 'error'
+                          : currentApproval.action === 'UPDATED'
+                            ? 'warning'
+                            : 'info'
+                    }
+                  >
+                    {currentApproval.step_name}
+                  </Badge>
+                  <span className='text-sm text-gray-600'>
+                    {currentApproval.action === 'APPROVED' && 'Disetujui'}
+                    {currentApproval.action === 'REJECTED' && 'Ditolak'}
+                    {currentApproval.action === 'CREATED' && 'Dibuat'}
+                    {currentApproval.action === 'UPDATED' && 'Diperbarui'}
+                  </span>
+                </div>
+                {currentApproval.notes && (
+                  <p className='mt-2 text-sm text-gray-600'>
+                    <span className='font-medium'>Catatan:</span>{' '}
+                    {currentApproval.notes}
+                  </p>
+                )}
+                <p className='mt-1 text-xs text-gray-500'>
+                  Oleh: {currentApproval.action_by.name} •{' '}
+                  {formatDate(currentApproval.action_at, 'DD MMMM YYYY HH:mm')}
+                </p>
+              </div>
+            )}
+
+            {/* Full History */}
+            {approvalHistory.length > 0 && (
+              <div className='space-y-4'>
+                <h3 className='font-semibold'>Riwayat Lengkap</h3>
+                <div className='overflow-x-auto'>
+                  <table className='table table-sm'>
+                    <thead>
+                      <tr>
+                        <th>Tahap</th>
+                        <th>Aksi</th>
+                        <th>Catatan</th>
+                        <th>Oleh</th>
+                        <th>Waktu</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {approvalHistory
+                        .sort(
+                          (a: BaseApproval, b: BaseApproval) =>
+                            new Date(b.action_at).getTime() -
+                            new Date(a.action_at).getTime()
+                        )
+                        .map((approval: BaseApproval, index: number) => (
+                          <tr key={index}>
+                            <td>{approval.step_name}</td>
+                            <td>
+                              <Badge
+                                variant='soft'
+                                color={
+                                  approval.action === 'APPROVED'
+                                    ? 'success'
+                                    : approval.action === 'REJECTED'
+                                      ? 'error'
+                                      : approval.action === 'UPDATED'
+                                        ? 'warning'
+                                        : 'info'
+                                }
+                                size='sm'
+                              >
+                                {approval.action === 'APPROVED' && 'Disetujui'}
+                                {approval.action === 'REJECTED' && 'Ditolak'}
+                                {approval.action === 'CREATED' && 'Dibuat'}
+                                {approval.action === 'UPDATED' && 'Diperbarui'}
+                              </Badge>
+                            </td>
+                            <td className='max-w-xs'>
+                              <div className='truncate'>
+                                {approval.notes || '-'}
+                              </div>
+                            </td>
+                            <td>{approval.action_by.name}</td>
+                            <td className='text-xs'>
+                              {formatDate(
+                                approval.action_at,
+                                'DD MMMM YYYY HH:mm'
+                              )}
+                            </td>
+                          </tr>
+                        ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </Modal>
   );
 };
 
 const RecordingTable = () => {
-  const [search, setSearch] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      areaFilter: '',
+      locationFilter: '',
+      kandangFilter: '',
+      periodFilter: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      search: 'search',
+      areaFilter: 'area_id',
+      locationFilter: 'location_id',
+      kandangFilter: 'kandang_id',
+      periodFilter: 'period',
+    },
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
-  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+  const [selectedRecording, setSelectedRecording] = useState<
+    Recording | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
-  const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [, setApprovalNotes] = useState('');
 
   const singleDeleteModal = useModal();
-  const bulkApproveModal = useModal();
-  const bulkRejectModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+  const approvalHistoryModal = useModal();
+
+  const {
+    data: recordings,
+    isLoading,
+    mutate: refreshRecordings,
+  } = useSWR(
+    `${RecordingApi.basePath}${getTableFilterQueryString()}`,
+    RecordingApi.getAllFetcher
+  );
+
+  const isRecordingApproved = useCallback((recording: Recording): boolean => {
+    return (
+      recording.approval?.action === 'APPROVED' &&
+      recording.approval?.step_name === 'Disetujui'
+    );
+  }, []);
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearch(e.target.value);
+      updateFilter('search', e.target.value);
       setPage(1);
     },
-    []
+    [updateFilter, setPage]
   );
 
   const pageSizeChangeHandler = useCallback(
@@ -201,213 +406,367 @@ const RecordingTable = () => {
       setPageSize(newVal.value as number);
       setPage(1);
     },
-    []
+    [setPageSize, setPage]
   );
 
-  const paginatedData = useMemo(() => {
-    const filteredData = dummyRecordings.filter(
-      (recording) =>
-        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.coop.name.toLowerCase().includes(search.toLowerCase())
-    );
-    const start = (page - 1) * pageSize;
-    return filteredData.slice(start, start + pageSize);
-  }, [page, pageSize, search]);
-
-  const bulkApproveHandler = async () => {
-    setIsBulkApproveLoading(true);
-    console.log(
-      'Approved recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
-    setTimeout(() => {
-      setIsBulkApproveLoading(false);
-      setSelectedRecordings([]);
-      bulkApproveModal.closeModal();
-    }, 1000);
-  };
-
-  const bulkRejectHandler = async () => {
-    setIsBulkRejectLoading(true);
-    console.log(
-      'Rejected recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
-    setTimeout(() => {
-      setIsBulkRejectLoading(false);
-      setSelectedRecordings([]);
-      bulkRejectModal.closeModal();
-    }, 1000);
-  };
-
   const singleDeleteHandler = async () => {
     setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      singleDeleteModal.closeModal();
-    }, 1000);
+
+    await RecordingApi.delete(selectedRecording?.id as number);
+    refreshRecordings();
+
+    singleDeleteModal.closeModal();
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
   };
 
+  const approveHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    if (eligibleRowIds.length === 0) {
+      toast.error(
+        'Tidak ada recording yang bisa disetujui (sudah disetujui final)'
+      );
+      setIsApproveLoading(false);
+      return;
+    }
+
+    const approveResponse = await RecordingApi.approve(eligibleRowIds, notes);
+
+    if (isResponseSuccess(approveResponse)) {
+      toast.success(
+        `Berhasil approve ${eligibleRowIds.length} data recording!`
+      );
+      approveModal.closeModal();
+      refreshRecordings();
+      setApprovalNotes('');
+      setRowSelection({});
+    } else {
+      toast.error(
+        (approveResponse?.message as string) || 'Gagal menyetujui recording'
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const rejectHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    if (eligibleRowIds.length === 0) {
+      toast.error(
+        'Tidak ada recording yang bisa ditolak (sudah disetujui final)'
+      );
+      setIsRejectLoading(false);
+      return;
+    }
+
+    const rejectResponse = await RecordingApi.reject(eligibleRowIds, notes);
+
+    if (isResponseSuccess(rejectResponse)) {
+      toast.success(`Berhasil reject ${eligibleRowIds.length} data recording!`);
+      rejectModal.closeModal();
+      refreshRecordings();
+      setApprovalNotes('');
+      setRowSelection({});
+    } else {
+      toast.error(
+        (rejectResponse?.message as string) || 'Gagal menolak recording'
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const eligibleRowIds = useMemo(() => {
+    if (!isResponseSuccess(recordings) || !recordings.data) return [];
+    return selectedRowIds.filter((id) => {
+      const recording = recordings.data.find((r) => r.id === id);
+      return recording && !isRecordingApproved(recording);
+    });
+  }, [selectedRowIds, recordings, isRecordingApproved]);
+
+  useEffect(() => {
+    if (isResponseSuccess(recordings) && recordings.data) {
+      const newSelection: Record<string, boolean> = {};
+
+      Object.entries(rowSelection).forEach(([rowId, isSelected]) => {
+        if (isSelected) {
+          const recording = recordings.data.find(
+            (r) => r.id === parseInt(rowId)
+          );
+          if (recording && !isRecordingApproved(recording)) {
+            newSelection[rowId] = true;
+          }
+        }
+      });
+
+      if (
+        Object.keys(newSelection).length !== Object.keys(rowSelection).length
+      ) {
+        setRowSelection(newSelection);
+      }
+    }
+  }, [recordings, rowSelection, isRecordingApproved, setRowSelection]);
+
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='w-full p-0 sm:p-4'>
       <div className='flex flex-col gap-2 mb-4'>
-        <TableToolbar
-          addButton={{
-            href: 'recording/add',
-            label: 'Tambah Recording',
-          }}
-          search={{
-            value: search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Recording',
-          }}
-        />
-        <TableRowSizeSelector
-          value={pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
-        />
-      </div>
+        <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+          <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+            <Button
+              href='/production/recording/add'
+              variant='outline'
+              color='primary'
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='ic:round-plus' width={24} height={24} />
+              Tambah
+            </Button>
 
-      {/* Bulk action buttons */}
-      <div className={'flex justify-end items-center'}>
-        {selectedRecordings.length > 0 && (
-          <div className='flex gap-2 mb-4'>
-            <Button
-              type='button'
-              color='success'
-              onClick={() => bulkApproveModal.openModal()}
-              className='flex items-center gap-2'
-            >
-              <Icon
-                icon='material-symbols:check-circle-outline'
-                width={20}
-                height={20}
-              />
-              Approve ({selectedRecordings.length})
-            </Button>
-            <Button
-              type='button'
-              color='error'
-              onClick={() => bulkRejectModal.openModal()}
-              className='flex items-center gap-2'
-            >
-              <Icon
-                icon='material-symbols:cancel-outline'
-                width={20}
-                height={20}
-              />
-              Reject ({selectedRecordings.length})
-            </Button>
+            {selectedRowIds.length > 0 && (
+              <>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={() => {
+                    setApprovalNotes('');
+                    approveModal.openModal();
+                  }}
+                  disabled={
+                    selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                  }
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='material-symbols:check' width={24} height={24} />
+                  Approve
+                </Button>
+
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={() => {
+                    setApprovalNotes('');
+                    rejectModal.openModal();
+                  }}
+                  disabled={
+                    selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                  }
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </>
+            )}
           </div>
-        )}
 
-        <ConfirmationModal
-          ref={bulkApproveModal.ref}
-          type='success'
-          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'success',
-            isLoading: isBulkApproveLoading,
-            onClick: bulkApproveHandler,
-          }}
-        />
+          <DebouncedTextInput
+            name='search'
+            placeholder='Cari Recording'
+            value={tableFilterState.search}
+            onChange={searchChangeHandler}
+            className={{ wrapper: 'sm:max-w-3xs' }}
+          />
+        </div>
 
-        <ConfirmationModal
-          ref={bulkRejectModal.ref}
-          type='error'
-          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isBulkRejectLoading,
-            onClick: bulkRejectHandler,
-          }}
-        />
+        <div className='flex justify-end gap-4'>
+          <SelectInput
+            label='Baris'
+            options={ROWS_OPTIONS}
+            value={{
+              label: String(tableFilterState.pageSize),
+              value: tableFilterState.pageSize,
+            }}
+            onChange={pageSizeChangeHandler}
+            className={{
+              wrapper: 'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+            }}
+          />
+        </div>
       </div>
 
-      <Table
-        data={paginatedData}
+      <Table<Recording>
+        data={isResponseSuccess(recordings) ? recordings?.data : []}
         columns={[
           {
             id: 'select',
-            accessorKey: 'id',
-            header: ({ table }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={
-                  table.getRowModel().rows.length > 0 &&
-                  table
-                    .getRowModel()
-                    .rows.every((row) => selectedRecordings.includes(row.index))
-                }
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings(
-                      table.getRowModel().rows.map((row) => row.index)
-                    );
-                  } else {
-                    setSelectedRecordings([]);
-                  }
-                }}
-              />
-            ),
-            cell: ({ row }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={selectedRecordings.includes(row.index)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings([...selectedRecordings, row.index]);
-                  } else {
-                    setSelectedRecordings(
-                      selectedRecordings.filter((i) => i !== row.index)
-                    );
-                  }
-                }}
-              />
-            ),
+            header: ({ table }) => {
+              const allRows = table.getRowModel().rows;
+              const selectableRows = allRows.filter((row) => {
+                const recording = row.original;
+                return !isRecordingApproved(recording);
+              });
+
+              const hasNoSelectableRows = selectableRows.length === 0;
+
+              const handleSelectAll = () => {
+                const isAllSelected = selectableRows.every((row) =>
+                  row.getIsSelected()
+                );
+
+                selectableRows.forEach((row) => {
+                  row.toggleSelected(!isAllSelected);
+                });
+              };
+
+              const isAllSelected =
+                selectableRows.length > 0 &&
+                selectableRows.every((row) => row.getIsSelected());
+
+              const isSomeSelected = selectableRows.some((row) =>
+                row.getIsSelected()
+              );
+
+              return (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={isAllSelected}
+                    indeterminate={isSomeSelected && !isAllSelected}
+                    onChange={handleSelectAll}
+                    disabled={hasNoSelectableRows}
+                  />
+                </div>
+              );
+            },
+            cell: ({ row }) => {
+              return (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              );
+            },
           },
           {
             header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-          },
-          {
-            accessorKey: 'flock.name',
-            header: 'Flock',
-          },
-          {
-            accessorKey: 'recording_date',
-            header: 'Tanggal Recording',
             cell: (props) =>
-              new Date(props.row.original.recording_date).toLocaleDateString(),
+              tableFilterState.pageSize * (tableFilterState.page - 1) +
+              props.row.index +
+              1,
           },
           {
-            accessorKey: 'location.name',
-            header: 'Lokasi',
-          },
-          {
-            accessorKey: 'coop.name',
-            header: 'Kandang',
-          },
-          {
-            accessorKey: 'mortality',
-            header: 'Total Mortality',
+            header: 'Nama Project',
             cell: (props) =>
-              props.row.original.mortality.reduce(
-                (acc, curr) => acc + curr.count,
-                0
-              ),
+              `Project ${props.row.original.project_flock_kandang_id}`,
+          },
+          {
+            header: 'Kategori',
+            cell: (props) => {
+              const category = props.row.original.project_flock_category;
+              if (!category) return '-';
+              const color = category === 'LAYING' ? 'info' : 'warning';
+              return (
+                <Badge variant='soft' color={color}>
+                  {category}
+                </Badge>
+              );
+            },
+          },
+          {
+            header: 'Umur (hari)',
+            cell: (props) => props.row.original.day,
+          },
+          {
+            accessorKey: 'record_date',
+            header: 'Waktu Recording',
+            cell: (props) =>
+              formatDate(props.row.original.record_datetime, 'DD MMMM YYYY'),
+          },
+          {
+            header: 'Populasi Awal',
+            cell: (props) =>
+              props.row.original.total_chick_qty?.toLocaleString() || '-',
+          },
+          {
+            header: 'Status Approval',
+            cell: (props) => {
+              const approval = props.row.original.approval;
+              if (!approval) return '-';
+
+              const statusColor =
+                approval.action === 'APPROVED'
+                  ? 'success'
+                  : approval.action === 'REJECTED'
+                    ? 'error'
+                    : approval.action === 'UPDATED'
+                      ? 'warning'
+                      : 'info';
+
+              const openApprovalHistory = () => {
+                setSelectedRecording(props.row.original);
+                approvalHistoryModal.openModal();
+              };
+
+              const getStatusText = (action: string) => {
+                switch (action) {
+                  case 'APPROVED':
+                    return 'Disetujui';
+                  case 'REJECTED':
+                    return 'Ditolak';
+                  case 'CREATED':
+                    return 'Dibuat';
+                  case 'UPDATED':
+                    return 'Diperbarui';
+                  default:
+                    return action;
+                }
+              };
+
+              return (
+                <Badge
+                  variant='soft'
+                  color={statusColor}
+                  className={{
+                    badge:
+                      'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                  }}
+                  onClick={openApprovalHistory}
+                >
+                  {getStatusText(approval.action)}
+                </Badge>
+              );
+            },
+          },
+          {
+            header: 'Catatan Approval',
+            cell: (props) => {
+              const approval = props.row.original.approval;
+              if (!approval?.notes) return '-';
+
+              return (
+                <div className='max-w-xs'>
+                  <p className='text-sm truncate'>{approval.notes}</p>
+                </div>
+              );
+            },
+          },
+          // {
+          //   header: 'Status Grading Telur',
+          //   cell: (props) => {
+          //     const status = props.row.original.egg_grading_status;
+          //     if (!status) return '-';
+          //     const color = status === 'COMPLETED' ? 'success' : 'warning';
+          //     return (
+          //       <Badge variant='soft' color={color}>
+          //         {status}
+          //       </Badge>
+          //     );
+          //   },
+          // },
+          {
+            header: 'Dibuat Oleh',
+            cell: (props) => props.row.original.created_user?.name || '-',
+          },
+          {
+            header: 'Tanggal Submit',
+            cell: (props) =>
+              formatDate(props.row.original.created_at, 'DD MMMM YYYY'),
           },
           {
             header: 'Aksi',
@@ -426,6 +785,22 @@ const RecordingTable = () => {
                 singleDeleteModal.openModal();
               };
 
+              const approveClickHandler = () => {
+                setRowSelection({
+                  [String(props.row.original.id)]: true,
+                });
+                setApprovalNotes('');
+                approveModal.openModal();
+              };
+
+              const rejectClickHandler = () => {
+                setRowSelection({
+                  [String(props.row.original.id)]: true,
+                });
+                setApprovalNotes('');
+                rejectModal.openModal();
+              };
+
               return (
                 <>
                   {currentPageSize > 2 && (
@@ -434,6 +809,8 @@ const RecordingTable = () => {
                         type='dropdown'
                         props={props}
                         deleteClickHandler={deleteClickHandler}
+                        approveClickHandler={approveClickHandler}
+                        rejectClickHandler={rejectClickHandler}
                       />
                     </RowDropdownOptions>
                   )}
@@ -444,6 +821,8 @@ const RecordingTable = () => {
                         type='collapse'
                         props={props}
                         deleteClickHandler={deleteClickHandler}
+                        approveClickHandler={approveClickHandler}
+                        rejectClickHandler={rejectClickHandler}
                       />
                     </RowCollapseOptions>
                   )}
@@ -452,18 +831,23 @@ const RecordingTable = () => {
             },
           },
         ]}
-        pageSize={pageSize}
-        page={page}
-        totalItems={dummyRecordings.length}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(recordings) ? recordings?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(recordings) ? recordings?.meta?.total_results : 0
+        }
         onPageChange={setPage}
-        isLoading={false}
+        isLoading={isLoading}
         sorting={sorting}
         setSorting={setSorting}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
         className={{
           containerClassName: cn({
-            'mb-20': paginatedData.length === 0,
+            'mb-20':
+              isResponseSuccess(recordings) && recordings?.data?.length === 0,
           }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableWrapperClassName: 'overflow-x-auto min-h-full overflow-visible!',
           tableClassName: 'font-inter w-full table-auto min-h-full!',
           headerRowClassName: 'border-b border-b-gray-200',
           headerColumnClassName:
@@ -488,6 +872,49 @@ const RecordingTable = () => {
           onClick: singleDeleteHandler,
         }}
       />
+
+      <ConfirmationModalWithNotes
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data recording ini (${eligibleRowIds.length} data dari ${selectedRowIds.length} yang dipilih)?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: () => setApprovalNotes(''),
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: approveHandler,
+        }}
+        placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
+        rows={3}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin reject data recording ini (${eligibleRowIds.length} data dari ${selectedRowIds.length} yang dipilih)?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: () => setApprovalNotes(''),
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: rejectHandler,
+        }}
+        placeholder='(Opsional) Tambahkan catatan untuk reject ini...'
+        rows={3}
+      />
+
+      <ApprovalHistoryModal
+        ref={approvalHistoryModal.ref}
+        currentApproval={selectedRecording?.approval}
+        module_name={'RECORDINGS'}
+        module_id={selectedRecording?.id}
+      />
     </div>
   );
 };
diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 4b0b37dd..30013001 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -1,212 +1,275 @@
 import * as Yup from 'yup';
-import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import { Recording } from '@/types/api/production/recording';
+import {
+  Recording,
+  CreateGrowingRecordingPayload,
+  CreateLayingRecordingPayload,
+  CreateEggPayload,
+} from '@/types/api/production/recording';
 
-export const RecordingFormSchema = Yup.object({
-  flock: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  flock_id: Yup.number()
-    .default(0)
-    .typeError('Flock wajib diisi!')
-    .test(
-      'is-valid-flock',
-      'Flock wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Flock wajib diisi!'),
-  location: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  location_id: Yup.number()
-    .default(0)
-    .typeError('Lokasi wajib diisi!')
-    .test(
-      'is-valid-location',
-      'Lokasi wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Lokasi wajib diisi!'),
-  coop: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  coop_id: Yup.number()
-    .default(0)
-    .typeError('Kandang wajib diisi!')
-    .test(
-      'is-valid-coop',
-      'Kandang wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Kandang wajib diisi!'),
-  recording_date: Yup.date()
-    .required('Tanggal recording wajib diisi')
-    .typeError('Format tanggal tidak valid'),
-  feed_data: Yup.array()
-    .of(
-      Yup.object({
-        feed_id: Yup.string().required('Nama pakan wajib diisi!'),
-        feed_qty: Yup.mixed<number | ''>().notRequired(),
-        feed_stock: Yup.number()
-          .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1!')
-          .typeError('Jumlah pakan yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-qty',
-            'Jumlah pakan yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { feed_qty } = this.parent;
-              if (value === undefined) return true;
-              if (
-                feed_qty === undefined ||
-                feed_qty === '' ||
-                typeof feed_qty !== 'number'
-              )
-                return true;
-              return value <= feed_qty;
-            }
-          ),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data pakan!')
-    .required('Data pakan wajib diisi!'),
-  body_weight: Yup.array()
-    .of(
-      Yup.object({
-        chicken_weight: Yup.number()
-          .required('Berat ayam wajib diisi!')
-          .min(1, 'Berat ayam minimal 1 gram!')
-          .typeError('Berat ayam harus berupa angka!'),
-        chicken_count: Yup.number()
-          .required('Jumlah ayam wajib diisi!')
-          .min(1, 'Jumlah ayam minimal 1 ekor!')
-          .typeError('Jumlah ayam harus berupa angka!'),
-        average_chicken_weight: Yup.number()
-          .required('Rata-rata berat ayam wajib diisi!')
-          .min(1, 'Rata-rata berat ayam minimal 1 gram!')
-          .typeError('Rata-rata berat ayam harus berupa angka!'),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data bobot badan!')
-    .required('Data bobot badan wajib diisi!'),
-  vaccination: Yup.array()
-    .of(
-      Yup.object({
-        vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
-        total_stock: Yup.mixed<number | ''>().notRequired(),
-        used_stock: Yup.number()
-          .required('Jumlah vaksin yang digunakan wajib diisi!')
-          .min(1, 'Jumlah vaksin minimal 1!')
-          .typeError('Jumlah vaksin yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-total',
-            'Jumlah vaksin yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { total_stock } = this.parent;
-              if (value === undefined) return true;
-              if (
-                total_stock === undefined ||
-                total_stock === '' ||
-                typeof total_stock !== 'number'
-              )
-                return true;
-              return value <= total_stock;
-            }
-          ),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data vaksinasi!')
-    .required('Data vaksinasi wajib diisi!'),
-  mortality: Yup.array()
-    .of(
-      Yup.object({
-        condition: Yup.mixed<string>()
-          .oneOf(
-            RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
-            'Kondisi tidak valid!'
-          )
-          .required('Kondisi wajib diisi!'),
-        count: Yup.number()
-          .required('Jumlah mortalitas wajib diisi!')
-          .min(1, 'Jumlah mortalitas minimal 1 ekor!')
-          .typeError('Jumlah mortalitas harus berupa angka!'),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data mortalitas!')
-    .required('Data mortalitas wajib diisi!'),
+type RecordingGrowingFormSchemaType = {
+  project_flock_kandang: {
+    value: number;
+    label: string;
+  } | null;
+  project_flock_kandang_id: number;
+  body_weights: {
+    weight: number | string;
+    avg_weight: number | string;
+    qty: number | string;
+  }[];
+  stocks: {
+    product_warehouse_id: number;
+    qty: number | string;
+  }[];
+  depletions: {
+    product_warehouse_id: number;
+    qty: number | string;
+  }[];
+};
+
+type RecordingLayingFormSchemaType = RecordingGrowingFormSchemaType & {
+  eggs: {
+    product_warehouse_id: number;
+    qty: number | string;
+    weight: number | string;
+  }[];
+};
+
+export type BodyWeightSchema = {
+  weight: number | string;
+  avg_weight: number | string;
+  qty: number | string;
+};
+
+export type StockSchema = {
+  product_warehouse_id: number;
+  qty: number | string;
+};
+
+export type DepletionSchema = {
+  product_warehouse_id: number;
+  qty: number | string;
+};
+
+export type EggSchema = {
+  product_warehouse_id: number;
+  qty: number | string;
+  weight: number | string;
+};
+
+const BodyWeightObjectSchema: Yup.ObjectSchema<BodyWeightSchema> = Yup.object({
+  weight: Yup.number()
+    .required('Berat ayam total wajib diisi!')
+    .min(1, 'Berat ayam total minimal 1 gram!')
+    .typeError('Berat ayam total harus berupa angka!'),
+  avg_weight: Yup.number()
+    .required('Berat ayam rata-rata wajib diisi!')
+    .typeError('Berat ayam rata-rata harus berupa angka!'),
+  qty: Yup.number()
+    .required('Jumlah ayam wajib diisi!')
+    .min(1, 'Jumlah ayam minimal 1 ekor!')
+    .typeError('Jumlah ayam harus berupa angka!'),
 });
 
-export const UpdateRecordingFormSchema = RecordingFormSchema;
+const StockObjectSchema: Yup.ObjectSchema<StockSchema> = Yup.object({
+  product_warehouse_id: Yup.number()
+    .required('Produk wajib diisi!')
+    .min(1, 'Produk wajib diisi!')
+    .typeError('Produk harus berupa angka!'),
+  qty: Yup.number()
+    .required('Jumlah penggunaan wajib diisi!')
+    .min(1, 'Jumlah penggunaan tidak boleh 0!')
+    .typeError('Jumlah penggunaan harus berupa angka!'),
+});
 
-export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
+const DepletionObjectSchema: Yup.ObjectSchema<DepletionSchema> = Yup.object({
+  product_warehouse_id: Yup.number()
+    .required('Produk depletions wajib diisi!')
+    .min(1, 'Produk depletions wajib diisi!')
+    .typeError('Produk depletions harus berupa angka!'),
+  qty: Yup.number()
+    .required('Jumlah depletions wajib diisi!')
+    .min(1, 'Jumlah depletions minimal 1!')
+    .typeError('Jumlah depletions harus berupa angka!'),
+});
 
-export const getRecordingFormInitialValues = (
-  initialValues?: Recording
-): RecordingFormValues => ({
-  flock: initialValues?.flock
+const EggObjectSchema: Yup.ObjectSchema<EggSchema> = Yup.object({
+  product_warehouse_id: Yup.number()
+    .required('Kondisi telur wajib diisi!')
+    .min(1, 'Kondisi telur wajib diisi!')
+    .typeError('Kondisi telur harus berupa angka!'),
+  qty: Yup.number()
+    .required('Jumlah telur wajib diisi!')
+    .min(1, 'Jumlah telur tidak boleh 0!')
+    .typeError('Jumlah telur harus berupa angka!'),
+  weight: Yup.number()
+    .required('Berat telur wajib diisi!')
+    .min(1, 'Berat telur minimal 1 gram!')
+    .typeError('Berat telur harus berupa angka!'),
+});
+
+export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> =
+  Yup.object({
+    project_flock_kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    project_flock_kandang_id: Yup.number()
+      .default(0)
+      .typeError('Project Flock Kandang wajib diisi!')
+      .test(
+        'is-valid-project-flock-kandang',
+        'Project Flock Kandang wajib diisi!',
+        (value) => value !== undefined && value !== null && value > 0
+      )
+      .required('Project Flock Kandang wajib diisi!')
+      .test(
+        'not-already-recorded',
+        'Project Flock ini sudah direcord hari ini!',
+        function (value) {
+          const recordedProjectFlockIds = this.options.context
+            ?.recordedProjectFlockIds as Set<number>;
+          const formType = this.options.context?.type as
+            | 'add'
+            | 'edit'
+            | 'detail';
+          if (formType !== 'add') return true;
+          if (value && recordedProjectFlockIds?.has(value)) {
+            return false;
+          }
+          return true;
+        }
+      ),
+    body_weights: Yup.array()
+      .of(BodyWeightObjectSchema)
+      .min(1, 'Minimal harus ada 1 data bobot badan!')
+      .required('Data bobot badan wajib diisi!'),
+    stocks: Yup.array()
+      .of(StockObjectSchema)
+      .min(1, 'Minimal harus ada 1 data stok!')
+      .required('Data stok wajib diisi!'),
+    depletions: Yup.array()
+      .of(DepletionObjectSchema)
+      .min(1, 'Minimal harus ada 1 data depletions!')
+      .required('Data depletions wajib diisi!'),
+  });
+
+export const RecordingLayingFormSchema: Yup.ObjectSchema<RecordingLayingFormSchemaType> =
+  RecordingGrowingFormSchema.shape({
+    eggs: Yup.array()
+      .of(EggObjectSchema)
+      .min(1, 'Minimal harus ada 1 data telur!')
+      .required('Data telur wajib diisi!'),
+  });
+
+export const UpdateRecordingGrowingFormSchema =
+  RecordingGrowingFormSchema.shape({
+    project_flock_kandang_id: Yup.number()
+      .default(0)
+      .typeError('Project Flock Kandang wajib diisi!')
+      .test(
+        'is-valid-project-flock-kandang',
+        'Project Flock Kandang wajib diisi!',
+        (value) => value !== undefined && value !== null && value > 0
+      )
+      .required('Project Flock Kandang wajib diisi!'),
+  });
+
+export const UpdateRecordingLayingFormSchema = RecordingLayingFormSchema.shape({
+  project_flock_kandang_id: Yup.number()
+    .default(0)
+    .typeError('Project Flock Kandang wajib diisi!')
+    .test(
+      'is-valid-project-flock-kandang',
+      'Project Flock Kandang wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Project Flock Kandang wajib diisi!'),
+});
+
+export type RecordingGrowingFormValues = Yup.InferType<
+  typeof RecordingGrowingFormSchema
+>;
+
+export type RecordingLayingFormValues = Yup.InferType<
+  typeof RecordingLayingFormSchema
+>;
+
+type RecordingFormData = Partial<Recording> & {
+  body_weights?: CreateGrowingRecordingPayload['body_weights'];
+  stocks?: CreateGrowingRecordingPayload['stocks'] | Recording['stocks'];
+  depletions?:
+    | CreateGrowingRecordingPayload['depletions']
+    | Recording['depletions'];
+  eggs?: CreateLayingRecordingPayload['eggs'] | Recording['eggs'];
+  project_flock_kandang_id?: number;
+  project_flock_category?: string;
+};
+
+export const getRecordingGrowingFormInitialValues = (
+  initialValues?: RecordingFormData
+): RecordingGrowingFormValues => ({
+  project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
-        value: initialValues.flock.id,
-        label: initialValues.flock.name,
+        value: initialValues.project_flock_kandang_id,
+        label: `Project Flock #${initialValues.project_flock_kandang_id}`,
       }
     : null,
-  flock_id: initialValues?.flock?.id ?? 0,
-  location: initialValues?.location
-    ? {
-        value: initialValues.location.id,
-        label: initialValues.location.name,
-      }
-    : null,
-  location_id: initialValues?.location?.id ?? 0,
-  coop: initialValues?.coop
-    ? {
-        value: initialValues.coop.id,
-        label: initialValues.coop.name,
-      }
-    : null,
-  coop_id: initialValues?.coop?.id ?? 0,
-  recording_date: initialValues?.recording_date
-    ? new Date(initialValues.recording_date)
-    : new Date(),
-  feed_data: initialValues?.feed_data
-    ? initialValues.feed_data.map((feed) => ({
-        feed_id: feed.feed_name,
-        feed_qty: feed.feed_qty,
-        feed_stock: feed.feed_stock,
-      }))
-    : [
-        {
-          feed_id: '',
-          feed_qty: '',
-          feed_stock: 0,
-        },
-      ],
-  body_weight: initialValues?.body_weight ?? [
+  project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
+  body_weights: initialValues?.body_weights?.map(
+    (bw: NonNullable<CreateGrowingRecordingPayload['body_weights']>[0]) => ({
+      weight: bw.avg_weight * bw.qty,
+      avg_weight: bw.avg_weight,
+      qty: bw.qty,
+    })
+  ) ?? [
     {
-      chicken_weight: 0,
-      chicken_count: 0,
-      average_chicken_weight: 0,
+      weight: '',
+      avg_weight: '',
+      qty: '',
     },
   ],
-  vaccination: initialValues?.vaccination
-    ? initialValues.vaccination.map((vaccine) => ({
-        vaccine_id: vaccine.vaccine_name,
-        total_stock: vaccine.total_stock,
-        used_stock: vaccine.used_stock,
-      }))
-    : [
-        {
-          vaccine_id: '',
-          total_stock: '',
-          used_stock: 0,
-        },
-      ],
-  mortality: initialValues?.mortality ?? [
+  stocks: initialValues?.stocks?.map((stock) => ({
+    product_warehouse_id: stock.product_warehouse_id,
+    qty:
+      (stock as { qty?: number; usage_amount?: number }).qty ||
+      (stock as { qty?: number; usage_amount?: number }).usage_amount ||
+      '',
+  })) ?? [
     {
-      condition: '',
-      count: 0,
+      product_warehouse_id: 0,
+      qty: '',
+    },
+  ],
+  depletions: initialValues?.depletions?.map(
+    (
+      depletion: NonNullable<CreateGrowingRecordingPayload['depletions']>[0]
+    ) => ({
+      product_warehouse_id: depletion.product_warehouse_id,
+      qty: depletion.qty,
+    })
+  ) ?? [
+    {
+      product_warehouse_id: 0,
+      qty: '',
+    },
+  ],
+});
+
+export const getRecordingLayingFormInitialValues = (
+  initialValues?: RecordingFormData
+): RecordingLayingFormValues => ({
+  ...getRecordingGrowingFormInitialValues(initialValues),
+
+  eggs: initialValues?.eggs?.map((egg: CreateEggPayload) => ({
+    product_warehouse_id: egg.product_warehouse_id,
+    qty: egg.qty,
+    weight: egg.weight,
+  })) ?? [
+    {
+      product_warehouse_id: 0,
+      qty: '',
+      weight: '',
     },
   ],
 });
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 6018ae84..4dca38dc 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1,36 +1,64 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+
 import { useFormik } from 'formik';
+import useSWR from 'swr';
+
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
-import TextInput from '@/components/input/TextInput';
-import NumberInput from '@/components/input/NumberInput';
-import CheckboxInput from '@/components/input/CheckboxInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
-import {
-  CreateRecordingPayload,
-  Recording,
-} from '@/types/api/production/recording';
-import {
-  RecordingFormSchema,
-  RecordingFormValues,
-  getRecordingFormInitialValues,
-  UpdateRecordingFormSchema,
-} from './RecordingForm.schema';
-import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { ProjectFlockApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import useSWR from 'swr';
-import { ProductWarehouseApi } from '@/services/api/inventory';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { LocationApi } from '@/services/api/master-data';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import { useModal } from '@/components/Modal';
+
+import {
+  ProjectFlockKandangApi,
+  RecordingApi,
+  ProjectFlockApi,
+} from '@/services/api/production';
+import { LocationApi } from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+
+import {
+  CreateGrowingRecordingPayload,
+  CreateLayingRecordingPayload,
+  UpdateGrowingRecordingPayload,
+  UpdateLayingRecordingPayload,
+  Recording,
+  NextDayRecording,
+} from '@/types/api/production/recording';
+import { type BaseApiResponse } from '@/types/api/api-general';
+import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+import {
+  RecordingGrowingFormSchema,
+  RecordingLayingFormSchema,
+  RecordingGrowingFormValues,
+  RecordingLayingFormValues,
+  getRecordingGrowingFormInitialValues,
+  getRecordingLayingFormInitialValues,
+  UpdateRecordingGrowingFormSchema,
+  UpdateRecordingLayingFormSchema,
+} from '@/components/pages/production/recording/form/RecordingForm.schema';
+
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { formatDate, formatNumber } from '@/lib/helper';
+import toast from 'react-hot-toast';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import {
+  GROWING_RECORDING_APPROVAL_LINE,
+  LAYING_RECORDING_APPROVAL_LINE,
+} from '@/config/approval-line';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -38,741 +66,1701 @@ interface RecordingFormProps {
 }
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-  const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock | null>(null);
-  const [selectedFeed, setSelectedFeed] = useState<number[]>([]);
-  const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
-  const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
-  const [selectedMortality, setSelectedMortality] = useState<number[]>([]);
-  const [, setRecordingFormErrorMessage] = useState('');
+  // ===== HOOKS & ROUTER =====
+  const router = useRouter();
 
-  const {
-    deleteModal,
-    recordingFormErrorMessage,
-    isDeleteLoading,
-    createRecordingHandler,
-    updateRecordingHandler,
-    deleteRecordingClickHandler,
-    confirmationModalDeleteClickHandler,
-  } = useRecordingFormHandlers(initialValues?.id);
+  // ===== STATE MANAGEMENT =====
+  const [selectedBodyWeights, setSelectedBodyWeights] = useState<number[]>([]);
+  const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
+  const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
+  const [selectedEggs, setSelectedEggs] = useState<number[]>([]);
 
-  const formikInitialValues = useMemo<RecordingFormValues>(
-    () => getRecordingFormInitialValues(initialValues),
-    [initialValues]
+  const [editingAverageIndex] = useState<number | null>(null);
+  const [manuallyEditedRows, setManuallyEditedRows] = useState<Set<number>>(
+    new Set()
   );
 
-  const formik = useFormik<RecordingFormValues>({
-    initialValues: formikInitialValues,
-    validationSchema:
-      type === 'edit' ? UpdateRecordingFormSchema : RecordingFormSchema,
-    validateOnChange: true,
-    validateOnBlur: true,
-    onSubmit: async (values) => {
-      setRecordingFormErrorMessage('');
-      const payload: CreateRecordingPayload = {
-        flock_id: values.flock_id,
-        location_id: values.location_id,
-        coop_id: values.coop_id,
-        recording_date:
-          values.recording_date instanceof Date
-            ? values.recording_date.toISOString()
-            : '',
-        feed_data: (values.feed_data ?? []).map((p) => ({
-          feed_id: p.feed_id,
-          feed_qty:
-            typeof p.feed_qty === 'number'
-              ? p.feed_qty
-              : parseFloat(String(p.feed_qty)) || 0,
-          feed_stock:
-            typeof p.feed_stock === 'number'
-              ? p.feed_stock
-              : parseFloat(String(p.feed_stock)) || 0,
+  const [locationSearchValue, setLocationSearchValue] = useState('');
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
+    null
+  );
+
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [, setApprovalNotes] = useState('');
+  const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
+    useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [, setNewRecordingData] = useState<Recording | null>(null);
+  const [nextDayRecording, setNextDayRecording] =
+    useState<NextDayRecording | null>(null);
+
+  const approveModal = useModal();
+  const rejectModal = useModal();
+  const deleteModal = useModal();
+
+  const isRecordingApproved = useCallback((recording?: Recording) => {
+    return (
+      recording?.approval?.action === 'APPROVED' &&
+      recording?.approval?.step_name === 'Disetujui'
+    );
+  }, []);
+
+  const isRecordingRejected = useCallback((recording?: Recording) => {
+    return recording?.approval?.action === 'REJECTED';
+  }, []);
+
+  // ===== PAYLOAD CREATION HELPERS =====
+  const createGrowingPayload = useCallback(
+    (values: RecordingGrowingFormValues) => {
+      return {
+        project_flock_kandang_id: values.project_flock_kandang_id,
+        body_weights: (values.body_weights ?? []).map((bw) => {
+          const qty = Number(bw.qty) || 0;
+          const weight = Number(bw.weight) || 0;
+          const totalWeight = qty * weight;
+          return {
+            avg_weight:
+              typeof bw.avg_weight === 'number'
+                ? bw.avg_weight
+                : parseFloat(String(bw.avg_weight)) || 0,
+            qty: qty,
+            total_weight: parseFloat(String(totalWeight)) || 0,
+          };
+        }),
+        stocks: (values.stocks ?? []).map((stock) => ({
+          product_warehouse_id: stock.product_warehouse_id,
+          qty: Number(stock.qty) || 0,
         })),
-        body_weight: (values.body_weight ?? []).map((b) => ({
-          chicken_weight:
-            typeof b.chicken_weight === 'number'
-              ? b.chicken_weight
-              : parseFloat(String(b.chicken_weight)) || 0,
-          chicken_count:
-            typeof b.chicken_count === 'number'
-              ? b.chicken_count
-              : parseFloat(String(b.chicken_count)) || 0,
-          average_chicken_weight:
-            typeof b.average_chicken_weight === 'number'
-              ? b.average_chicken_weight
-              : parseFloat(String(b.average_chicken_weight)) || 0,
-        })),
-        vaccination: (values.vaccination ?? []).map((v) => ({
-          vaccine_id: v.vaccine_id,
-          total_stock:
-            typeof v.total_stock === 'number'
-              ? v.total_stock
-              : parseFloat(String(v.total_stock)) || 0,
-          used_stock:
-            typeof v.used_stock === 'number'
-              ? v.used_stock
-              : parseFloat(String(v.used_stock)) || 0,
-        })),
-        mortality: (values.mortality ?? []).map((m) => ({
-          condition: m.condition,
-          count:
-            typeof m.count === 'number'
-              ? m.count
-              : parseFloat(String(m.count)) || 0,
+        depletions: (values.depletions ?? []).map((depletion) => ({
+          product_warehouse_id: depletion.product_warehouse_id,
+          qty: Number(depletion.qty) || 0,
         })),
       };
-
-      switch (type) {
-        case 'add':
-          await createRecordingHandler(payload);
-          break;
-        case 'edit':
-          await updateRecordingHandler(initialValues?.id as number, payload);
-          break;
-      }
     },
-  });
+    []
+  );
 
-  // Locations
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue }).toString()}`;
+  const createLayingPayload = useCallback(
+    (values: RecordingLayingFormValues) => {
+      return {
+        project_flock_kandang_id: values.project_flock_kandang_id,
+        body_weights: (values.body_weights ?? []).map((bw) => {
+          return {
+            avg_weight:
+              typeof bw.avg_weight === 'number'
+                ? bw.avg_weight
+                : parseFloat(String(bw.avg_weight)) || 0,
+            qty: Number(bw.qty) || 0,
+          };
+        }),
+        stocks: (values.stocks ?? []).map((stock) => ({
+          product_warehouse_id: stock.product_warehouse_id,
+          qty: Number(stock.qty) || 0,
+        })),
+        depletions: (values.depletions ?? []).map((depletion) => ({
+          product_warehouse_id: depletion.product_warehouse_id,
+          qty: Number(depletion.qty) || 0,
+        })),
+        eggs: (values.eggs ?? []).map((egg) => ({
+          product_warehouse_id: egg.product_warehouse_id,
+          qty: Number(egg.qty) || 0,
+          weight:
+            typeof egg.weight === 'number'
+              ? egg.weight
+              : parseFloat(String(egg.weight)) || 0,
+        })),
+      };
+    },
+    []
+  );
+
+  // ===== FORM HANDLERS =====
+  const createRecordingHandler = useCallback(
+    async (
+      payload: CreateGrowingRecordingPayload | CreateLayingRecordingPayload
+    ) => {
+      const res = await RecordingApi.create(payload);
+      if (isResponseError(res)) {
+        setRecordingFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/production/recording');
+    },
+    [router]
+  );
+
+  const updateRecordingHandler = useCallback(
+    async (
+      recordingId: number,
+      payload: UpdateGrowingRecordingPayload | UpdateLayingRecordingPayload
+    ) => {
+      const res = await RecordingApi.update(recordingId, payload);
+      if (res?.status === 'error') {
+        setRecordingFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/production/recording');
+    },
+    [router]
+  );
+
+  const deleteRecordingClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValues?.id) return;
+
+    setIsDeleteLoading(true);
+    await RecordingApi.delete(initialValues.id);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
+    router.push('/production/recording');
+  }, [deleteModal, initialValues?.id, router]);
+
+  // ===== API DATA FETCHING =====
+  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: locationSearchValue || '',
+    limit: '100',
+  }).toString()}`;
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
     locationsUrl,
     LocationApi.getAllFetcher
   );
 
-  // Project Flocks
-  const projectFlocksUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      search: flockSelectInputValue,
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id, flockSelectInputValue]);
-
-  const { data: projectFlocks, isLoading: isLoadingFlocks } = useSWR(
+  const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
+    search: projectFlockSearchValue || '',
+    limit: '100',
+    ...(selectedLocation
+      ? { location_id: selectedLocation.value.toString() }
+      : {}),
+  }).toString()}`;
+  const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR(
     projectFlocksUrl,
     ProjectFlockApi.getAllFetcher
   );
 
-  // Pakan Products
-  const pakanUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
+  const projectFlockKandangLookupUrl = useMemo(() => {
+    if (!selectedProjectFlock || !selectedKandang) return null;
     const params = new URLSearchParams({
-      flag: 'PAKAN',
-      search: '',
-      location_id: formik.values.location_id.toString(),
+      project_flock_id: selectedProjectFlock.value.toString(),
+      kandang_id: selectedKandang.value.toString(),
     });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
+    return `${ProjectFlockApi.basePath}/kandangs/lookup?${params.toString()}`;
+  }, [selectedProjectFlock, selectedKandang]);
 
-  const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR(
-    pakanUrl,
-    ProductWarehouseApi.getAllFetcher
+  const { data: projectFlockKandangLookupData } = useSWR(
+    projectFlockKandangLookupUrl,
+    projectFlockKandangLookupUrl
+      ? () =>
+          ProjectFlockApi.getAllFetcher(
+            projectFlockKandangLookupUrl
+          ) as Promise<BaseApiResponse<ProjectFlockKandangLookup>>
+      : null
   );
 
-  // OVK Products
-  const ovkUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      flag: 'OVK',
-      search: '',
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
+  const projectFlockKandangLookup =
+    projectFlockKandangLookupData?.status === 'success'
+      ? projectFlockKandangLookupData.data
+      : undefined;
 
-  const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR(
-    ovkUrl,
-    ProductWarehouseApi.getAllFetcher
+  const projectFlockKandangDetailUrl = useMemo(() => {
+    if (type === 'add' || !initialValues?.project_flock_kandang_id) return null;
+    return `${ProjectFlockKandangApi.basePath}/${initialValues.project_flock_kandang_id}`;
+  }, [type, initialValues?.project_flock_kandang_id]);
+
+  const { data: projectFlockKandangDetailData } = useSWR(
+    projectFlockKandangDetailUrl,
+    projectFlockKandangDetailUrl
+      ? () =>
+          ProjectFlockKandangApi.getAllFetcher(
+            projectFlockKandangDetailUrl
+          ) as Promise<BaseApiResponse<ProjectFlockKandang>>
+      : null
   );
 
-  // COMPUTED VALUES
-  const buildWarehouseLabel = useCallback((warehouse: Warehouse) => {
-    const parts: string[] = [warehouse.name];
+  const projectFlockKandangDetail =
+    projectFlockKandangDetailData?.status === 'success'
+      ? projectFlockKandangDetailData.data
+      : undefined;
 
-    if ('kandang' in warehouse && warehouse.kandang) {
-      parts.push(warehouse.kandang.name);
+  const stockProductsUrl = useMemo(() => {
+    if (!selectedLocation || !selectedKandang) return null;
+    const params = new URLSearchParams({
+      flags: 'PAKAN,OVK',
+      search: '',
+      limit: '100',
+      location_id: selectedLocation.value.toString(),
+    });
+
+    if (projectFlockKandangLookup?.kandang?.id) {
+      params.append(
+        'kandang_id',
+        projectFlockKandangLookup.kandang.id.toString()
+      );
+    } else if (selectedKandang) {
+      params.append('kandang_id', selectedKandang.value.toString());
     }
 
-    if ('location' in warehouse && warehouse.location) {
-      parts.push(warehouse.location.name);
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
+
+  const depletionProductsUrl = useMemo(() => {
+    if (!selectedLocation || !selectedKandang) return null;
+    const params = new URLSearchParams({
+      search: '',
+      limit: '100',
+      location_id: selectedLocation.value.toString(),
+    });
+
+    if (projectFlockKandangLookup?.kandang?.id) {
+      params.append(
+        'kandang_id',
+        projectFlockKandangLookup.kandang.id.toString()
+      );
+    } else if (selectedKandang) {
+      params.append('kandang_id', selectedKandang.value.toString());
     }
 
-    if (warehouse.area) {
-      parts.push(warehouse.area.name);
-    }
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
 
-    return parts.join(' - ');
-  }, []);
+  const today = new Date().toISOString().split('T')[0];
+  const existingRecordingsUrl = `${RecordingApi.basePath}`;
 
-  const locationOptions = isResponseSuccess(locations)
-    ? locations.data.map((loc) => ({ value: loc.id, label: loc.name }))
-    : [];
+  const { data: existingRecordings } = useSWR(
+    existingRecordingsUrl,
+    RecordingApi.getAllFetcher
+  );
 
-  const flockOptions = isResponseSuccess(projectFlocks)
-    ? projectFlocks.data.map((flock) => ({
-      value: flock.id,
-      label: flock.flock.name,
-    }))
-    : [];
-
-  const coopOptions = useMemo(() => {
-    if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return [];
-    return selectedProjectFlock.kandangs.map((kandang) => ({
-      value: kandang.id,
-      label: kandang.name,
-    }));
+  const nextDayRecordingUrl = useMemo(() => {
+    if (!selectedProjectFlock) return null;
+    const projectFlockId =
+      typeof selectedProjectFlock.value === 'string'
+        ? parseInt(selectedProjectFlock.value, 10)
+        : selectedProjectFlock.value;
+    return `${RecordingApi.basePath}/next-day?project_flock_id=${projectFlockId}`;
   }, [selectedProjectFlock]);
 
-  const filteredPakanProducts = useMemo(() => {
-    if (!isResponseSuccess(pakanProducts) || !formik.values.location_id)
-      return [];
-
-    return pakanProducts.data.filter((product) => {
-      const warehouse = product.warehouse;
-
-      const hasLocationMatch =
-        'location' in warehouse && warehouse.location
-          ? warehouse.location.id === formik.values.location_id
-          : false;
-
-      const hasPakanFlag = product.product.flags?.includes('PAKAN');
-
-      return hasLocationMatch && hasPakanFlag;
-    });
-  }, [pakanProducts, formik.values.location_id]);
-
-  const pakanOptions = useMemo(
-    () =>
-      filteredPakanProducts.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      })),
-    [filteredPakanProducts, buildWarehouseLabel]
+  const { data: nextDayRecordingData } = useSWR(
+    nextDayRecordingUrl,
+    nextDayRecordingUrl
+      ? () => {
+          const projectFlockId =
+            typeof selectedProjectFlock!.value === 'string'
+              ? parseInt(selectedProjectFlock!.value, 10)
+              : selectedProjectFlock!.value;
+          return RecordingApi.nextDayRecording(projectFlockId);
+        }
+      : null
   );
 
-  const pakanStockMap = useMemo(() => {
-    const map = new Map<number, number | ''>();
-    filteredPakanProducts.forEach((product) => {
-      map.set(product.id, product.quantity);
-    });
-    return map;
-  }, [filteredPakanProducts]);
+  useEffect(() => {
+    if (nextDayRecordingData?.status === 'success') {
+      setNextDayRecording(
+        nextDayRecordingData.data as unknown as NextDayRecording
+      );
+    } else {
+      setNextDayRecording(null);
+    }
+  }, [nextDayRecordingData]);
 
-  const filteredOvkProducts = useMemo(() => {
-    if (!isResponseSuccess(ovkProducts) || !formik.values.location_id)
-      return [];
-
-    return ovkProducts.data.filter((product) => {
-      const warehouse = product.warehouse;
-
-      // Validate location match
-      const hasLocationMatch =
-        'location' in warehouse && warehouse.location
-          ? warehouse.location.id === formik.values.location_id
-          : false;
-
-      // Validate product has OVK flag
-      const hasOvkFlag = product.product.flags?.includes('OVK');
-
-      return hasLocationMatch && hasOvkFlag;
-    });
-  }, [ovkProducts, formik.values.location_id]);
-
-  const ovkOptions = useMemo(
-    () =>
-      filteredOvkProducts.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      })),
-    [filteredOvkProducts, buildWarehouseLabel]
+  const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
+    stockProductsUrl,
+    ProductWarehouseApi.getAllFetcher
   );
 
-  const ovkStockMap = useMemo(() => {
-    const map = new Map<number, number | ''>();
-    filteredOvkProducts.forEach((product) => {
-      map.set(product.id, product.quantity);
+  const { data: depletionProductsData, isLoading: isLoadingDepletionProducts } =
+    useSWR(depletionProductsUrl, ProductWarehouseApi.getAllFetcher);
+
+  const eggProductsUrl = useMemo(() => {
+    if (!selectedLocation || !selectedKandang) return null;
+    const params = new URLSearchParams({
+      search: 'telur',
+      limit: '100',
+      location_id: selectedLocation.value.toString(),
     });
-    return map;
-  }, [filteredOvkProducts]);
 
-  // EFFECTS
-  useEffect(() => {
-    if (initialValues?.flock && isResponseSuccess(projectFlocks)) {
-      const flock = projectFlocks.data.find(
-        (f) => f.id === initialValues.flock.id
+    if (projectFlockKandangLookup?.kandang?.id) {
+      params.append(
+        'kandang_id',
+        projectFlockKandangLookup.kandang.id.toString()
       );
-      if (flock) {
-        setSelectedProjectFlock(flock);
+    } else if (selectedKandang) {
+      params.append('kandang_id', selectedKandang.value.toString());
+    }
+
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
+
+  const { data: eggProductsData, isLoading: isLoadingEggProducts } = useSWR(
+    eggProductsUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  const approvedProjectFlockKandangsUrl = useMemo(() => {
+    const params = new URLSearchParams({
+      step_name: 'Disetujui',
+      limit: '100',
+    });
+    return `${ProjectFlockKandangApi.basePath}?${params.toString()}`;
+  }, []);
+
+  const { data: approvedProjectFlockKandangsData } = useSWR(
+    approvedProjectFlockKandangsUrl,
+    ProjectFlockKandangApi.getAllFetcher
+  );
+
+  const approvedProjectFlockKandangs = useMemo(() => {
+    if (!isResponseSuccess(approvedProjectFlockKandangsData)) return [];
+    return approvedProjectFlockKandangsData.data;
+  }, [approvedProjectFlockKandangsData]);
+
+  const isLayingCategory =
+    initialValues?.project_flock_category === 'LAYING' ||
+    projectFlockKandangLookup?.project_flock?.category === 'LAYING' ||
+    projectFlockKandangDetail?.project_flock?.category === 'LAYING';
+
+  const isGrowingCategory =
+    initialValues?.project_flock_category === 'GROWING' ||
+    projectFlockKandangLookup?.project_flock?.category === 'GROWING' ||
+    projectFlockKandangDetail?.project_flock?.category === 'GROWING';
+
+  const recordingApprovalLines = useMemo(() => {
+    if (isLayingCategory) {
+      return LAYING_RECORDING_APPROVAL_LINE;
+    }
+    if (isGrowingCategory) {
+      return GROWING_RECORDING_APPROVAL_LINE;
+    }
+    return GROWING_RECORDING_APPROVAL_LINE;
+  }, [isLayingCategory, isGrowingCategory]);
+
+  // ===== APPROVAL DATA FETCHING USING HOOK =====
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: recordingApprovalLines,
+    moduleName: 'RECORDINGS',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
+
+  // ===== DATA PROCESSING =====
+  const locationOptions = useMemo(() => {
+    let options: OptionType[] = [];
+
+    if (isResponseSuccess(locations)) {
+      const locationOptionsList =
+        locations?.data.map((location) => ({
+          value: location.id,
+          label: location.name || '',
+        })) || [];
+      options = options.concat(locationOptionsList);
+    }
+
+    if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
+      const currentLocation = projectFlockKandangDetail.project_flock.location;
+      if (
+        currentLocation &&
+        !options.find((opt) => opt.value === currentLocation.id)
+      ) {
+        options.push({
+          value: currentLocation.id,
+          label: currentLocation.name || '',
+        });
       }
     }
-  }, [initialValues, projectFlocks]);
 
-  // Auto-calculate average weight when chicken weight or count changes
-  useEffect(() => {
-    if (formik.values.body_weight) {
-      const updatedBodyWeight = formik.values.body_weight.map((weight) => ({
-        ...weight,
-        average_chicken_weight:
-          weight.chicken_count > 0
-            ? Math.round(weight.chicken_weight / weight.chicken_count)
-            : 0,
-      }));
+    return options;
+  }, [locations, projectFlockKandangDetail, type]);
 
-      // Only update if values are different to avoid infinite loops
-      const hasChanges = updatedBodyWeight.some(
-        (updated, idx) =>
-          updated.average_chicken_weight !==
-          formik.values.body_weight[idx]?.average_chicken_weight
-      );
+  const projectFlockOptions = useMemo(() => {
+    let options: OptionType[] = [];
 
-      if (hasChanges) {
-        formik.setFieldValue('body_weight', updatedBodyWeight);
+    if (isResponseSuccess(projectFlocks)) {
+      const flockOptions =
+        projectFlocks?.data.map((projectFlock) => ({
+          value: projectFlock.id,
+          label: projectFlock.flock_name || '',
+        })) || [];
+      options = options.concat(flockOptions);
+    }
+
+    if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
+      const currentProjectFlock = projectFlockKandangDetail.project_flock;
+      if (
+        currentProjectFlock &&
+        !options.find((opt) => opt.value === currentProjectFlock.id)
+      ) {
+        options.push({
+          value: currentProjectFlock.id,
+          label: currentProjectFlock.flock_name || '',
+        });
       }
     }
+
+    return options;
+  }, [projectFlocks, projectFlockKandangDetail, type]);
+
+  const kandangOptions = useMemo(() => {
+    let options: OptionType[] = [];
+
+    if (selectedProjectFlock && isResponseSuccess(projectFlocks)) {
+      const selectedProjectFlockData = projectFlocks.data.find(
+        (pf) => pf.id === selectedProjectFlock.value
+      );
+
+      if (selectedProjectFlockData?.kandangs) {
+        const approvedKandangIds = approvedProjectFlockKandangs
+          .filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
+          .map((pfk) => pfk.kandang_id);
+
+        const kandangOptions = selectedProjectFlockData.kandangs
+          .filter((kandang: Kandang) => {
+            if (type === 'add') {
+              return approvedKandangIds.includes(kandang.id);
+            }
+            return true;
+          })
+          .map((kandang: Kandang) => ({
+            value: kandang.id,
+            label: kandang.name || '',
+          }));
+        options = options.concat(kandangOptions);
+      }
+    }
+
+    if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
+      const currentKandang = projectFlockKandangDetail.kandang;
+      if (
+        currentKandang &&
+        !options.find((opt) => opt.value === currentKandang.id)
+      ) {
+        options.push({
+          value: currentKandang.id,
+          label: currentKandang.name || '',
+        });
+      }
+    }
+
+    return options;
   }, [
-    formik.values.body_weight?.map((w) => w.chicken_weight),
-    formik.values.body_weight?.map((w) => w.chicken_count),
+    selectedProjectFlock,
+    projectFlocks,
+    projectFlockKandangDetail,
+    type,
+    approvedProjectFlockKandangs,
   ]);
 
-  // EVENT HANDLERS - Select Inputs
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const locationValue = (val as OptionType)?.value;
+  const recordedProjectFlockKandangIds = useMemo(() => {
+    if (!isResponseSuccess(existingRecordings)) return new Set<number>();
 
-    formik.setFieldValue('location', val, false);
-    formik.setFieldValue('location_id', locationValue || 0, false);
+    const todayRecordings = existingRecordings.data;
+    const recordedIds = new Set<number>();
 
-    formik.setFieldValue('flock', null, false);
-    formik.setFieldValue('flock_id', 0, false);
-    formik.setFieldValue('coop', null, false);
-    formik.setFieldValue('coop_id', 0, false);
-    setSelectedProjectFlock(null);
-    setFlockSelectInputValue('');
-  };
+    todayRecordings.forEach((recording) => {
+      const recordingDate = recording.record_datetime?.split('T')[0];
+      if (recordingDate === today) {
+        recordedIds.add(recording.project_flock_kandang_id);
+      }
+    });
 
-  const flockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const flockValue = (val as OptionType)?.value;
+    return recordedIds;
+  }, [existingRecordings, today]);
 
-    const selected = isResponseSuccess(projectFlocks)
-      ? projectFlocks.data.find((flock) => flock.id === flockValue)
-      : null;
+  const getLatestTotalChickQty = useCallback(
+    (projectFlockKandangId: number) => {
+      if (!isResponseSuccess(existingRecordings)) return null;
 
-    setSelectedProjectFlock(selected || null);
+      const projectFlockRecordings = existingRecordings.data.filter(
+        (recording) =>
+          recording.project_flock_kandang_id === projectFlockKandangId
+      );
 
-    formik.setFieldValue('flock', val, false);
-    formik.setFieldValue('flock_id', flockValue || 0, false);
+      if (projectFlockRecordings.length === 0) return null;
 
-    formik.setFieldValue('coop', null, false);
-    formik.setFieldValue('coop_id', 0, false);
-  };
+      projectFlockRecordings.sort(
+        (a, b) =>
+          new Date(b.record_datetime).getTime() -
+          new Date(a.record_datetime).getTime()
+      );
 
-  const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const coopValue = (val as OptionType)?.value;
+      return projectFlockRecordings[0].total_chick_qty;
+    },
+    [existingRecordings]
+  );
 
-    formik.setFieldValue('coop', val, false);
-    formik.setFieldValue('coop_id', coopValue || 0, false);
-  };
+  const unifiedStockProducts = useMemo(() => {
+    const options: OptionType[] = [];
+    if (isResponseSuccess(stockProducts) && selectedKandang) {
+      stockProducts.data.forEach((product) => {
+        const hasPakanFlag = product.product.flags?.includes('PAKAN');
+        const hasOvkFlag = product.product.flags?.includes('OVK');
 
-  // EVENT HANDLERS - Feed Data
-  const addFeedData = () => {
-    const newFeedData = [
-      ...(formik.values.feed_data || []),
-      {
-        feed: null,
-        feed_id: '',
-        feed_qty: '',
-        feed_stock: 0,
-      },
-    ];
-    formik.setFieldValue('feed_data', newFeedData);
-  };
+        if (hasPakanFlag || hasOvkFlag) {
+          options.push({
+            value: product.id,
+            label: product.product.name,
+          });
+        }
+      });
+    }
 
-  const removeFeedData = (idx: number) => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-  };
-
-  const removeSelectedFeedData = () => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, idx) => !selectedFeed.includes(idx)
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-    setSelectedFeed([]);
-  };
-
-  // EVENT HANDLERS - Body Weight
-  const addBodyWeight = () => {
-    const newBodyWeight = [
-      ...(formik.values.body_weight || []),
-      {
-        chicken_weight: 0,
-        chicken_count: 0,
-        average_chicken_weight: 0,
-      },
-    ];
-    formik.setFieldValue('body_weight', newBodyWeight);
-  };
-
-  // Handle calculation when chicken_weight changes
-  const handleChickenWeightChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.chicken_weight`, value);
-
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenCount = currentWeight.chicken_count;
-        if (chickenCount > 0 && value > 0) {
-          const averageWeight = Math.round(value / chickenCount);
-          formik.setFieldValue(
-            `body_weight.${idx}.average_chicken_weight`,
-            averageWeight
+    if (
+      initialValues &&
+      'stocks' in initialValues &&
+      initialValues.stocks &&
+      type !== 'add'
+    ) {
+      initialValues.stocks?.forEach((stock) => {
+        if (stock.product_warehouse && stock.product_warehouse.product) {
+          const existingOption = options.find(
+            (opt) => opt.value === stock.product_warehouse_id
           );
-        } else {
-          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
+          if (!existingOption) {
+            options.push({
+              value: stock.product_warehouse_id,
+              label: stock.product_warehouse.product.name,
+            });
+          }
+        }
+      });
+    }
+
+    return options;
+  }, [stockProducts, initialValues, type, selectedKandang]);
+
+  const depletionProducts = useMemo(() => {
+    const options: OptionType[] = [];
+    if (isResponseSuccess(depletionProductsData) && selectedKandang) {
+      depletionProductsData.data.forEach((product) => {
+        const productName = product.product.name;
+
+        if (
+          productName.toLowerCase().includes('culling') ||
+          productName.toLowerCase().includes('mati') ||
+          productName.toLowerCase().includes('afkir')
+        ) {
+          options.push({
+            value: product.id,
+            label: product.product.name,
+          });
+        }
+      });
+    }
+
+    if (initialValues && initialValues.depletions && type !== 'add') {
+      initialValues.depletions.forEach((depletion) => {
+        if (
+          depletion.product_warehouse &&
+          depletion.product_warehouse.product
+        ) {
+          const existingOption = options.find(
+            (opt) => opt.value === depletion.product_warehouse_id
+          );
+          if (!existingOption) {
+            options.push({
+              value: depletion.product_warehouse_id,
+              label: depletion.product_warehouse.product.name,
+            });
+          }
+        }
+      });
+    }
+
+    return options;
+  }, [depletionProductsData, initialValues, type, selectedKandang]);
+
+  const eggProducts = useMemo(() => {
+    const options: OptionType[] = [];
+    if (isResponseSuccess(eggProductsData) && selectedKandang) {
+      eggProductsData.data.forEach((product) => {
+        const productName = product.product.name;
+
+        if (
+          productName.toLowerCase().includes('telur') ||
+          productName.toLowerCase().includes('egg') ||
+          productName.toLowerCase().includes('pecah') ||
+          productName.toLowerCase().includes('konsumsi') ||
+          productName.toLowerCase().includes('baik')
+        ) {
+          options.push({
+            value: product.id,
+            label: product.product.name,
+          });
+        }
+      });
+    }
+
+    if (initialValues && initialValues.eggs && type !== 'add') {
+      initialValues.eggs.forEach((egg) => {
+        if (egg.product_warehouse && egg.product_warehouse.product) {
+          const existingOption = options.find(
+            (opt) => opt.value === egg.product_warehouse_id
+          );
+          if (!existingOption) {
+            options.push({
+              value: egg.product_warehouse_id,
+              label: egg.product_warehouse.product.name,
+            });
+          }
+        }
+      });
+    }
+
+    return options;
+  }, [eggProductsData, initialValues, type, selectedKandang]);
+
+  // ===== FORMIK SETUP =====
+  const formikInitialValues = useMemo(() => {
+    let baseValues;
+    if (isLayingCategory) {
+      baseValues = getRecordingLayingFormInitialValues(
+        initialValues
+      ) as RecordingLayingFormValues;
+    } else {
+      baseValues = getRecordingGrowingFormInitialValues(initialValues);
+    }
+
+    if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
+      baseValues.project_flock_kandang = {
+        value: projectFlockKandangDetail.project_flock.id,
+        label: projectFlockKandangDetail.project_flock.flock_name || '',
+      };
+    }
+
+    return baseValues;
+  }, [initialValues, isLayingCategory, projectFlockKandangDetail, type]);
+
+  const formik = useFormik<
+    RecordingGrowingFormValues | RecordingLayingFormValues
+  >({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    validationSchema: (() => {
+      if (isLayingCategory) {
+        return type === 'edit'
+          ? UpdateRecordingLayingFormSchema
+          : RecordingLayingFormSchema;
+      }
+      return type === 'edit'
+        ? UpdateRecordingGrowingFormSchema
+        : RecordingGrowingFormSchema;
+    })(),
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      if (isLayingCategory) {
+        const layingValues = values as RecordingLayingFormValues;
+        const layingPayload = createLayingPayload(layingValues);
+
+        switch (type) {
+          case 'add':
+            await createRecordingHandler(
+              layingPayload as CreateLayingRecordingPayload
+            );
+            break;
+          case 'edit':
+            await updateRecordingHandler(
+              initialValues?.id as number,
+              layingPayload as UpdateLayingRecordingPayload
+            );
+            break;
+        }
+      } else {
+        const growingValues = values as RecordingGrowingFormValues;
+        const growingPayload = createGrowingPayload(growingValues);
+
+        switch (type) {
+          case 'add':
+            await createRecordingHandler(
+              growingPayload as CreateGrowingRecordingPayload
+            );
+            break;
+          case 'edit':
+            await updateRecordingHandler(
+              initialValues?.id as number,
+              growingPayload as UpdateGrowingRecordingPayload
+            );
+            break;
         }
       }
     },
-    [formik]
-  );
+  });
 
-  // Handle calculation when chicken_count changes
-  const handleChickenCountChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.chicken_count`, value);
+  // ===== HELPER FUNCTIONS =====
+  const getTotalChickQtyError = useCallback(
+    (qty: number) => {
+      if (type === 'detail') return null;
+      if (!formik.values.project_flock_kandang_id) return null;
 
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenWeight = currentWeight.chicken_weight;
-        if (chickenWeight > 0 && value > 0) {
-          const averageWeight = Math.round(chickenWeight / value);
-          formik.setFieldValue(
-            `body_weight.${idx}.average_chicken_weight`,
-            averageWeight
-          );
-        } else {
-          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
-        }
+      const totalChickQty = getLatestTotalChickQty(
+        formik.values.project_flock_kandang_id
+      );
+      if (!totalChickQty) return null;
+
+      if (qty > totalChickQty) {
+        return `Jumlah ayam tidak boleh melebihi total ayam tersedia! Maksimal: ${formatNumber(totalChickQty)}`;
       }
+
+      return null;
     },
-    [formik]
+    [formik.values.project_flock_kandang_id, getLatestTotalChickQty, type]
   );
 
-  // Handle calculation when average_weight changes
-  const handleAverageWeightChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, value);
+  useCallback((): OptionType | null => {
+    if (
+      !formik.values.project_flock_kandang ||
+      !isResponseSuccess(projectFlocks)
+    ) {
+      return selectedLocation;
+    }
+    const projectFlockId = formik.values.project_flock_kandang.value;
+    const projectFlock = projectFlocks.data.find(
+      (pf) => pf.id === projectFlockId
+    );
+    if (projectFlock && projectFlock.location) {
+      return {
+        value: projectFlock.location.id,
+        label: projectFlock.location.name,
+      };
+    }
+    return selectedLocation;
+  }, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);
 
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenCount = currentWeight.chicken_count;
-        if (chickenCount > 0 && value > 0) {
-          const totalWeight = value * chickenCount;
-          formik.setFieldValue(
-            `body_weight.${idx}.chicken_weight`,
-            totalWeight
-          );
-        } else if (value === 0) {
-          formik.setFieldValue(`body_weight.${idx}.chicken_weight`, '');
-        }
+  const getAvailableStock = useCallback(
+    (productWarehouseId: number) => {
+      if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0;
+      if (!isResponseSuccess(stockProducts)) return 0;
+      const productWarehouse = stockProducts.data.find(
+        (pw) => pw.id === productWarehouseId
+      );
+      return productWarehouse?.quantity ?? 0;
+    },
+    [stockProducts, type]
+  );
+
+  const getStockUsageError = useCallback(
+    (stockIdx: number) => {
+      if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
+      const stock = formik.values.stocks?.[stockIdx];
+      if (!stock || !stock.product_warehouse_id) return null;
+      const availableStock = getAvailableStock(stock.product_warehouse_id);
+      const requestedUsage = Number(stock.qty) || 0;
+      if (requestedUsage > availableStock) {
+        return `Jumlah pakai melebihi stok tersedia! Maksimal: ${formatNumber(availableStock)}`;
       }
+      return null;
     },
-    [formik]
+    [formik.values.stocks, getAvailableStock, type]
   );
 
-  // Create wrapper handlers that match NumberInput's onChange signature
-  const handleChickenWeightChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
-      handleChickenWeightChange(idx, value);
+  const getStockUsageAdornment = useCallback(
+    (stockIdx: number) => {
+      if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
+      const stock = formik.values.stocks?.[stockIdx];
+      if (!stock || !stock.product_warehouse_id) return null;
+      const availableStock = getAvailableStock(stock.product_warehouse_id);
+      const requestedUsage = Number(stock.qty) || 0;
+      const remainingStock = availableStock - requestedUsage;
+      if (requestedUsage > 0) {
+        return (
+          <span className='text-sm text-gray-600 whitespace-nowrap'>
+            (sisa: {formatNumber(remainingStock)})
+          </span>
+        );
+      }
+      return (
+        <span className='text-sm text-gray-600 whitespace-nowrap'>
+          (tersedia: {formatNumber(availableStock)})
+        </span>
+      );
     },
-    [handleChickenWeightChange]
+    [formik.values.stocks, getAvailableStock, type]
   );
 
-  const handleChickenCountChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
-      handleChickenCountChange(idx, value);
-    },
-    [handleChickenCountChange]
-  );
+  const getProjectFlockBadgeAdornment = useCallback(() => {
+    if (!projectFlockKandangLookup) return null;
 
-  const handleAverageWeightChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
-      handleAverageWeightChange(idx, value);
-    },
-    [handleAverageWeightChange]
-  );
-
-  const handleVaccinationStockChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
-      formik.setFieldValue(`vaccination.${idx}.used_stock`, value);
-    },
-    [formik]
-  );
-
-  const handleMortalityCountChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
-      formik.setFieldValue(`mortality.${idx}.count`, value);
-    },
-    [formik]
-  );
-
-  const removeBodyWeight = (idx: number) => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
-      (_, i) => i !== idx
+    const isAlreadyRecorded = recordedProjectFlockKandangIds.has(
+      projectFlockKandangLookup.project_flock_kandang_id
     );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
-  };
+    let color: 'neutral' | 'success' | 'warning' | 'error';
 
-  const removeSelectedBodyWeight = () => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
-      (_, idx) => !selectedWeight.includes(idx)
+    if (isAlreadyRecorded) {
+      color = 'warning';
+    } else {
+      color = 'success';
+    }
+
+    return (
+      <Badge
+        variant='soft'
+        color={color}
+        size='sm'
+        className={{
+          badge: 'whitespace-nowrap font-semibold text-xs px-2',
+        }}
+      >
+        Periode {projectFlockKandangLookup.project_flock?.period}
+      </Badge>
     );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
-    setSelectedWeight([]);
-  };
+  }, [recordedProjectFlockKandangIds, projectFlockKandangLookup]);
 
-  // EVENT HANDLERS - Vaccination
-  const addVaccination = () => {
-    const newVaccination = [
-      ...(formik.values.vaccination || []),
-      {
-        vaccine: null,
-        vaccine_id: '',
-        total_stock: '',
-        used_stock: 0,
-      },
-    ];
-    formik.setFieldValue('vaccination', newVaccination);
-  };
+  const getProductFlagBadgeAdornment = useCallback(
+    (productWarehouseId: number) => {
+      if (!isResponseSuccess(stockProducts)) return null;
 
-  const removeVaccination = (idx: number) => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('vaccination', updatedVaccination);
-  };
+      const productWarehouse = stockProducts.data.find(
+        (pw) => pw.id === productWarehouseId
+      );
+      if (!productWarehouse) return null;
 
-  const removeSelectedVaccination = () => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, idx) => !selectedVaccine.includes(idx)
-    );
-    formik.setFieldValue('vaccination', updatedVaccination);
-    setSelectedVaccine([]);
-  };
+      const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
+      const hasOvkFlag = productWarehouse.product.flags?.includes('OVK');
 
-  // EVENT HANDLERS - Mortality
-  const addMortality = () => {
-    const newMortality = [
-      ...(formik.values.mortality || []),
-      {
-        condition: RECORDING_FLAG_OPTIONS[0].value,
-        count: 0,
-      },
-    ];
-    formik.setFieldValue('mortality', newMortality);
-  };
+      if (hasPakanFlag) {
+        return (
+          <Badge
+            variant='soft'
+            color='info'
+            size='sm'
+            className={{
+              badge: 'whitespace-nowrap font-semibold text-xs px-2',
+            }}
+          >
+            PAKAN
+          </Badge>
+        );
+      }
 
-  const removeMortality = (idx: number) => {
-    const updatedMortality = formik.values.mortality?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('mortality', updatedMortality);
-  };
+      if (hasOvkFlag) {
+        return (
+          <Badge
+            variant='soft'
+            color='secondary'
+            size='sm'
+            className={{
+              badge: 'whitespace-nowrap font-semibold text-xs px-2',
+            }}
+          >
+            OVK
+          </Badge>
+        );
+      }
 
-  const removeSelectedMortality = () => {
-    const updatedMortality = formik.values.mortality?.filter(
-      (_, idx) => !selectedMortality.includes(idx)
-    );
-    formik.setFieldValue('mortality', updatedMortality);
-    setSelectedMortality([]);
-  };
-
-  const handleFeedStockChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
-      formik.setFieldValue(`feed_data.${idx}.feed_stock`, value);
+      return null;
     },
-    [formik]
+    [stockProducts]
   );
 
-  // HELPER FUNCTIONS
-  const isRepeaterInputError = <
-    T extends 'feed_data' | 'body_weight' | 'vaccination' | 'mortality',
-  >(
-    arrayName: T,
-    column: T extends 'feed_data'
-      ? keyof RecordingFormValues['feed_data'][0]
-      : T extends 'body_weight'
-        ? keyof RecordingFormValues['body_weight'][0]
-        : T extends 'vaccination'
-          ? keyof RecordingFormValues['vaccination'][0]
-          : T extends 'mortality'
-            ? keyof RecordingFormValues['mortality'][0]
-            : never,
+  const hasExceededStock = useMemo(() => {
+    if ((type as 'add' | 'edit' | 'detail') === 'detail') return false;
+    return (
+      formik.values.stocks?.some((stock, idx) => {
+        return getStockUsageError(idx) !== null;
+      }) ?? false
+    );
+  }, [formik.values.stocks, getStockUsageError, type]);
+
+  const isRepeaterInputError = (
+    arrayName: 'body_weights' | 'stocks' | 'depletions' | 'eggs',
+    column: string,
     idx: number
   ) => {
-    if (
-      !formik.touched[arrayName] ||
-      !Array.isArray(formik.touched[arrayName])
-    ) {
+    const touched = formik.touched as Record<string, unknown>;
+    const errors = formik.errors as Record<string, unknown>;
+
+    if (!touched[arrayName] || !Array.isArray(touched[arrayName])) {
       return {
         isError: false,
         errorMessage: '',
       };
     }
 
-    const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
-    const errorField = formik.errors[arrayName]?.[idx] as Record<
+    const touchedField = (touched[arrayName] as unknown[])?.[idx] as Record<
       string,
-      string
+      unknown
+    >;
+    const errorField = (errors[arrayName] as unknown[])?.[idx] as Record<
+      string,
+      unknown
     >;
 
     return {
-      isError: touchedField && Boolean(errorField?.[column as string]),
+      isError: touchedField && Boolean(errorField?.[column]),
       errorMessage:
-        touchedField && errorField?.[column as string]
-          ? errorField[column as string]
+        touchedField && errorField?.[column]
+          ? (errorField[column] as string)
           : '',
     };
   };
 
+  // ===== EVENT HANDLERS =====
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    setSelectedProjectFlock(null);
+    setSelectedKandang(null);
+    formik.setFieldValue('project_flock_kandang', null);
+    formik.setFieldValue('project_flock_kandang_id', 0);
+  };
+
+  const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedProjectFlock(val as OptionType);
+    setSelectedKandang(null);
+    formik.setFieldValue('project_flock_kandang', null);
+    formik.setFieldValue('project_flock_kandang_id', 0);
+  };
+
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedKandang(val as OptionType);
+    formik.setFieldTouched('project_flock_kandang', true);
+    formik.setFieldTouched('project_flock_kandang_id', true);
+  };
+
+  useEffect(() => {
+    if (projectFlockKandangLookup?.project_flock_kandang_id) {
+      const projectFlockKandangId =
+        projectFlockKandangLookup.project_flock_kandang_id;
+
+      if (type === 'add') {
+        if (recordedProjectFlockKandangIds.has(projectFlockKandangId)) {
+          toast.error('Project Flock Kandang ini sudah direcord hari ini!');
+          return;
+        }
+
+        if (
+          nextDayRecording &&
+          nextDayRecording.project_flock_kandang_id === projectFlockKandangId
+        ) {
+          const hasSameDayRecording = isResponseSuccess(existingRecordings)
+            ? existingRecordings.data?.some(
+                (recording: Recording) =>
+                  recording.project_flock_kandang_id ===
+                    projectFlockKandangId &&
+                  recording.day === nextDayRecording.next_day
+              )
+            : false;
+
+          if (hasSameDayRecording) {
+            toast.error(
+              `Recording untuk hari ${nextDayRecording.next_day} sudah ada.
+              Tidak bisa membuat recording duplikat, mohon perbarui recording yang sudah ada terlebih dahulu.`
+            );
+            return;
+          }
+        }
+      }
+
+      if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
+        formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
+
+        formik.setFieldValue('project_flock_kandang', {
+          value: projectFlockKandangId,
+          label: projectFlockKandangLookup
+            ? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
+            : `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
+        });
+      }
+    }
+  }, [
+    projectFlockKandangLookup,
+    selectedProjectFlock,
+    selectedKandang,
+    type,
+    recordedProjectFlockKandangIds,
+    formik.values.project_flock_kandang_id,
+    nextDayRecording,
+    existingRecordings,
+    today,
+  ]);
+
+  useEffect(() => {
+    if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
+      const location = projectFlockKandangDetail.project_flock.location;
+      const projectFlock = projectFlockKandangDetail.project_flock;
+      const kandang = projectFlockKandangDetail.kandang;
+
+      if (location) {
+        const locationOption = {
+          value: location.id,
+          label: location.name || '',
+        };
+        setSelectedLocation(locationOption);
+
+        if (projectFlock) {
+          const projectFlockOption = {
+            value: projectFlock.id,
+            label: projectFlock.flock_name || '',
+          };
+          setSelectedProjectFlock(projectFlockOption);
+
+          if (kandang) {
+            const kandangOption = {
+              value: kandang.id,
+              label: kandang.name || '',
+            };
+            setSelectedKandang(kandangOption);
+
+            if (
+              formik.values.project_flock_kandang_id !==
+              projectFlockKandangDetail.id
+            ) {
+              formik.setFieldValue(
+                'project_flock_kandang_id',
+                projectFlockKandangDetail.id
+              );
+              formik.setFieldValue('project_flock_kandang', {
+                value: projectFlockKandangDetail.id,
+                label: `${projectFlock.flock_name} - ${kandang.name}`,
+              });
+            }
+          }
+        }
+      }
+    }
+  }, [
+    projectFlockKandangDetail,
+    type,
+    projectFlockOptions,
+    formik.values.project_flock_kandang_id,
+  ]);
+
+  const approveHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await RecordingApi.approve(
+      initialValues?.id as number,
+      notes
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      toast.success('Recording berhasil disetujui!');
+      approveModal.closeModal();
+      setApprovalNotes('');
+      await refreshApprovals();
+      router.push('/production/recording');
+    } else {
+      toast.error(
+        (approveResponse?.message as string) || 'Gagal menyetujui recording'
+      );
+      approveModal.closeModal();
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const rejectHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await RecordingApi.reject(
+      initialValues?.id as number,
+      notes
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      toast.success('Recording berhasil ditolak!');
+      rejectModal.closeModal();
+      setApprovalNotes('');
+      await refreshApprovals();
+      router.push('/production/recording');
+    } else {
+      toast.error(
+        (rejectResponse?.message as string) || 'Gagal menolak recording'
+      );
+      rejectModal.closeModal();
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const addBodyWeight = () => {
+    const newBodyWeights = [
+      ...(formik.values.body_weights || []),
+      {
+        weight: '',
+        avg_weight: '',
+        qty: '',
+      },
+    ];
+    formik.setFieldValue('body_weights', newBodyWeights);
+  };
+
+  const handleWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.weight`, value);
+
+    setManuallyEditedRows((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = Number(currentWeight.qty) || 0;
+      const totalWeight = qty * value;
+
+      if (qty > 0 && value > 0) {
+        const avgWeight = parseFloat((value / qty).toFixed(2));
+        formik.setFieldValue(`body_weights.${idx}.avg_weight`, avgWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.avg_weight`, '');
+      }
+
+      formik.setFieldValue(`body_weights.${idx}.total_weight`, totalWeight);
+    }
+  };
+
+  const handleAvgWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.avg_weight`, value);
+
+    setManuallyEditedRows((prev) => {
+      const newSet = new Set(prev);
+      newSet.add(idx);
+      return newSet;
+    });
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = Number(currentWeight.qty) || 0;
+      if (qty > 0 && value > 0) {
+        const totalWeight = value * qty;
+        formik.setFieldValue(`body_weights.${idx}.weight`, totalWeight);
+        formik.setFieldValue(`body_weights.${idx}.total_weight`, totalWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.weight`, 0);
+        formik.setFieldValue(`body_weights.${idx}.total_weight`, 0);
+      }
+    }
+  };
+
+  const handleQtyChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.qty`, value);
+
+    setManuallyEditedRows((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const weight = Number(currentWeight.weight) || 0;
+      const totalWeight = value * weight;
+
+      if (value > 0 && weight > 0) {
+        const avgWeight = parseFloat((weight / value).toFixed(2));
+        formik.setFieldValue(`body_weights.${idx}.avg_weight`, avgWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.avg_weight`, '');
+      }
+
+      formik.setFieldValue(`body_weights.${idx}.total_weight`, totalWeight);
+    }
+  };
+
+  const handleWeightChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleWeightChange(idx, value);
+    };
+
+  const handleAvgWeightChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleAvgWeightChange(idx, value);
+    };
+
+  const handleQtyChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleQtyChange(idx, value);
+    };
+
+  const removeBodyWeight = (idx: number) => {
+    const updatedBodyWeights = formik.values.body_weights?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('body_weights', updatedBodyWeights);
+  };
+
+  const removeSelectedBodyWeights = () => {
+    const updatedBodyWeights = formik.values.body_weights?.filter(
+      (_, idx) => !selectedBodyWeights.includes(idx)
+    );
+    formik.setFieldValue('body_weights', updatedBodyWeights);
+    setSelectedBodyWeights([]);
+  };
+
+  const addStock = () => {
+    const newStocks = [
+      ...(formik.values.stocks || []),
+      {
+        product_warehouse_id: 0,
+        qty: '',
+      },
+    ];
+    formik.setFieldValue('stocks', newStocks);
+  };
+
+  const handleStockUsageQtyChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      formik.setFieldValue(`stocks.${idx}.qty`, value);
+    },
+    [formik]
+  );
+
+  const removeStock = (idx: number) => {
+    const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
+    formik.setFieldValue('stocks', updatedStocks);
+  };
+
+  const removeSelectedStocks = () => {
+    const updatedStocks = formik.values.stocks?.filter(
+      (_, idx) => !selectedStocks.includes(idx)
+    );
+    formik.setFieldValue('stocks', updatedStocks);
+    setSelectedStocks([]);
+  };
+
+  const addDepletion = () => {
+    const newDepletions = [
+      ...(formik.values.depletions || []),
+      {
+        product_warehouse_id: 0,
+        qty: '',
+      },
+    ];
+    formik.setFieldValue('depletions', newDepletions);
+  };
+
+  const handleDepletionQtyChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      formik.setFieldValue(`depletions.${idx}.qty`, value);
+    },
+    [formik]
+  );
+
+  const removeDepletion = (idx: number) => {
+    const updatedDepletions = formik.values.depletions?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('depletions', updatedDepletions);
+  };
+
+  const removeSelectedDepletions = () => {
+    const updatedDepletions = formik.values.depletions?.filter(
+      (_, idx) => !selectedDepletions.includes(idx)
+    );
+    formik.setFieldValue('depletions', updatedDepletions);
+    setSelectedDepletions([]);
+  };
+
+  const addEgg = () => {
+    const newEggs = [
+      ...((formik.values as RecordingLayingFormValues).eggs || []),
+      {
+        product_warehouse_id: 0,
+        qty: '',
+      },
+    ];
+    formik.setFieldValue('eggs', newEggs);
+  };
+
+  const handleEggQtyChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      formik.setFieldValue(`eggs.${idx}.qty`, value);
+    },
+    [formik]
+  );
+
+  const handleEggWeightChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      formik.setFieldValue(`eggs.${idx}.weight`, value);
+    },
+    [formik]
+  );
+
+  const removeEgg = (idx: number) => {
+    const updatedEggs = (
+      formik.values as RecordingLayingFormValues
+    ).eggs?.filter((_, i) => i !== idx);
+    formik.setFieldValue('eggs', updatedEggs);
+  };
+
+  const removeSelectedEggs = () => {
+    const updatedEggs = (
+      formik.values as RecordingLayingFormValues
+    ).eggs?.filter((_, idx) => !selectedEggs.includes(idx));
+    formik.setFieldValue('eggs', updatedEggs);
+    setSelectedEggs([]);
+  };
+
+  // ===== EFFECTS =====
+  useEffect(() => {
+    if (isLayingCategory && (type as 'add' | 'edit' | 'detail') !== 'detail') {
+      const layingValues = formik.values as RecordingLayingFormValues;
+      if (!layingValues.eggs || layingValues.eggs.length === 0) {
+        formik.setFieldValue('eggs', [{ product_warehouse_id: 0, qty: '' }]);
+      }
+    }
+  }, [isLayingCategory, type]);
+
+  useEffect(() => {
+    if (type !== 'add') {
+      setNewRecordingData(null);
+    }
+  }, [isLayingCategory, type]);
+
+  const bodyWeightValues = useMemo(() => {
+    if (!formik.values.body_weights) return [];
+    return formik.values.body_weights.map((w) => ({
+      weight: w.weight,
+      qty: w.qty,
+    }));
+  }, [formik.values.body_weights]);
+
+  useEffect(() => {
+    if (formik.values.body_weights && editingAverageIndex === null) {
+      const updatedBodyWeights = formik.values.body_weights.map(
+        (weight, idx) => {
+          if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
+            return weight;
+          }
+          const qty = Number(weight.qty) || 0;
+          const weightValue = Number(weight.weight) || 0;
+          return {
+            ...weight,
+            avg_weight:
+              qty > 0 && weightValue > 0
+                ? parseFloat((weightValue / qty).toFixed(2))
+                : 0,
+          };
+        }
+      );
+      const hasChanges = updatedBodyWeights.some(
+        (updated, idx) =>
+          idx !== editingAverageIndex &&
+          !manuallyEditedRows.has(idx) &&
+          updated.avg_weight !==
+            (formik.values.body_weights[idx]?.avg_weight || 0)
+      );
+      if (hasChanges) {
+        formik.setFieldValue('body_weights', updatedBodyWeights, false);
+      }
+    }
+  }, [bodyWeightValues, editingAverageIndex, manuallyEditedRows]);
+
   return (
     <>
       <section className='w-full'>
-        <FormHeader
-          type={type}
-          title='Recording'
-          backUrl='/production/recording'
-        />
+        <header className='flex flex-col gap-4'>
+          <div className='flex justify-between items-center w-full'>
+            <Button
+              href='/production/recording'
+              variant='link'
+              className='w-fit p-0 text-primary'
+            >
+              <Icon icon='uil:arrow-left' width={24} height={24} />
+              Kembali
+            </Button>
+
+            {type === 'detail' &&
+              initialValues?.approval &&
+              !isRecordingApproved(initialValues) &&
+              !isRecordingRejected(initialValues) && (
+                <div className='flex flex-row gap-2'>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
+                    isLoading={isApproveLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
+                    isLoading={isRejectLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
+          </div>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Recording'}
+            {type === 'edit' && 'Edit Recording'}
+            {type === 'detail' && 'Detail Recording'}
+          </h1>
+        </header>
+
+        {type === 'detail' && approvals && !approvalsLoading && (
+          <ApprovalSteps approvals={approvals} />
+        )}
+
         <form
           onSubmit={formik.handleSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Basic Info Card */}
+          {(type === 'add' || type === 'edit') && (
+            <Card
+              title='Informasi Recording'
+              className={{
+                wrapper: 'w-full mb-4 shadow',
+                body: 'flex flex-col gap-6',
+              }}
+            >
+              <div className={'grid grid-cols-3 gap-4'}>
+                <>
+                  <SelectInput
+                    key={`location-select-${selectedLocation?.value || 'default'}`}
+                    required
+                    label='Lokasi'
+                    value={selectedLocation}
+                    onChange={locationChangeHandler}
+                    options={locationOptions}
+                    onInputChange={setLocationSearchValue}
+                    isLoading={isLoadingLocations}
+                    placeholder='Pilih Lokasi'
+                    isClearable
+                    isSearchable
+                  />
+
+                  <SelectInput
+                    key={`project-flock-select-${selectedProjectFlock?.value || 'default'}-${projectFlockOptions.length}`}
+                    required
+                    label='Project Flock'
+                    value={selectedProjectFlock}
+                    onChange={projectFlockChangeHandler}
+                    options={projectFlockOptions}
+                    onInputChange={setProjectFlockSearchValue}
+                    isLoading={isLoadingProjectFlocks}
+                    isDisabled={!selectedLocation}
+                    placeholder={
+                      selectedLocation
+                        ? 'Pilih Project Flock'
+                        : 'Pilih Lokasi terlebih dahulu'
+                    }
+                    isClearable
+                    isSearchable
+                  />
+
+                  <SelectInput
+                    key={`kandang-select-${selectedKandang?.value || 'default'}-${kandangOptions.length}`}
+                    required
+                    label='Kandang'
+                    value={selectedKandang}
+                    onChange={kandangChangeHandler}
+                    options={kandangOptions}
+                    isLoading={false}
+                    isDisabled={!selectedProjectFlock}
+                    placeholder={
+                      selectedProjectFlock
+                        ? 'Pilih Kandang'
+                        : 'Pilih Project Flock terlebih dahulu'
+                    }
+                    isClearable
+                    isSearchable
+                    startAdornment={
+                      projectFlockKandangLookup || projectFlockKandangDetail
+                        ? getProjectFlockBadgeAdornment()
+                        : undefined
+                    }
+                  />
+                </>
+              </div>
+            </Card>
+          )}
+
+          {/* Combined Info Card for Detail View */}
+          {type === 'detail' &&
+            initialValues &&
+            (projectFlockKandangLookup || projectFlockKandangDetail) && (
+              <Card
+                title='Informasi Recording'
+                className={{
+                  wrapper: 'w-full mb-4 shadow',
+                  body: 'flex flex-col gap-4',
+                }}
+              >
+                <div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
+                  {initialValues.approval && (
+                    <div>
+                      <span className='text-sm text-gray-600'>
+                        Status Approval
+                      </span>
+                      <div className='mt-1'>
+                        <Badge
+                          variant='soft'
+                          color={
+                            initialValues.approval.action === 'APPROVED'
+                              ? 'success'
+                              : initialValues.approval.action === 'REJECTED'
+                                ? 'error'
+                                : initialValues.approval.action === 'UPDATED'
+                                  ? 'warning'
+                                  : 'info'
+                          }
+                          className={{
+                            badge:
+                              'whitespace-nowrap font-semibold text-xs px-2',
+                          }}
+                        >
+                          {(() => {
+                            const actionText = (() => {
+                              switch (initialValues.approval.action) {
+                                case 'APPROVED':
+                                  return 'Disetujui';
+                                case 'REJECTED':
+                                  return 'Ditolak';
+                                case 'CREATED':
+                                  return 'Dibuat';
+                                case 'UPDATED':
+                                  return 'Diperbarui';
+                                default:
+                                  return initialValues.approval.action;
+                              }
+                            })();
+
+                            const stepName = initialValues.approval.step_name;
+
+                            if (stepName === actionText) {
+                              return stepName;
+                            }
+
+                            return `${stepName} - ${actionText}`;
+                          })()}
+                        </Badge>
+                      </div>
+                    </div>
+                  )}
+                  <div>
+                    <span className='text-sm text-gray-600'>Lokasi</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.project_flock?.location
+                        ?.name ||
+                        projectFlockKandangDetail?.project_flock?.location
+                          ?.name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Project Flock</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.project_flock?.flock_name ||
+                        projectFlockKandangDetail?.project_flock?.flock_name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Kandang</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.kandang?.name ||
+                        projectFlockKandangDetail?.kandang?.name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>
+                      Tanggal Recording
+                    </span>
+                    <p className='font-semibold'>
+                      {formatDate(
+                        initialValues.record_datetime || '',
+                        'DD MMMM YYYY'
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Hari</span>
+                    <p className='font-semibold'>Hari ke-{initialValues.day}</p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Kategori</span>
+                    <p className='font-semibold'>
+                      <Badge
+                        variant='soft'
+                        color={
+                          initialValues.project_flock_category === 'LAYING'
+                            ? 'info'
+                            : 'warning'
+                        }
+                        size='sm'
+                      >
+                        {initialValues.project_flock_category}
+                      </Badge>
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Periode</span>
+                    <p className='font-semibold'>
+                      <Badge
+                        variant='soft'
+                        color='neutral'
+                        size='sm'
+                        className={{
+                          badge: 'whitespace-nowrap font-semibold text-xs px-2',
+                        }}
+                      >
+                        Periode{' '}
+                        {projectFlockKandangLookup?.project_flock?.period ||
+                          projectFlockKandangDetail?.project_flock?.period ||
+                          '-'}
+                      </Badge>
+                    </p>
+                  </div>
+                </div>
+              </Card>
+            )}
+
+          {/* Body Weights Table */}
           <Card
-            title='Informasi Recording'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              body: 'flex flex-col gap-6',
-            }}
-          >
-            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-              <SelectInput
-                required
-                label='Lokasi'
-                value={formik.values.location ?? undefined}
-                onChange={(val) => {
-                  locationChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('location', true);
-                    formik.setFieldTouched('location_id', true);
-                  }, 0);
-                }}
-                options={locationOptions}
-                onInputChange={setLocationSelectInputValue}
-                isLoading={isLoadingLocations}
-                isError={
-                  formik.touched.location_id &&
-                  Boolean(formik.errors.location_id)
-                }
-                errorMessage={formik.errors.location_id as string}
-                isDisabled={type === 'detail'}
-                isClearable
-                placeholder='Pilih lokasi terlebih dahulu'
-              />
-
-              <TextInput
-                required
-                label='Tanggal Recording'
-                type='date'
-                name='recording_date'
-                value={
-                  formik.values.recording_date instanceof Date
-                    ? formik.values.recording_date
-                      .toISOString()
-                      .substring(0, 10)
-                    : ''
-                }
-                onChange={(e) => {
-                  const date = e.target.value ? new Date(e.target.value) : null;
-                  formik.setFieldValue('recording_date', date);
-                }}
-                onBlur={formik.handleBlur}
-                isError={
-                  formik.touched.recording_date &&
-                  Boolean(formik.errors.recording_date)
-                }
-                errorMessage={formik.errors.recording_date as string}
-                readOnly={type === 'detail'}
-              />
-
-              <SelectInput
-                required
-                label='Flock'
-                value={formik.values.flock ?? undefined}
-                onChange={(val) => {
-                  flockChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('flock', true);
-                    formik.setFieldTouched('flock_id', true);
-                  }, 0);
-                }}
-                options={flockOptions}
-                onInputChange={setFlockSelectInputValue}
-                isLoading={isLoadingFlocks}
-                isError={
-                  formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                }
-                errorMessage={formik.errors.flock_id as string}
-                isDisabled={type === 'detail' || !formik.values.location_id}
-                isClearable
-                placeholder={
-                  !formik.values.location_id
-                    ? 'Pilih lokasi terlebih dahulu'
-                    : 'Pilih Flock'
-                }
-              />
-
-              <SelectInput
-                key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                required
-                label='Kandang'
-                value={formik.values.coop ?? undefined}
-                onChange={(val) => {
-                  coopChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('coop', true);
-                    formik.setFieldTouched('coop_id', true);
-                  }, 0);
-                }}
-                options={coopOptions}
-                isError={
-                  formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                }
-                errorMessage={formik.errors.coop_id as string}
-                isDisabled={type === 'detail' || !selectedProjectFlock}
-                isClearable
-                placeholder={
-                  !selectedProjectFlock
-                    ? 'Pilih flock terlebih dahulu'
-                    : 'Pilih Kandang'
-                }
-              />
-            </div>
-          </Card>
-
-          {/* Feed Data Table */}
-          <Card
-            title='Data Pakan'
+            title='Bobot Badan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -781,74 +1769,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <CheckboxInput
-                        name='select-all-feed'
-                        checked={
-                          formik.values.feed_data?.length ===
-                          selectedFeed.length &&
-                          formik.values.feed_data?.length > 0
-                        }
-                        onChange={(
-                          e: React.ChangeEvent<HTMLInputElement>
-                        ) => {
-                          if (e.target.checked) {
-                            setSelectedFeed(
-                              formik.values.feed_data?.map((_, idx) => idx) ??
-                              []
-                            );
-                          } else {
-                            setSelectedFeed([]);
-                          }
-                        }}
-                        classNames={{
-                          wrapper: 'flex justify-center',
-                          checkbox: 'checkbox checkbox-sm',
-                        }}
-                      />
-                    </th>
-                  )}
-                  <th>
-                    Nama Pakan
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>Total Stock pada saat ini</th>
-                  <th>
-                    Jumlah Stock yang digunakan
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.feed_data?.map((feed, idx) => (
-                  <tr key={`feed-${idx}`}>
-                    {type !== 'detail' && (
-                      <td className="!align-middle">
+                  <tr>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>
                         <CheckboxInput
-                          name={`feed-${idx}`}
-                          checked={selectedFeed.includes(idx)}
+                          name='select-all-body-weights'
+                          checked={
+                            formik.values.body_weights?.length ===
+                              selectedBodyWeights.length &&
+                            formik.values.body_weights?.length > 0
+                          }
                           onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>,
+                            e: React.ChangeEvent<HTMLInputElement>
                           ) => {
                             if (e.target.checked) {
-                              setSelectedFeed([...selectedFeed, idx]);
-                            } else {
-                              setSelectedFeed(
-                                selectedFeed.filter((i) => i !== idx),
+                              setSelectedBodyWeights(
+                                formik.values.body_weights?.map(
+                                  (_, idx) => idx
+                                ) ?? []
                               );
+                            } else {
+                              setSelectedBodyWeights([]);
                             }
                           }}
                           classNames={{
@@ -856,386 +1797,213 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
+                      </th>
                     )}
-                    <td>
-                      <SelectInput
-                        required
-                        value={
-                          pakanOptions.find(
-                            (opt: OptionType) =>
-                              Number(opt.value) === Number(feed.feed_id)
-                          ) ?? null
-                        }
-                        onChange={(val) => {
-                          const productWarehouseId =
-                            (val as OptionType)?.value ?? 0;
-                          const stock = productWarehouseId
-                            ? (pakanStockMap.get(
-                              productWarehouseId as number
-                            ) ?? '')
-                            : '';
-
-                          formik.setFieldValue(`feed_data.${idx}.feed`, val);
-                          formik.setFieldValue(
-                            `feed_data.${idx}.feed_id`,
-                            productWarehouseId || ''
-                          );
-                          formik.setFieldValue(
-                            `feed_data.${idx}.feed_qty`,
-                            stock
-                          );
-                          formik.setFieldValue(
-                            `feed_data.${idx}.feed_stock`,
-                            0
-                          );
-                          setTimeout(() => {
-                            formik.setFieldTouched(
-                              `feed_data.${idx}.feed`,
-                              true
-                            );
-                            formik.setFieldTouched(
-                              `feed_data.${idx}.feed_id`,
-                              true
-                            );
-                          }, 0);
-                        }}
-                        options={pakanOptions}
-                        isLoading={isLoadingPakan}
-                        isError={
-                          isRepeaterInputError('feed_data', 'feed_id', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('feed_data', 'feed_id', idx)
-                            .errorMessage
-                        }
-                        isDisabled={type === 'detail'}
-                        isClearable
-                        className={{
-                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        type='text'
-                        name={`feed_data.${idx}.feed_qty`}
-                        value={
-                          feed.feed_qty === '' || feed.feed_qty === undefined
-                            ? ''
-                            : Number(feed.feed_qty).toLocaleString('en-US')
-                        }
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        readOnly={true}
-                        placeholder='Pilih pakan terlebih dahulu'
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`feed_data.${idx}.feed_stock`}
-                        value={feed.feed_stock}
-                        onChange={handleFeedStockChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        thousandSeparator=','
-                        decimalSeparator=''
-                        isError={
-                          isRepeaterInputError('feed_data', 'feed_stock', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('feed_data', 'feed_stock', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex flex-col items-start gap-2'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeFeedData(idx)}
-                          >
-                            <Icon
-                              icon='material-symbols:delete-outline-rounded'
-                              width={24}
-                              height={24}
-                            />
-                          </Button>
-                        </div>
-                      </td>
+                    <th>
+                      Berat Ayam (gram)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Rata-rata Berat Ayam (gram)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>Action</th>
                     )}
                   </tr>
-                ))}
-                </tbody>
-              </table>
-            </div>
-            {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedFeed.length > 0 && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={removeSelectedFeedData}
-                    disabled={selectedFeed.length === 0}
-                    className='w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Feed Data ({selectedFeed.length})
-                  </Button>
-                )}
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addFeedData}
-                  className='w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Feed Data
-                </Button>
-              </div>
-            )}
-          </Card>
-
-          {/* Body Weight Table */}
-          <Card
-            title='Berat Ayam'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <div className='flex justify-center items-center h-full'>
-                        <CheckboxInput
-                          name='select-all-weight'
-                          checked={
-                            formik.values.body_weight?.length ===
-                            selectedWeight.length &&
-                            formik.values.body_weight?.length > 0
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedWeight(
-                                formik.values.body_weight?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedWeight([]);
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
-                    </th>
-                  )}
-                  <th>
-                    Berat (Gram)
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Jumlah Ayam
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Rata-rata berat Ayam
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
                 </thead>
                 <tbody>
-                {formik.values.body_weight?.map((weight, idx) => (
-                  <tr key={`weight-${idx}`}>
-                    {type !== 'detail' && (
-                      <td className='!align-middle'>
-                        <CheckboxInput
-                          name={`weight-${idx}`}
-                          checked={selectedWeight.includes(idx)}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedWeight([...selectedWeight, idx]);
-                            } else {
-                              setSelectedWeight(
-                                selectedWeight.filter((i) => i !== idx)
-                              );
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center',
-                            checkbox: 'checkbox checkbox-sm',
+                  {formik.values.body_weights?.map((bw, idx) => (
+                    <tr key={`body-weight-${idx}`}>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td className='align-middle!'>
+                          <CheckboxInput
+                            name={`body-weight-${idx}`}
+                            checked={selectedBodyWeights.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedBodyWeights([
+                                  ...selectedBodyWeights,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedBodyWeights(
+                                  selectedBodyWeights.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weights.${idx}.weight`}
+                          value={bw.weight ?? ''}
+                          onChange={handleWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={2}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputSuffix='gram'
+                          placeholder='Masukkan berat total...'
+                          isError={
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
                           }}
                         />
                       </td>
-                    )}
-                    <td>
-                      <NumberInput
-                        required
-                        name={`body_weight.${idx}.chicken_weight`}
-                        value={weight.chicken_weight}
-                        onChange={handleChickenWeightChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError(
-                            'body_weight',
-                            'chicken_weight',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'body_weight',
-                            'chicken_weight',
-                            idx
-                          ).errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`body_weight.${idx}.chicken_count`}
-                        value={weight.chicken_count}
-                        onChange={handleChickenCountChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        isError={
-                          isRepeaterInputError(
-                            'body_weight',
-                            'chicken_count',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'body_weight',
-                            'chicken_count',
-                            idx
-                          ).errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <div className='relative'>
+                      <td>
                         <NumberInput
                           required
-                          name={`body_weight.${idx}.average_chicken_weight`}
-                          value={weight.average_chicken_weight || ''}
-                          onChange={handleAverageWeightChangeWrapper(idx)}
+                          name={`body_weights.${idx}.qty`}
+                          value={bw.qty ?? ''}
+                          onChange={handleQtyChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
                           thousandSeparator=','
                           decimalSeparator='.'
+                          placeholder='Masukkan jumlah ayam...'
+                          bottomLabel={
+                            formik.values.project_flock_kandang_id &&
+                            type === 'add'
+                              ? `Total Ayam: ${
+                                  getLatestTotalChickQty(
+                                    formik.values.project_flock_kandang_id
+                                  ) !== null
+                                    ? formatNumber(
+                                        getLatestTotalChickQty(
+                                          formik.values.project_flock_kandang_id
+                                        )!
+                                      )
+                                    : 'N/A'
+                                }`
+                              : undefined
+                          }
                           isError={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'average_chicken_weight',
-                              idx
-                            ).isError
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .isError ||
+                            (bw.qty
+                              ? getTotalChickQtyError(Number(bw.qty)) !== null
+                              : false)
                           }
                           errorMessage={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'average_chicken_weight',
-                              idx
-                            ).errorMessage
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .errorMessage ||
+                            (bw.qty
+                              ? getTotalChickQtyError(Number(bw.qty)) ||
+                                undefined
+                              : undefined)
                           }
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
-                          placeholder=''
                         />
-                      </div>
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex flex-col items-start gap-2'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeBodyWeight(idx)}
-                          >
-                            <Icon
-                              icon='material-symbols:delete-outline-rounded'
-                              width={24}
-                              height={24}
-                            />
-                          </Button>
-                        </div>
                       </td>
-                    )}
-                  </tr>
-                ))}
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weights.${idx}.avg_weight`}
+                          value={bw.avg_weight ?? ''}
+                          onChange={handleAvgWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={2}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputSuffix='gram'
+                          placeholder='Masukkan berat rata-rata...'
+                          isError={
+                            isRepeaterInputError(
+                              'body_weights',
+                              'avg_weight',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weights',
+                              'avg_weight',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                        />
+                      </td>
+
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td>
+                          <div className='flex items-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeBodyWeight(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
-            {type !== 'detail' && (
+            {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
               <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedWeight.length > 0 && (
+                {selectedBodyWeights.length > 0 && (
                   <Button
                     type='button'
                     color='error'
-                    onClick={removeSelectedBodyWeight}
-                    disabled={selectedWeight.length === 0}
+                    onClick={removeSelectedBodyWeights}
+                    disabled={selectedBodyWeights.length === 0}
                     className='w-fit'
                   >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Body Weight ({selectedWeight.length})
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
+                    Hapus Terpilih ({selectedBodyWeights.length})
                   </Button>
                 )}
                 <Button
@@ -1245,15 +2013,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   className='w-fit'
                 >
                   <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Body Weight Data
+                  Tambah Bobot Badan
                 </Button>
               </div>
             )}
           </Card>
 
-          {/* Vaccination Table */}
+          {/* Stocks Table */}
           <Card
-            title='Vaccination'
+            title='Stok Persediaan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -1262,77 +2030,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <div className='flex justify-center items-center h-full'>
+                  <tr>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>
                         <CheckboxInput
-                          name='select-all-vaccine'
+                          name='select-all-stocks'
                           checked={
-                            formik.values.vaccination?.length ===
-                            selectedVaccine.length &&
-                            formik.values.vaccination?.length > 0
+                            formik.values.stocks?.length ===
+                              selectedStocks.length &&
+                            formik.values.stocks?.length > 0
                           }
                           onChange={(
                             e: React.ChangeEvent<HTMLInputElement>
                           ) => {
                             if (e.target.checked) {
-                              setSelectedVaccine(
-                                formik.values.vaccination?.map(
-                                  (_, idx) => idx
-                                ) ?? []
+                              setSelectedStocks(
+                                formik.values.stocks?.map((_, idx) => idx) ?? []
                               );
                             } else {
-                              setSelectedVaccine([]);
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
-                    </th>
-                  )}
-                  <th>
-                    Name Vaksin
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>Total Stock pada saat ini</th>
-                  <th>
-                    Jumlah Stock yang digunakan
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.vaccination?.map((vaccine, idx) => (
-                  <tr key={`vaccine-${idx}`}>
-                    {type !== 'detail' && (
-                      <td className="!align-middle">
-                        <CheckboxInput
-                          name={`vaccine-${idx}`}
-                          checked={selectedVaccine.includes(idx)}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>,
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedVaccine([...selectedVaccine, idx]);
-                            } else {
-                              setSelectedVaccine(
-                                selectedVaccine.filter((i) => i !== idx),
-                              );
+                              setSelectedStocks([]);
                             }
                           }}
                           classNames={{
@@ -1340,180 +2056,190 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
+                      </th>
                     )}
-                    <td>
-                      <SelectInput
-                        required
-                        value={
-                          ovkOptions.find(
-                            (opt: OptionType) =>
-                              Number(opt.value) === Number(vaccine.vaccine_id)
-                          ) ?? null
-                        }
-                        onChange={(val) => {
-                          const productWarehouseId =
-                            (val as OptionType)?.value ?? 0;
-                          const stock = productWarehouseId
-                            ? (ovkStockMap.get(
-                              productWarehouseId as number
-                            ) ?? '')
-                            : '';
-                          formik.setFieldValue(
-                            `vaccination.${idx}.vaccine`,
-                            val
-                          );
-                          formik.setFieldValue(
-                            `vaccination.${idx}.vaccine_id`,
-                            productWarehouseId || ''
-                          );
-                          formik.setFieldValue(
-                            `vaccination.${idx}.total_stock`,
-                            stock
-                          );
-                          formik.setFieldValue(
-                            `vaccination.${idx}.used_stock`,
-                            0
-                          );
-                          // Set touched after setting values to trigger validation
-                          setTimeout(() => {
-                            formik.setFieldTouched(
-                              `vaccination.${idx}.vaccine`,
-                              true
-                            );
-                            formik.setFieldTouched(
-                              `vaccination.${idx}.vaccine_id`,
-                              true
-                            );
-                          }, 0);
-                        }}
-                        options={ovkOptions}
-                        isLoading={isLoadingOvk}
-                        isError={
-                          isRepeaterInputError(
-                            'vaccination',
-                            'vaccine_id',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'vaccination',
-                            'vaccine_id',
-                            idx
-                          ).errorMessage
-                        }
-                        isDisabled={type === 'detail'}
-                        isClearable
-                        className={{
-                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        type='text'
-                        name={`vaccination.${idx}.total_stock`}
-                        value={
-                          vaccine.total_stock === '' ||
-                          vaccine.total_stock === undefined
-                            ? ''
-                            : Number(vaccine.total_stock).toLocaleString('en-US')
-                        }
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        readOnly={true}
-                        placeholder='Pilih vaksin terlebih dahulu'
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`vaccination.${idx}.used_stock`}
-                        value={vaccine.used_stock}
-                        onChange={handleVaccinationStockChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        thousandSeparator=','
-                        decimalSeparator=''
-                        isError={
-                          isRepeaterInputError(
-                            'vaccination',
-                            'used_stock',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'vaccination',
-                            'used_stock',
-                            idx
-                          ).errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex flex-col items-start gap-2'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeVaccination(idx)}
-                          >
-                            <Icon
-                              icon='material-symbols:delete-outline-rounded'
-                              width={24}
-                              height={24}
-                            />
-                          </Button>
-                        </div>
-                      </td>
+                    <th>
+                      Persediaan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Pakai
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>Action</th>
                     )}
                   </tr>
-                ))}
+                </thead>
+                <tbody>
+                  {formik.values.stocks?.map((stock, idx) => (
+                    <tr key={`stock-${idx}`}>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td className='align-middle!'>
+                          <CheckboxInput
+                            name={`stock-${idx}`}
+                            checked={selectedStocks.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedStocks([...selectedStocks, idx]);
+                              } else {
+                                setSelectedStocks(
+                                  selectedStocks.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          required
+                          key={`stock-product-${idx}-${stock.product_warehouse_id}`}
+                          value={
+                            unifiedStockProducts.find(
+                              (product) =>
+                                product.value === stock.product_warehouse_id
+                            ) || null
+                          }
+                          onChange={(selectedOption) => {
+                            const option = selectedOption as OptionType | null;
+                            formik.setFieldValue(
+                              `stocks.${idx}.product_warehouse_id`,
+                              option?.value || 0
+                            );
+                          }}
+                          options={unifiedStockProducts}
+                          placeholder='Pilih Produk'
+                          isLoading={isLoadingStockProducts}
+                          isError={
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).errorMessage
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-48',
+                          }}
+                          isSearchable
+                          isDisabled={type === 'detail'}
+                          isClearable={type !== 'detail'}
+                          startAdornment={
+                            stock.product_warehouse_id
+                              ? getProductFlagBadgeAdornment(
+                                  stock.product_warehouse_id
+                                )
+                              : undefined
+                          }
+                        />
+                      </td>
+                      <td>
+                        <div className='flex flex-col gap-1'>
+                          <NumberInput
+                            required
+                            name={`stocks.${idx}.qty`}
+                            value={stock.qty ?? ''}
+                            onChange={handleStockUsageQtyChangeWrapper(idx)}
+                            onBlur={formik.handleBlur}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            isError={
+                              isRepeaterInputError('stocks', 'qty', idx)
+                                .isError || Boolean(getStockUsageError(idx))
+                            }
+                            errorMessage={
+                              isRepeaterInputError('stocks', 'qty', idx)
+                                .errorMessage ||
+                              getStockUsageError(idx) ||
+                              undefined
+                            }
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                            placeholder='Masukkan jumlah pakai'
+                          />
+                          {(type as 'add' | 'edit' | 'detail') !== 'detail' &&
+                            getStockUsageAdornment(idx)}
+                        </div>
+                      </td>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td>
+                          <div className='flex items-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeStock(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
-            {type !== 'detail' && (
+            {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
               <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedVaccine.length > 0 && (
+                {selectedStocks.length > 0 && (
                   <Button
                     type='button'
                     color='error'
-                    onClick={removeSelectedVaccination}
-                    disabled={selectedVaccine.length === 0}
+                    onClick={removeSelectedStocks}
+                    disabled={selectedStocks.length === 0}
                     className='w-fit'
                   >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Vaccination ({selectedVaccine.length})
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
+                    Hapus Terpilih ({selectedStocks.length})
                   </Button>
                 )}
                 <Button
                   type='button'
                   color='success'
-                  onClick={addVaccination}
+                  onClick={addStock}
                   className='w-fit'
                 >
                   <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Vaccination Data
+                  Tambah Stok
                 </Button>
               </div>
             )}
           </Card>
 
-          {/* Mortality Table */}
+          {/* Depletions Table */}
           <Card
-            title='Mortalitas'
+            title='Deplesi'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -1522,79 +2248,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <div className='flex justify-center items-center h-full'>
+                  <tr>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>
                         <CheckboxInput
-                          name='select-all-mortality'
+                          name='select-all-depletions'
                           checked={
-                            formik.values.mortality?.length ===
-                            selectedMortality.length &&
-                            formik.values.mortality?.length > 0
+                            formik.values.depletions?.length ===
+                              selectedDepletions.length &&
+                            formik.values.depletions?.length > 0
                           }
                           onChange={(
                             e: React.ChangeEvent<HTMLInputElement>
                           ) => {
                             if (e.target.checked) {
-                              setSelectedMortality(
-                                formik.values.mortality?.map(
+                              setSelectedDepletions(
+                                formik.values.depletions?.map(
                                   (_, idx) => idx
                                 ) ?? []
                               );
                             } else {
-                              setSelectedMortality([]);
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
-                    </th>
-                  )}
-                  <th>
-                    Kondisi/Alasan Mortalitas
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Jumlah
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.mortality?.map((mortality, idx) => (
-                  <tr key={`mortality-${idx}`}>
-                    {type !== 'detail' && (
-                      <td className="!align-middle">
-                        <CheckboxInput
-                          name={`mortality-${idx}`}
-                          checked={selectedMortality.includes(idx)}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>,
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedMortality([
-                                ...selectedMortality,
-                                idx,
-                              ]);
-                            } else {
-                              setSelectedMortality(
-                                selectedMortality.filter((i) => i !== idx),
-                              );
+                              setSelectedDepletions([]);
                             }
                           }}
                           classNames={{
@@ -1602,128 +2276,515 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
+                      </th>
                     )}
-                    <td>
-                      <SelectInput
-                        required
-                        value={RECORDING_FLAG_OPTIONS.find(
-                          (opt) => opt.value === mortality.condition
-                        )}
-                        onChange={(val) => {
-                          formik.setFieldTouched(
-                            `mortality.${idx}.condition`,
-                            true
-                          );
-                          formik.setFieldValue(
-                            `mortality.${idx}.condition`,
-                            (val as OptionType)?.value
-                          );
-                        }}
-                        isError={
-                          isRepeaterInputError('mortality', 'condition', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('mortality', 'condition', idx)
-                            .errorMessage
-                        }
-                        options={RECORDING_FLAG_OPTIONS}
-                        isDisabled={type === 'detail'}
-                        isClearable
-                        className={{
-                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`mortality.${idx}.count`}
-                        value={mortality.count}
-                        onChange={handleMortalityCountChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        thousandSeparator=','
-                        decimalSeparator=''
-                        isError={
-                          isRepeaterInputError('mortality', 'count', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('mortality', 'count', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex flex-col items-start gap-2'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeMortality(idx)}
-                          >
-                            <Icon
-                              icon='material-symbols:delete-outline-rounded'
-                              width={24}
-                              height={24}
-                            />
-                          </Button>
-                        </div>
-                      </td>
+                    <th>
+                      Kondisi
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom '
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                      <th>Action</th>
                     )}
                   </tr>
-                ))}
+                </thead>
+                <tbody>
+                  {formik.values.depletions?.map((depletion, idx) => (
+                    <tr key={`depletion-${idx}`}>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td className='align-middle!'>
+                          <CheckboxInput
+                            name={`depletion-${idx}`}
+                            checked={selectedDepletions.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedDepletions([
+                                  ...selectedDepletions,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedDepletions(
+                                  selectedDepletions.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          value={
+                            depletionProducts.find(
+                              (product) =>
+                                product.value === depletion.product_warehouse_id
+                            ) || null
+                          }
+                          onChange={(selectedOption) => {
+                            const option = selectedOption as OptionType | null;
+                            formik.setFieldValue(
+                              `depletions.${idx}.product_warehouse_id`,
+                              option?.value || 0
+                            );
+                          }}
+                          options={depletionProducts}
+                          placeholder='Pilih Kondisi'
+                          isLoading={isLoadingDepletionProducts}
+                          isError={
+                            isRepeaterInputError(
+                              'depletions',
+                              'product_warehouse_id',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'depletions',
+                              'product_warehouse_id',
+                              idx
+                            ).errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-48',
+                          }}
+                          isSearchable
+                          isClearable={type !== 'detail'}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`depletions.${idx}.qty`}
+                          value={depletion.qty ?? ''}
+                          onChange={handleDepletionQtyChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isRepeaterInputError('depletions', 'qty', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('depletions', 'qty', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder='Masukkan jumlah deplesi'
+                        />
+                      </td>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <td>
+                          <div className='flex items-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDepletion(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
-            {type !== 'detail' && (
+            {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
               <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedMortality.length > 0 && (
+                {selectedDepletions.length > 0 && (
                   <Button
                     type='button'
                     color='error'
-                    onClick={removeSelectedMortality}
-                    disabled={selectedMortality.length === 0}
+                    onClick={removeSelectedDepletions}
+                    disabled={selectedDepletions.length === 0}
                     className='w-fit'
                   >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Mortality ({selectedMortality.length})
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
+                    Hapus Terpilih ({selectedDepletions.length})
                   </Button>
                 )}
                 <Button
                   type='button'
                   color='success'
-                  onClick={addMortality}
+                  onClick={addDepletion}
                   className='w-fit'
                 >
                   <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Mortality Data
+                  Tambah Depletion
                 </Button>
               </div>
             )}
           </Card>
 
+          {/* Eggs Table - Only for LAYING Category */}
+          {isLayingCategory && (
+            <Card
+              title='Telur'
+              className={{
+                wrapper: 'w-full mb-4 shadow',
+                title: 'mb-4',
+              }}
+            >
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <th>
+                          <CheckboxInput
+                            name='select-all-eggs'
+                            checked={
+                              ((formik.values as RecordingLayingFormValues).eggs
+                                ?.length ?? 0) === selectedEggs.length &&
+                              ((formik.values as RecordingLayingFormValues).eggs
+                                ?.length ?? 0) > 0
+                            }
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedEggs(
+                                  (
+                                    formik.values as RecordingLayingFormValues
+                                  ).eggs?.map((_, idx) => idx) ?? []
+                                );
+                              } else {
+                                setSelectedEggs([]);
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </th>
+                      )}
+                      <th>
+                        Kondisi Telur
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom '
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Jumlah
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom '
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Berat (gram)
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom '
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                        <th>Action</th>
+                      )}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(formik.values as RecordingLayingFormValues).eggs?.map(
+                      (egg, idx) => (
+                        <tr key={`egg-${idx}`}>
+                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                            <td className='align-middle!'>
+                              <CheckboxInput
+                                name={`egg-${idx}`}
+                                checked={selectedEggs.includes(idx)}
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => {
+                                  if (e.target.checked) {
+                                    setSelectedEggs([...selectedEggs, idx]);
+                                  } else {
+                                    setSelectedEggs(
+                                      selectedEggs.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                                classNames={{
+                                  wrapper: 'flex justify-center',
+                                  checkbox: 'checkbox checkbox-sm',
+                                }}
+                              />
+                            </td>
+                          )}
+                          <td>
+                            <SelectInput
+                              required
+                              value={
+                                eggProducts.find(
+                                  (product) =>
+                                    product.value === egg.product_warehouse_id
+                                ) || null
+                              }
+                              onChange={(selectedOption) => {
+                                const option =
+                                  selectedOption as OptionType | null;
+                                formik.setFieldValue(
+                                  `eggs.${idx}.product_warehouse_id`,
+                                  option?.value || 0
+                                );
+                              }}
+                              options={eggProducts}
+                              placeholder='Pilih Kondisi Telur'
+                              isLoading={isLoadingEggProducts}
+                              isError={
+                                isRepeaterInputError(
+                                  'eggs',
+                                  'product_warehouse_id',
+                                  idx
+                                ).isError
+                              }
+                              errorMessage={
+                                isRepeaterInputError(
+                                  'eggs',
+                                  'product_warehouse_id',
+                                  idx
+                                ).errorMessage
+                              }
+                              isDisabled={type === 'detail'}
+                              className={{
+                                wrapper: 'w-full min-w-48',
+                              }}
+                              isSearchable
+                              isClearable={type !== 'detail'}
+                            />
+                          </td>
+                          <td>
+                            <NumberInput
+                              required
+                              name={`eggs.${idx}.qty`}
+                              value={egg.qty ?? ''}
+                              onChange={handleEggQtyChangeWrapper(idx)}
+                              onBlur={formik.handleBlur}
+                              decimalScale={0}
+                              allowNegative={false}
+                              thousandSeparator=','
+                              decimalSeparator='.'
+                              isError={
+                                isRepeaterInputError('eggs', 'qty', idx).isError
+                              }
+                              errorMessage={
+                                isRepeaterInputError('eggs', 'qty', idx)
+                                  .errorMessage
+                              }
+                              readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'w-full min-w-24',
+                              }}
+                              placeholder='Masukkan jumlah telur'
+                            />
+                          </td>
+                          <td>
+                            <NumberInput
+                              required
+                              name={`eggs.${idx}.weight`}
+                              value={egg.weight ?? ''}
+                              onChange={handleEggWeightChangeWrapper(idx)}
+                              onBlur={formik.handleBlur}
+                              decimalScale={0}
+                              allowNegative={false}
+                              thousandSeparator=','
+                              decimalSeparator='.'
+                              isError={
+                                isRepeaterInputError('eggs', 'weight', idx)
+                                  .isError
+                              }
+                              errorMessage={
+                                isRepeaterInputError('eggs', 'weight', idx)
+                                  .errorMessage
+                              }
+                              readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'w-full min-w-24',
+                              }}
+                              placeholder='Masukkan berat telur (gram)...'
+                            />
+                          </td>
+                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                            <td>
+                              <div className='flex items-center'>
+                                <Button
+                                  type='button'
+                                  color='error'
+                                  onClick={() => removeEgg(idx)}
+                                >
+                                  <Icon
+                                    icon='mdi:trash-can'
+                                    width={24}
+                                    height={24}
+                                  />
+                                </Button>
+                              </div>
+                            </td>
+                          )}
+                        </tr>
+                      )
+                    )}
+                  </tbody>
+                </table>
+              </div>
+              {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedEggs.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={removeSelectedEggs}
+                      disabled={selectedEggs.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon icon='mdi:trash-can' width={24} height={24} />
+                      Hapus Terpilih ({selectedEggs.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addEgg}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Telur
+                  </Button>
+                </div>
+              )}
+            </Card>
+          )}
+
           {/* Action buttons */}
-          <FormActions<RecordingFormValues>
-            type={type}
-            formik={formik}
-            editUrl={
-              initialValues
-                ? `/production/recording/detail/edit/?recordingId=${initialValues.id}`
-                : undefined
-            }
-            onDelete={deleteRecordingClickHandler}
-          />
+          <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
+            {/* Left side - Detail & Edit actions */}
+            <div className='flex flex-col sm:flex-row justify-start gap-2 w-full sm:w-auto'>
+              {type === 'detail' && deleteRecordingClickHandler && (
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteRecordingClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              )}
+              {type === 'detail' && initialValues && (
+                <Button
+                  type='button'
+                  color='warning'
+                  href={`/production/recording/detail/edit/?recordingId=${initialValues.id}`}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:edit-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Edit
+                </Button>
+              )}
+            </div>
+            {/* Right side actions */}
+            <div className='flex flex-col sm:flex-row sm:justify-end gap-2 w-full sm:w-auto'>
+              {type === 'edit' && (
+                <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
+                  <Button
+                    type='reset'
+                    color='warning'
+                    className='px-4'
+                    onClick={(e) => {
+                      formik.handleReset(e);
+                      formik.validateForm();
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    type='submit'
+                    color='primary'
+                    className='px-4'
+                    isLoading={formik.isSubmitting}
+                    disabled={
+                      hasExceededStock || !formik.isValid || formik.isSubmitting
+                    }
+                  >
+                    Submit
+                  </Button>
+                </div>
+              )}
 
+              {type === 'add' && (
+                <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
+                  <Button
+                    type='reset'
+                    color='warning'
+                    className='px-4'
+                    onClick={(e) => {
+                      formik.handleReset(e);
+                      formik.validateForm();
+                    }}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    type='submit'
+                    color='primary'
+                    className='px-4'
+                    isLoading={formik.isSubmitting}
+                    disabled={
+                      hasExceededStock || !formik.isValid || formik.isSubmitting
+                    }
+                  >
+                    Submit
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
           {recordingFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
               <Icon
@@ -1737,21 +2798,69 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         </form>
       </section>
 
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text='Apakah anda yakin ingin menghapus data Recording ini?'
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
+      {/* ===== MODALS ===== */}
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={deleteModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin menghapus data Recording ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isDeleteLoading,
+              onClick: confirmationModalDeleteClickHandler,
+            }}
+          />
+
+          {/* Approve Confirmation Modal */}
+          {(type as 'add' | 'edit' | 'detail') === 'detail' &&
+            !isRecordingApproved(initialValues) &&
+            !isRecordingRejected(initialValues) && (
+              <ConfirmationModalWithNotes
+                ref={approveModal.ref}
+                type='success'
+                text='Apakah anda yakin ingin menyetujui data Recording ini?'
+                secondaryButton={{
+                  text: 'Tidak',
+                  onClick: () => setApprovalNotes(''),
+                }}
+                primaryButton={{
+                  text: 'Ya',
+                  color: 'success',
+                  isLoading: isApproveLoading,
+                  onClick: approveHandler,
+                }}
+                placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
+                rows={3}
+              />
+            )}
+
+          {/* Reject Confirmation Modal */}
+          {(type as 'add' | 'edit' | 'detail') === 'detail' &&
+            !isRecordingApproved(initialValues) && (
+              <ConfirmationModalWithNotes
+                ref={rejectModal.ref}
+                type='error'
+                text='Apakah anda yakin ingin menolak data Recording ini?'
+                secondaryButton={{
+                  text: 'Tidak',
+                  onClick: () => setApprovalNotes(''),
+                }}
+                primaryButton={{
+                  text: 'Ya',
+                  color: 'error',
+                  isLoading: isRejectLoading,
+                  onClick: rejectHandler,
+                }}
+                placeholder='(Opsional) Tambahkan catatan untuk reject ini...'
+                rows={3}
+              />
+            )}
+        </>
       )}
     </>
   );
diff --git a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
deleted file mode 100644
index 334b791d..00000000
--- a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'react-hot-toast';
-import { useModal } from '@/components/Modal';
-import { RecordingApi } from '@/services/api/production';
-import {
-  CreateRecordingPayload,
-  UpdateRecordingPayload,
-} from '@/types/api/production/recording';
-import { isResponseError } from '@/lib/api-helper';
-
-export const useRecordingFormHandlers = (initialValuesId?: number) => {
-  const router = useRouter();
-  const deleteModal = useModal();
-  const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
-    useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const createRecordingHandler = useCallback(
-    async (payload: CreateRecordingPayload) => {
-      const res = await RecordingApi.create(payload);
-      if (isResponseError(res)) {
-        setRecordingFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.push('/flock/recording');
-    },
-    [router]
-  );
-
-  const updateRecordingHandler = useCallback(
-    async (recordingId: number, payload: UpdateRecordingPayload) => {
-      const res = await RecordingApi.update(recordingId, payload);
-      if (res?.status === 'error') {
-        setRecordingFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.refresh();
-      router.push('/flock/recording');
-    },
-    [router]
-  );
-
-  const deleteRecordingClickHandler = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
-
-  const confirmationModalDeleteClickHandler = useCallback(async () => {
-    if (!initialValuesId) return;
-
-    setIsDeleteLoading(true);
-    await RecordingApi.delete(initialValuesId);
-    deleteModal.closeModal();
-    toast.success('Successfully delete Recording!');
-    setIsDeleteLoading(false);
-    router.push('/flock/recording');
-  }, [deleteModal, initialValuesId, router]);
-
-  return {
-    deleteModal,
-    recordingFormErrorMessage,
-    isDeleteLoading,
-    createRecordingHandler,
-    updateRecordingHandler,
-    deleteRecordingClickHandler,
-    confirmationModalDeleteClickHandler,
-  };
-};
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
new file mode 100644
index 00000000..424cc3c2
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -0,0 +1,706 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Flock } from '@/types/api/master-data/flock';
+import { FlockApi } from '@/services/api/master-data';
+import PillBadge from '@/components/PillBadge';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<TransferToLaying, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  deleteClickHandler: () => void;
+}) => {
+  const showEditButton =
+    props.row.original.approval.action !== 'APPROVED' &&
+    props.row.original.approval.action !== 'REJECTED';
+
+  const showDeleteButton = showEditButton;
+
+  // TODO: apply RBAC
+  const showApproveButton = showEditButton;
+  const showRejectButton = showEditButton;
+
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <Button
+        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      {showEditButton && (
+        <Button
+          href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      )}
+
+      {/* TODO: apply RBAC */}
+      {showApproveButton && (
+        <Button
+          variant='ghost'
+          color='success'
+          onClick={approveClickHandler}
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:check' width={24} height={24} />
+          Approve
+        </Button>
+      )}
+      {showRejectButton && (
+        <Button
+          variant='ghost'
+          color='error'
+          onClick={rejectClickHandler}
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:close' width={24} height={24} />
+          Reject
+        </Button>
+      )}
+      {showDeleteButton && (
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      )}
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        const isCheckboxDisabled =
+          !row.getCanSelect() ||
+          row.original.approval.action === 'APPROVED' ||
+          row.original.approval.action === 'REJECTED';
+
+        return (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={isCheckboxDisabled}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        );
+      },
+    },
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal Transfer',
+      cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'flock_source',
+      header: 'Flock Asal',
+      cell: (props) => props.row.original.from_project_flock.flock_name,
+    },
+    {
+      accessorKey: 'flock_destination',
+      header: 'Flock Tujuan',
+      cell: (props) => props.row.original.to_project_flock.flock_name,
+    },
+    {
+      accessorKey: 'usage_qty',
+      header: 'Kuantitas',
+      cell: (props) => props.getValue() ?? props.row.original.pending_usage_qty,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Alasan Transfer',
+    },
+    {
+      header: 'Status',
+      cell: (props) => {
+        const isLatestApprovalRejected =
+          props.row.original.approval.action === 'REJECTED';
+        let latestApprovalStepName = props.row.original.approval.step_name;
+
+        let pillBadgeColor: 'yellow' | 'green' | 'gray' | 'red' = 'gray';
+
+        switch (latestApprovalStepName.toLowerCase()) {
+          case 'pengajuan':
+            pillBadgeColor = 'yellow';
+            break;
+
+          case 'disetujui':
+            pillBadgeColor = 'green';
+            break;
+        }
+
+        if (isLatestApprovalRejected) {
+          pillBadgeColor = 'red';
+          latestApprovalStepName = 'Ditolak';
+        }
+
+        return (
+          <PillBadge
+            content={latestApprovalStepName}
+            color={pillBadgeColor}
+            className='text-sm'
+          />
+        );
+      },
+    },
+    {
+      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;
+
+        const approveClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 3 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 3 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const tableEnableRowSelectionHandler: (
+    row: Row<TransferToLaying>
+  ) => boolean = (row) => {
+    return (
+      row.original.approval.action !== 'APPROVED' &&
+      row.original.approval.action !== 'REJECTED'
+    );
+  };
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    try {
+      await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+
+      toast.success('Berhasil menghapus data transfer ke laying!');
+      refreshTransferToLayings();
+    } catch (error) {
+      toast.success('Gagal menghapus data transfer ke laying!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+    }
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+      selectedRowIds,
+      notes
+    );
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshTransferToLayings();
+      approveModal.closeModal();
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+      selectedRowIds,
+      notes
+    );
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshTransferToLayings();
+      rejectModal.closeModal();
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transferDate', e.target.value);
+  };
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedFlockSource(val as OptionType);
+    updateFilter(
+      'flockSource',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedFlockDestination(val as OptionType);
+    updateFilter(
+      'flockDestination',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  // 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='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/production/transfer-to-laying/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{
+                wrapper: 'sm:max-w-3xs',
+              }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={tableEnableRowSelectionHandler}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(transferToLayings) &&
+                transferToLayings?.data?.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',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default TransferToLayingsTable;
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
new file mode 100644
index 00000000..42387992
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
@@ -0,0 +1,235 @@
+import * as Yup from 'yup';
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { formatDate } from '@/lib/helper';
+
+type TransferToLayingFormSchemaType = {
+  transfer_date?: string;
+  flockSource?: {
+    value: number;
+    label: string;
+  };
+  flockDestination?: {
+    value: number;
+    label: string;
+  };
+
+  totalQuantity?: number;
+  maxTotalQuantity?: number; // original cap (hidden), helper
+
+  flockSourceKandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+
+  flockDestinationKandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+
+  reason?: string;
+};
+
+export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
+  Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+
+    flockSource: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock asal wajib diisi!'),
+
+    flockDestination: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock tujuan wajib diisi!'),
+
+    totalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .max(
+        Yup.ref('maxTotalQuantity'),
+        ({ max }) => `Kuantitas maksimal ${max}!`
+      )
+      .required('Jumlah transfer wajib diisi!'),
+
+    maxTotalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .required('Jumlah transfer wajib diisi!'),
+
+    flockSourceKandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    flockDestinationKandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  });
+
+export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
+
+export type TransferToLayingFormValues = Yup.InferType<
+  typeof TransferToLayingFormSchema
+>;
+
+export const getTransferToLayingFormInitialValues = (
+  initialValues?: TransferToLaying
+): TransferToLayingFormValues => {
+  return {
+    transfer_date: initialValues?.transfer_date
+      ? formatDate(initialValues.transfer_date, 'YYYY-MM-DD')
+      : '',
+    flockSource: initialValues?.from_project_flock
+      ? {
+          value: initialValues?.from_project_flock.id,
+          label: initialValues?.from_project_flock.flock_name,
+        }
+      : undefined,
+    flockDestination: initialValues?.to_project_flock
+      ? {
+          value: initialValues?.to_project_flock.id,
+          label: initialValues?.to_project_flock.flock_name,
+        }
+      : undefined,
+    totalQuantity:
+      initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? undefined,
+
+    flockSourceKandangs: initialValues?.sources
+      ? initialValues.sources.map((sourceKandang) => ({
+          kandang: {
+            value: sourceKandang.source_project_flock_kandang.kandang.id,
+            label: sourceKandang.source_project_flock_kandang.kandang.name,
+          },
+          quantity: sourceKandang.qty,
+        }))
+      : [],
+
+    flockDestinationKandangs: initialValues?.targets
+      ? initialValues.targets.map((targetKandang) => ({
+          kandang: {
+            value: targetKandang.target_project_flock_kandang.kandang.id,
+            label: targetKandang.target_project_flock_kandang.kandang.name,
+          },
+          quantity: targetKandang.qty,
+        }))
+      : [],
+
+    reason: initialValues?.notes ?? undefined,
+  };
+};
+
+export const getFilledTransferToLayingFormInitialValues = async (
+  initialValues?: TransferToLaying
+): Promise<TransferToLayingFormValues> => {
+  const mappedFlockSourceKandangsAvailableQty =
+    await TransferToLayingApi.getMappedFlockKandangsAvailability(
+      initialValues?.from_project_flock.id as number
+    );
+
+  const formattedFlockSourceKandangs = initialValues?.sources
+    ? initialValues.sources.map((sourceKandang) => ({
+        kandang: {
+          value: sourceKandang.source_project_flock_kandang.kandang.id,
+          label: sourceKandang.source_project_flock_kandang.kandang.name,
+        },
+        quantity: sourceKandang.qty,
+        maxQuantity:
+          (mappedFlockSourceKandangsAvailableQty &&
+            mappedFlockSourceKandangsAvailableQty[
+              sourceKandang.source_project_flock_kandang.id
+            ].available_qty) ??
+          0,
+      }))
+    : [];
+
+  let maxTotalQuantity = 0;
+  formattedFlockSourceKandangs.forEach((item) => {
+    maxTotalQuantity += item.maxQuantity;
+  });
+
+  return {
+    transfer_date: initialValues?.transfer_date
+      ? formatDate(initialValues.transfer_date, 'YYYY-MM-DD')
+      : '',
+    flockSource: initialValues?.from_project_flock
+      ? {
+          value: initialValues?.from_project_flock.id,
+          label: initialValues?.from_project_flock.flock_name,
+        }
+      : undefined,
+    flockDestination: initialValues?.to_project_flock
+      ? {
+          value: initialValues?.to_project_flock.id,
+          label: initialValues?.to_project_flock.flock_name,
+        }
+      : undefined,
+    totalQuantity:
+      initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? undefined,
+    maxTotalQuantity: maxTotalQuantity,
+
+    flockSourceKandangs: formattedFlockSourceKandangs,
+
+    flockDestinationKandangs: initialValues?.targets
+      ? initialValues.targets.map((targetKandang) => ({
+          kandang: {
+            value: targetKandang.target_project_flock_kandang.kandang.id,
+            label: targetKandang.target_project_flock_kandang.kandang.name,
+          },
+          quantity: targetKandang.qty,
+
+          // maxQuantity:
+          //   targetKandang.target_project_flock_kandang.kandang.capacity,
+
+          // TODO: integrate this to real API kandang capacity
+          maxQuantity: Infinity,
+        }))
+      : [],
+
+    reason: initialValues?.notes ?? undefined,
+  };
+};
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
new file mode 100644
index 00000000..16885062
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -0,0 +1,905 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import DateInput from '@/components/input/DateInput';
+import NumberInput from '@/components/input/NumberInput';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  formatGroupedApprovalsToApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+
+import {
+  getFilledTransferToLayingFormInitialValues,
+  getTransferToLayingFormInitialValues,
+  TransferToLayingFormSchema,
+  TransferToLayingFormValues,
+  UpdateTransferToLayingFormSchema,
+} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { cn } from '@/lib/helper';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { TRANSFER_TO_LAYING_APPROVAL_LINE } from '@/config/approval-line';
+
+interface TransferToLayingFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: TransferToLaying;
+}
+
+const TransferToLayingForm = ({
+  type = 'add',
+  initialValues,
+}: TransferToLayingFormProps) => {
+  const router = useRouter();
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
+    type === 'detail' && initialValues ? [String(initialValues.id)] : null,
+    ([id]: string[]) => TransferToLayingApi.getApprovalHistory(Number(id))
+  );
+
+  const createTransferToLayingHandler = useCallback(
+    async (payload: CreateTransferToLayingPayload) => {
+      const createTransferToLayingRes =
+        await TransferToLayingApi.create(payload);
+
+      if (isResponseError(createTransferToLayingRes)) {
+        setFormErrorMessage(createTransferToLayingRes.message);
+        return;
+      }
+
+      toast.success(createTransferToLayingRes?.message as string);
+      router.push('/production/transfer-to-laying');
+    },
+    [router]
+  );
+
+  const updateTransferToLayingHandler = useCallback(
+    async (
+      transferToLayingId: number,
+      payload: UpdateTransferToLayingPayload
+    ) => {
+      const updateKandangRes = await TransferToLayingApi.update(
+        transferToLayingId,
+        payload
+      );
+
+      if (updateKandangRes?.status === 'error') {
+        setFormErrorMessage(updateKandangRes.message);
+        return;
+      }
+
+      toast.success(updateKandangRes?.message as string);
+      router.refresh();
+      router.push('/production/transfer-to-laying');
+    },
+    [router]
+  );
+
+  // const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+  //   return getTransferToLayingFormInitialValues(initialValues);
+  // }, [initialValues]);
+
+  const [formikInitialValues, setFormikInitialValues] = useState(
+    getTransferToLayingFormInitialValues()
+  );
+
+  const formik = useFormik<TransferToLayingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdateTransferToLayingFormSchema
+        : TransferToLayingFormSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+
+      const transferToLayingPayload: CreateTransferToLayingPayload = {
+        transfer_date: values.transfer_date as string,
+        source_project_flock_id: values.flockSource?.value as number,
+        target_project_flock_id: values.flockDestination?.value as number,
+        totalQuantity: values.totalQuantity as number,
+
+        source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
+          project_flock_kandang_id: kandang.kandang.value,
+          quantity: parseFloat(kandang.quantity as string),
+        })) as CreateTransferToLayingPayload['source_kandangs'],
+
+        target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
+          project_flock_kandang_id: kandang.kandang.value,
+          quantity: parseFloat(kandang.quantity as string),
+        })) as CreateTransferToLayingPayload['target_kandangs'],
+
+        reason: values.reason as string,
+      };
+
+      switch (type) {
+        case 'add':
+          await createTransferToLayingHandler(transferToLayingPayload);
+          break;
+
+        case 'edit':
+          await updateTransferToLayingHandler(
+            initialValues?.id as number,
+            transferToLayingPayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues, values: formikValues } = formik;
+  const {
+    flockSourceKandangs: flockSourceKandangsValue,
+    flockDestinationKandangs: flockDestinationKandangsValue,
+    totalQuantity,
+  } = formikValues;
+
+  const deleteTransferToLayingClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    try {
+      await TransferToLayingApi.delete(initialValues?.id as number);
+
+      toast.success('Berhasil menghapus data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
+    } catch (error) {
+      toast.success('Gagal menghapus data transfer ke laying!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+    }
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await TransferToLayingApi.approve(
+      initialValues?.id as number,
+      notes
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success('Berhasil approve data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
+    } else {
+      approveModal.closeModal();
+
+      toast.error('Gagal approve data transfer ke laying!');
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await TransferToLayingApi.reject(
+      initialValues?.id as number,
+      notes
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success('Berhasil reject data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error('Gagal reject data transfer ke laying!');
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  // flock source
+  const isFlockSourceKandangsRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.flockSourceKandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.flockSourceKandangs?.[idx] instanceof Object &&
+          formik.errors.flockSourceKandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const flockSourceKandangsRepeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.errors.flockSourceKandangs?.[idx] as Record<string, string>
+    )?.[column];
+  };
+
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+    rawData: flockSources,
+  } = useSelect<ProjectFlock>(
+    '/production/project-flocks',
+    'id',
+    'flock_name',
+    'search',
+    {
+      category: 'GROWING',
+    }
+  );
+
+  const flockSourceChangeHandler = async (
+    val: OptionType | OptionType[] | null
+  ) => {
+    // Get flock source data for total quantity and kandang
+    const flockSource =
+      isResponseSuccess(flockSources) && val !== null
+        ? flockSources.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockSource) {
+      const mappedFlockKandangsAvailableQty =
+        await TransferToLayingApi.getMappedFlockKandangsAvailability(
+          flockSource.id
+        );
+
+      const formattedKandangs = flockSource.kandangs.map((item) => ({
+        kandang: {
+          value: item.project_flock_kandang_id,
+          label: item.name,
+        },
+        quantity: '',
+        maxQuantity:
+          (mappedFlockKandangsAvailableQty &&
+            mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]
+              .available_qty) ??
+          0,
+      }));
+
+      let maxTotalQuantity = 0;
+      // flockSource.kandangs.forEach((item) => {
+      //   maxTotalQuantity += item.capacity;
+      // });
+      formattedKandangs.forEach((item) => {
+        maxTotalQuantity += item.maxQuantity;
+      });
+
+      formik.setFieldValue('totalQuantity', '');
+      formik.setFieldValue('maxTotalQuantity', maxTotalQuantity);
+      formik.setFieldValue('flockSourceKandangs', formattedKandangs);
+    } else {
+      formik.setFieldValue('totalQuantity', undefined);
+      formik.setFieldValue('flockSourceKandangs', undefined);
+      formik.setFieldValue('reason', '');
+    }
+
+    formik.setFieldTouched('flockSource', true);
+    formik.setFieldValue('flockSource', val);
+  };
+
+  // flock destination
+  const isFlockDestinationKandangsRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.flockDestinationKandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.flockDestinationKandangs?.[idx] instanceof Object &&
+          formik.errors.flockDestinationKandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const flockDestinationKandangsRepeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.errors.flockDestinationKandangs?.[idx] as Record<string, string>
+    )?.[column];
+  };
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+    rawData: flockDestinations,
+  } = useSelect<ProjectFlock>(
+    '/production/project-flocks',
+    'id',
+    'flock_name',
+    'search',
+    {
+      category: 'LAYING',
+    }
+  );
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    // Get flock destination data for total quantity and kandang
+    const flockDestination =
+      isResponseSuccess(flockDestinations) && val !== null
+        ? flockDestinations.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockDestination) {
+      const formattedKandangs = flockDestination.kandangs.map((item) => ({
+        kandang: {
+          value: item.project_flock_kandang_id,
+          label: item.name,
+        },
+        quantity: '',
+
+        // TODO: integrate this later to real kandang capacity API
+        // maxQuantity: item.capacity ?? 0,
+        maxQuantity: item.capacity ?? Infinity,
+      }));
+
+      formik.setFieldValue('flockDestinationKandangs', formattedKandangs);
+    }
+
+    formik.setFieldTouched('flockDestination', true);
+    formik.setFieldValue('flockDestination', val);
+  };
+
+  const isShowApproveRejectButton =
+    initialValues &&
+    initialValues?.approval?.step_number === 1 &&
+    initialValues?.approval.action !== 'REJECTED';
+
+  const isShowDeleteButton =
+    initialValues &&
+    initialValues?.approval.action !== 'REJECTED' &&
+    initialValues?.approval.action !== 'APPROVED';
+
+  const isShowEditButton = isShowDeleteButton;
+
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (initialValues) {
+        const filledInitialValues =
+          await getFilledTransferToLayingFormInitialValues(initialValues);
+
+        setFormikInitialValues(filledInitialValues);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [initialValues, setFormikInitialValues]);
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (flockSourceKandangsValue && flockSourceKandangsValue.length > 0) {
+      let newTotalQuantity = 0;
+
+      flockSourceKandangsValue.forEach((item) => {
+        newTotalQuantity += parseFloat(item.quantity as string);
+      });
+
+      formik.setFieldValue('totalQuantity', newTotalQuantity);
+      formik.validateField('totalQuantity');
+    }
+  }, [formikSetValues, flockSourceKandangsValue]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (
+      flockDestinationKandangsValue &&
+      flockDestinationKandangsValue.length > 0
+    ) {
+      let destinationKandangsTotalQuantity = 0;
+
+      flockDestinationKandangsValue.forEach((item) => {
+        destinationKandangsTotalQuantity += parseFloat(item.quantity as string);
+      });
+
+      if (
+        destinationKandangsTotalQuantity > parseFloat(String(totalQuantity))
+      ) {
+      }
+    }
+  }, [formikSetValues, flockDestinationKandangsValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-3xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/transfer-to-laying'
+            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'>
+            {type === 'add' && 'Tambah Transfer ke Laying'}
+            {type === 'edit' && 'Edit Transfer ke Laying'}
+            {type === 'detail' && 'Detail Transfer ke Laying'}
+          </h1>
+        </header>
+
+        {type === 'detail' &&
+          initialValues &&
+          !isLoadingApprovalHistory &&
+          isResponseSuccess(approvalHistory) && (
+            <div className='w-full my-4'>
+              <ApprovalSteps
+                approvals={formatGroupedApprovalsToApprovalSteps(
+                  TRANSFER_TO_LAYING_APPROVAL_LINE,
+                  approvalHistory.data,
+                  initialValues.approval
+                )}
+              />
+            </div>
+          )}
+
+        <div className='w-full my-4 flex flex-row justify-between gap-2'>
+          {type === 'detail' && (
+            <>
+              {isShowApproveRejectButton && (
+                <div className='w-full flex flex-row justify-end gap-2'>
+                  {/* TODO: apply RBAC */}
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={approveClickHandler}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={rejectClickHandler}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <DateInput
+              required
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={formik.values.transfer_date ?? ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transfer_date &&
+                Boolean(formik.errors.transfer_date)
+              }
+              errorMessage={formik.errors.transfer_date}
+              readOnly={type === 'detail'}
+            />
+
+            <div className='flex flex-col sm:flex-row gap-4'>
+              <SelectInput
+                required
+                label='Flock Asal'
+                placeholder='Flock asal'
+                value={formik.values.flockSource as OptionType}
+                options={flockSourceOptions}
+                onChange={flockSourceChangeHandler}
+                isLoading={isLoadingFlockSourceOptions}
+                onInputChange={setFlockSourceInputValue}
+                isError={
+                  formik.touched.flockSource &&
+                  Boolean(typeof formik.errors.flockSource === 'string')
+                }
+                errorMessage={formik.errors.flockSource as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <SelectInput
+                required
+                label='Flock Tujuan'
+                placeholder='Flock tujuan'
+                value={formik.values.flockDestination as OptionType}
+                options={flockDestinationOptions}
+                onChange={flockDestinationChangeHandler}
+                isLoading={isLoadingFlockDestinationOptions}
+                onInputChange={setFlockDestinationInputValue}
+                isError={
+                  formik.touched.flockDestination &&
+                  Boolean(typeof formik.errors.flockDestination === 'string')
+                }
+                errorMessage={formik.errors.flockDestination as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+
+            <NumberInput
+              required
+              name='totalQuantity'
+              label='Jumlah Transfer'
+              bottomLabel={
+                formikValues.maxTotalQuantity
+                  ? `Max: ${formikValues.maxTotalQuantity}`
+                  : undefined
+              }
+              placeholder='Masukkan jumlah transfer'
+              value={
+                formik.values.totalQuantity ? formik.values.totalQuantity : ''
+              }
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.totalQuantity &&
+                Boolean(formik.errors.totalQuantity)
+              }
+              errorMessage={formik.errors.totalQuantity}
+              disabled
+            />
+
+            <div className='flex flex-col gap-4'>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang Flock Asal</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.flockSourceKandangs ||
+                      formik.values.flockSourceKandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock asal terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.flockSourceKandangs &&
+                      formik.values.flockSourceKandangs.map((kandang, idx) => (
+                        <tr key={idx}>
+                          <td>
+                            <SelectInput
+                              value={kandang.kandang}
+                              options={[]}
+                              isDisabled
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
+                            />
+                          </td>
+
+                          <td>
+                            <NumberInput
+                              required
+                              name={`flockSourceKandangs[${idx}].quantity`}
+                              bottomLabel={
+                                kandang.maxQuantity
+                                  ? `Max: ${kandang.maxQuantity}`
+                                  : undefined
+                              }
+                              placeholder='Masukkan kuantitas'
+                              value={kandang.quantity}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={isFlockSourceKandangsRepeaterInputError(
+                                'quantity',
+                                idx
+                              )}
+                              errorMessage={flockSourceKandangsRepeaterInputErrorMessage(
+                                'quantity',
+                                idx
+                              )}
+                              readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang Flock Tujuan</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.flockDestinationKandangs ||
+                      formik.values.flockDestinationKandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock tujuan terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.flockDestinationKandangs &&
+                      formik.values.flockDestinationKandangs.map(
+                        (kandang, idx) => (
+                          <tr key={idx}>
+                            <td>
+                              <SelectInput
+                                value={kandang.kandang}
+                                options={[]}
+                                isDisabled
+                                className={{
+                                  wrapper: 'min-w-52',
+                                }}
+                              />
+                            </td>
+
+                            <td>
+                              <NumberInput
+                                required
+                                name={`flockDestinationKandangs[${idx}].quantity`}
+                                bottomLabel={
+                                  kandang.maxQuantity
+                                    ? `Max: ${kandang.maxQuantity}`
+                                    : undefined
+                                }
+                                placeholder='Masukkan kuantitas'
+                                value={kandang.quantity}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                isError={isFlockDestinationKandangsRepeaterInputError(
+                                  'quantity',
+                                  idx
+                                )}
+                                errorMessage={flockDestinationKandangsRepeaterInputErrorMessage(
+                                  'quantity',
+                                  idx
+                                )}
+                                readOnly={type === 'detail'}
+                                className={{
+                                  wrapper: 'min-w-52',
+                                }}
+                              />
+                            </td>
+                          </tr>
+                        )
+                      )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <TextArea
+              required
+              rows={5}
+              name='reason'
+              label='Alasan Transfer'
+              placeholder='Alasan transfer'
+              value={formik.values.reason}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.reason && Boolean(formik.errors.reason)}
+              errorMessage={formik.errors.reason}
+              readOnly={type === 'detail'}
+              disabled={Boolean(formik.errors.flockSource)}
+            />
+          </div>
+
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error w-full'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                {isShowDeleteButton && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={deleteTransferToLayingClickHandler}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Delete
+                  </Button>
+                )}
+
+                {type !== 'edit' && isShowEditButton && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModalWithNotes
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              isLoading: isApproveLoading,
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModalWithNotes
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isRejectLoading,
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default TransferToLayingForm;
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
new file mode 100644
index 00000000..a77e1158
--- /dev/null
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -0,0 +1,325 @@
+'use client';
+
+import { ChangeEventHandler, useCallback, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Purchase } from '@/types/api/purchase/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
+
+// ===== INTERFACES =====
+interface RowOptionsMenuProps {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Purchase, unknown>;
+  deleteClickHandler: () => void;
+}
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: RowOptionsMenuProps) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <Button
+        href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      {/*<Button*/}
+      {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
+      {/*  variant='ghost'*/}
+      {/*  color='warning'*/}
+      {/*  className='justify-start text-sm'*/}
+      {/*>*/}
+      {/*  <Icon icon='material-symbols:edit-outline' width={16} height={16} />*/}
+      {/*  Edit*/}
+      {/*</Button>*/}
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const PurchaseTable = () => {
+  // ===== STATE MANAGEMENT =====
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
+    null
+  );
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  // ===== TABLE FILTER STATE =====
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  // ===== MODAL HOOKS =====
+  const deleteModal = useModal();
+
+  // ===== API DATA FETCHING =====
+  const {
+    data: purchaseRequests,
+    isLoading,
+    mutate: refreshPurchaseRequests,
+  } = useSWR(
+    `${PurchaseApi.basePath}${getTableFilterQueryString()}`,
+    PurchaseApi.getAllFetcher
+  );
+
+  // ===== TABLE COLUMNS DEFINITION =====
+  const purchaseColumns: ColumnDef<Purchase>[] = [
+    {
+      header: 'No. PR/PO',
+      cell: (props) => {
+        const { pr_number, po_number } = props.row.original;
+        return po_number ? po_number : pr_number;
+      },
+    },
+    {
+      accessorKey: 'supplier',
+      header: 'Vendor',
+      cell: (props) => props.row.original.supplier.name,
+    },
+    {
+      accessorKey: 'po_date',
+      header: 'Tgl. PO',
+      cell: (props) =>
+        props.row.original.po_date
+          ? formatDate(props.row.original.po_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      header: 'Aging',
+      cell: (props) => {
+        const purchase = props.row.original;
+        if (!purchase.po_date) return '-';
+        const poDate = new Date(purchase.po_date);
+        const today = new Date();
+        const diffTime = Math.abs(today.getTime() - poDate.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        return `${diffDays} hari`;
+      },
+    },
+    {
+      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 - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedPurchase(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // ===== EVENT HANDLERS =====
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    setIsDeleteLoading(true);
+
+    try {
+      await PurchaseApi.delete(selectedPurchase?.id as number);
+      refreshPurchaseRequests();
+      deleteModal.closeModal();
+      toast.success('Berhasil menghapus data permintaan pembelian!');
+    } catch {
+      toast.error('Gagal menghapus data permintaan pembelian!');
+    }
+
+    setIsDeleteLoading(false);
+  }, [selectedPurchase?.id, refreshPurchaseRequests, deleteModal]);
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      updateFilter('search', e.target.value);
+    },
+    [updateFilter]
+  );
+
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+    },
+    [setPageSize]
+  );
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'>
+              <Button
+                href='/purchase/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Pembelian'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{
+                wrapper: 'sm:max-w-3xs',
+              }}
+            />
+          </div>
+
+          <div className='flex flex-wrap justify-end gap-4'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper: 'w-full sm:w-24',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<Purchase>
+          data={
+            isResponseSuccess(purchaseRequests) ? purchaseRequests?.data : []
+          }
+          columns={purchaseColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(purchaseRequests)
+              ? purchaseRequests?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(purchaseRequests)
+              ? purchaseRequests?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(purchaseRequests) &&
+                purchaseRequests?.data?.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',
+          }}
+        />
+      </div>
+
+      {/* ===== MODAL COMPONENTS ===== */}
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data permintaan pembelian ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default PurchaseTable;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
new file mode 100644
index 00000000..15106c5e
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -0,0 +1,701 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { useRouter } from 'next/navigation';
+
+import {
+  PurchaseRequestAcceptApprovalFormDefaultValues,
+  PurchaseRequestAcceptApprovalFormInitialValues,
+  PurchaseRequestAcceptApprovalFormSchema,
+} from '@/components/pages/purchase/form/order/PurchaseOrderForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import { PurchaseApi } from '@/services/api/purchase';
+import {
+  CreateAcceptApprovalRequestPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+import DateInput from '@/components/input/DateInput';
+import { formatNumber } from '@/lib/helper';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { SupplierApi } from '@/services/api/master-data';
+
+interface PurchaseOrderAcceptApprovalFormProps {
+  type?: 'add' | 'edit';
+  initialValues?: Purchase;
+  onCancel?: () => void;
+  refreshApprovals?: () => void;
+  onModalClose?: () => void;
+  onRefetchData?: () => void;
+}
+
+const PurchaseOrderAcceptApprovalForm = ({
+  type = 'add',
+  initialValues,
+  onCancel,
+  refreshApprovals,
+  onModalClose,
+  onRefetchData,
+}: PurchaseOrderAcceptApprovalFormProps) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
+    useState('');
+
+  const isRejected = initialValues?.latest_approval?.action === 'REJECTED';
+
+  // ===== UTILITY FUNCTIONS =====
+  const isRepeaterInputError = (
+    idx: number,
+    field:
+      | 'purchase_item_id'
+      | 'received_date'
+      | 'travel_number'
+      | 'travel_document_path'
+      | 'vehicle_number'
+      | 'expedition_vendor_id'
+      | 'received_qty'
+      | 'transport_per_item'
+  ): { isError: boolean; errorMessage: string } => {
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    if (!touchedItem) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
+    const errorMessage = errorItem?.[field] || '';
+
+    return {
+      isError: Boolean(isTouched && errorMessage),
+      errorMessage: isTouched && errorMessage ? errorMessage : '',
+    };
+  };
+
+  // ===== SUBMISSION HANDLERS =====
+  const createAcceptApprovalHandler = useCallback(
+    async (payload: CreateAcceptApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.acceptApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      formik.resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+    ]
+  );
+
+  const updateAcceptApprovalHandler = useCallback(
+    async (purchaseId: number, payload: CreateAcceptApprovalRequestPayload) => {
+      const res = await PurchaseApi.acceptApproval.create(purchaseId, payload);
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      formik.resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [refreshApprovals, onModalClose, onRefetchData]
+  );
+
+  // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setExpeditionsSelectInputValue,
+    options: expeditionVendors,
+    isLoadingOptions: isLoadingExpeditions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'BOP',
+  });
+
+  // ===== FORM CONFIGURATION =====
+  const formikInitialValues = useMemo(() => {
+    return initialValues
+      ? PurchaseRequestAcceptApprovalFormDefaultValues(initialValues)
+      : PurchaseRequestAcceptApprovalFormInitialValues;
+  }, [initialValues]);
+
+  const formik = useFormik({
+    initialValues: formikInitialValues,
+    validationSchema: PurchaseRequestAcceptApprovalFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload: CreateAcceptApprovalRequestPayload = {
+        action: 'APPROVED',
+        notes: values.notes || '',
+        items:
+          values.items?.map((formItem) => {
+            return {
+              purchase_item_id: formItem.purchase_item_id || 0,
+              received_date: formItem.received_date || '',
+              travel_number: formItem.travel_number || '',
+              travel_document_path: formItem.travel_document_path || '',
+              vehicle_number: formItem.vehicle_number || '',
+              expedition_vendor_id: formItem.expedition_vendor_id || 0,
+              received_qty:
+                typeof formItem.received_qty === 'string'
+                  ? parseFloat(formItem.received_qty) || 0
+                  : formItem.received_qty || 0,
+              transport_per_item:
+                typeof formItem.transport_per_item === 'string'
+                  ? parseFloat(formItem.transport_per_item) || 0
+                  : formItem.transport_per_item || 0,
+            };
+          }) || [],
+      };
+
+      switch (type) {
+        case 'add':
+          await createAcceptApprovalHandler(payload);
+          break;
+        case 'edit':
+          await updateAcceptApprovalHandler(
+            initialValues?.id as number,
+            payload
+          );
+          break;
+      }
+    },
+  });
+
+  // ===== API DATA FETCHING =====
+  const purchaseItems = useMemo(() => {
+    if (initialValues?.items) {
+      return initialValues.items.map((item) => ({
+        value: item.id,
+        label: item.product.name,
+        id: item.id,
+        quantity: item.sub_qty,
+        product: {
+          name: item.product.name,
+          product_category: item.product.product_category || '',
+          uom: item.product.uom || { name: '' },
+        },
+        warehouse: {
+          name: item.warehouse?.name || '',
+        },
+      }));
+    }
+
+    return [];
+  }, [initialValues?.items]);
+
+  useEffect(() => {
+    if (purchaseItems.length > 0 && initialValues?.items) {
+      const updatedItems = initialValues.items.map((item) => {
+        return {
+          purchase_item: null,
+          purchase_item_id: item.id,
+          received_date: item.received_date
+            ? new Date(item.received_date).toISOString().split('T')[0]
+            : '',
+          travel_number: item.travel_number || '',
+          travel_document_path: item.travel_document_path || '',
+          vehicle_number: item.vehicle_number || '',
+          expedition_vendor: null,
+          expedition_vendor_id: 0,
+          received_qty: item.total_qty || '',
+          transport_per_item: '',
+        };
+      });
+      formik.setFieldValue('items', updatedItems);
+    }
+  }, [purchaseItems, initialValues]);
+
+  // ===== HELPER FUNCTIONS =====
+  const getQuantityExceededError = useCallback(
+    (idx: number, receivedQty: number) => {
+      if (!receivedQty) return null;
+
+      const originalQty = purchaseItems[idx]?.quantity || 0;
+      if (receivedQty > originalQty) {
+        return `Tidak boleh melebihi ${formatNumber(originalQty)}`;
+      }
+
+      return null;
+    },
+    [purchaseItems]
+  );
+
+  const hasQuantityExceededErrors = useMemo(() => {
+    if (!formik.values.items || purchaseItems.length === 0) return false;
+
+    return formik.values.items.some((item, idx) => {
+      if (!item.received_qty) return false;
+
+      const receivedQty =
+        typeof item.received_qty === 'string'
+          ? parseFloat(item.received_qty) || 0
+          : item.received_qty;
+
+      const originalQty = purchaseItems[idx]?.quantity || 0;
+      return receivedQty > originalQty;
+    });
+  }, [formik.values.items, purchaseItems]);
+
+  const getExpeditionVendorOptions = useCallback(() => {
+    return expeditionVendors;
+  }, [expeditionVendors]);
+
+  // ===== FIELD CHANGE HANDLERS =====
+  const expeditionVendorChangeHandler = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const expeditionVendor = val as OptionType | null;
+    formik.setFieldTouched(`items.${idx}.expedition_vendor`, true);
+    formik.setFieldValue(`items.${idx}.expedition_vendor`, expeditionVendor);
+    formik.setFieldTouched(`items.${idx}.expedition_vendor_id`, true);
+    formik.setFieldValue(
+      `items.${idx}.expedition_vendor_id`,
+      expeditionVendor?.value || 0
+    );
+  };
+
+  // ===== PURCHASE ITEM OPERATIONS =====
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: 'received_qty' | 'transport_per_item',
+    value: string | number
+  ) => {
+    const numValue = typeof value === 'string' ? parseFloat(value) || 0 : value;
+    formik.setFieldValue(`items.${idx}.${field}`, numValue);
+
+    if (field === 'received_qty' || field === 'transport_per_item') {
+      const receivedQty =
+        field === 'received_qty'
+          ? numValue
+          : parseFloat(formik.values.items?.[idx]?.received_qty as string) || 0;
+      const transportPerItem =
+        field === 'transport_per_item'
+          ? numValue
+          : parseFloat(
+              formik.values.items?.[idx]?.transport_per_item as string
+            ) || 0;
+    }
+  };
+
+  return (
+    <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
+      <div className='w-full'>
+        <h2 className='text-lg font-semibold mb-4'>
+          {type === 'add'
+            ? 'Konfirmasi Penerimaan Produk'
+            : 'Edit Penerimaan Produk'}
+        </h2>
+
+        <div className='overflow-x-auto'>
+          <table className='table'>
+            <thead>
+              <tr>
+                <th>Produk</th>
+                <th>Gudang</th>
+                <th>Jumlah</th>
+                <th>Satuan</th>
+                <th>
+                  Tanggal Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  No. Surat Jalan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Dokumen Surat Jalan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Kendaraan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Vendor Ekspedisi
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Jumlah Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Transport/Item
+                  <span className='text-error'>*</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {purchaseItems?.map((purchaseItem, idx) => {
+                const formItem = formik.values.items?.[idx];
+                return (
+                  <tr key={`purchase-item-${idx}`}>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.product_name`}
+                        type='text'
+                        value={purchaseItem?.product?.name || ''}
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                        disabled={true}
+                      />
+                      <input
+                        type='hidden'
+                        name={`items.${idx}.purchase_item_id`}
+                        value={purchaseItem?.value || 0}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.warehouse`}
+                        type='text'
+                        value={purchaseItem?.warehouse?.name || ''}
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.quantity`}
+                        type='text'
+                        value={
+                          purchaseItem?.quantity
+                            ? formatNumber(purchaseItem.quantity)
+                            : ''
+                        }
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.uom`}
+                        type='text'
+                        value={purchaseItem?.product?.uom?.name || ''}
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <DateInput
+                        required
+                        isNestedModal={true}
+                        name={`items.${idx}.received_date`}
+                        value={formItem?.received_date || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.received_date`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError(idx, 'received_date').isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'received_date')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_number`}
+                        type='text'
+                        value={formItem?.travel_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError(idx, 'travel_number').isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'travel_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan no. surat jalan'
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_document_path`}
+                        type='text'
+                        value={formItem?.travel_document_path || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_document_path`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError(idx, 'travel_document_path')
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'travel_document_path')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan path dokumen'
+                        className={{
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.vehicle_number`}
+                        type='text'
+                        value={formItem?.vehicle_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.vehicle_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError(idx, 'vehicle_number').isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'vehicle_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor kendaraan'
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={formItem?.expedition_vendor}
+                        key={`expedition-vendor-${idx}`}
+                        onChange={(val) =>
+                          expeditionVendorChangeHandler(idx, val)
+                        }
+                        options={getExpeditionVendorOptions()}
+                        isError={
+                          isRepeaterInputError(idx, 'expedition_vendor_id')
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'expedition_vendor_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Vendor...'
+                        className={{
+                          wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.received_qty`}
+                        value={formItem?.received_qty || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'received_qty',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan jumlah diterima'
+                        allowNegative={false}
+                        decimalScale={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        bottomLabel={`Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`}
+                        isError={
+                          isRepeaterInputError(idx, 'received_qty').isError ||
+                          (formItem?.received_qty
+                            ? getQuantityExceededError(
+                                idx,
+                                Number(formItem.received_qty)
+                              ) !== null
+                            : false)
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'received_qty')
+                            .errorMessage ||
+                          (formItem?.received_qty
+                            ? getQuantityExceededError(
+                                idx,
+                                Number(formItem.received_qty)
+                              ) || undefined
+                            : undefined)
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_per_item`}
+                        value={formItem?.transport_per_item || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_per_item',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan transport/item'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          isRepeaterInputError(idx, 'transport_per_item')
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(idx, 'transport_per_item')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        <div className={'col-span-2'}>
+          <TextInput
+            label='Notes'
+            name='notes'
+            value={formik.values.notes || ''}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes as string}
+            placeholder='Masukkan catatan'
+          />
+        </div>
+
+        {/* Action buttons */}
+        <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+          <div className='flex flex-row justify-end gap-2 w-full'>
+            <Button
+              type='button'
+              color='warning'
+              className='px-4'
+              onClick={() => {
+                formik.resetForm();
+                setPurchaseOrderFormErrorMessage('');
+                onCancel?.();
+                onModalClose?.();
+              }}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              type='submit'
+              color='primary'
+              className='px-4'
+              isLoading={formik.isSubmitting}
+              disabled={
+                !formik.isValid ||
+                formik.isSubmitting ||
+                hasQuantityExceededErrors ||
+                isRejected
+              }
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+
+        {purchaseOrderFormErrorMessage && (
+          <div role='alert' className='alert alert-error'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{purchaseOrderFormErrorMessage}</span>
+          </div>
+        )}
+      </div>
+    </form>
+  );
+};
+
+export default PurchaseOrderAcceptApprovalForm;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
new file mode 100644
index 00000000..c7da956d
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -0,0 +1,444 @@
+import * as Yup from 'yup';
+import { Purchase } from '@/types/api/purchase/purchase';
+
+type PurchaseRequestStaffApprovalFormSchemaType = {
+  action: 'APPROVED' | 'REJECTED';
+  notes: string | null;
+  items: {
+    purchase_item_id?: number;
+    product_id?: number | null;
+    warehouse_id?: number | null;
+    product?: {
+      value?: number;
+      label?: string;
+    } | null;
+    warehouse?: {
+      value?: number;
+      label?: string;
+    } | null;
+    qty: number;
+    price: number | string;
+    total_price: number | string;
+  }[];
+};
+
+type PurchaseRequestManagerApprovalFormSchemaType = {
+  action: 'APPROVED' | 'REJECTED';
+  notes: string | null;
+};
+
+type PurchaseRequestAcceptApprovalFormSchemaType = {
+  action: 'APPROVED' | 'REJECTED';
+  notes: string | null;
+  items: {
+    purchase_item?: {
+      value: number;
+      label: string;
+    } | null;
+    purchase_item_id: number;
+    received_date: string;
+    travel_number: string;
+    travel_document_path: string;
+    vehicle_number: string;
+    expedition_vendor?: {
+      value: number;
+      label: string;
+    } | null;
+    expedition_vendor_id: number;
+    received_qty: number | string;
+    transport_per_item: number | string;
+  }[];
+};
+
+export type PurchaseStaffApprovalItemSchema = {
+  purchase_item_id?: number;
+  product_id?: number | null;
+  warehouse_id?: number | null;
+  product?: {
+    value?: number;
+    label?: string;
+  } | null;
+  warehouse?: {
+    value?: number;
+    label?: string;
+  } | null;
+  qty: number;
+  price: number | string;
+  total_price: number | string;
+};
+
+export type PurchaseAcceptApprovalItemSchema = {
+  purchase_item?: {
+    value: number;
+    label: string;
+  } | null;
+  purchase_item_id: number;
+  received_date: string;
+  travel_number: string;
+  travel_document_path: string;
+  vehicle_number: string;
+  expedition_vendor?: {
+    value: number;
+    label: string;
+  } | null;
+  expedition_vendor_id: number;
+  received_qty: number | string;
+  transport_per_item: number | string;
+};
+
+export type PurchaseDeleteItemsSchema = {
+  item_ids: number[];
+};
+
+const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
+  Yup.object({
+    purchase_item_id: Yup.number()
+      .optional()
+      .min(0, 'Purchase item ID tidak valid!')
+      .typeError('Purchase item ID harus berupa angka!'),
+    product: Yup.object({
+      value: Yup.number(),
+      label: Yup.string(),
+    })
+      .nullable()
+      .optional(),
+    product_id: Yup.number()
+      .optional()
+      .nullable()
+      .typeError('Product ID harus berupa angka!'),
+    warehouse: Yup.object({
+      value: Yup.number(),
+      label: Yup.string(),
+    })
+      .nullable()
+      .optional(),
+    warehouse_id: Yup.number()
+      .optional()
+      .nullable()
+      .typeError('Warehouse ID harus berupa angka!'),
+    qty: Yup.number()
+      .required('Jumlah wajib diisi!')
+      .min(1, 'Jumlah harus berupa angka lebih dari 0!')
+      .typeError('Jumlah harus berupa angka lebih dari 0!'),
+    price: Yup.mixed<number | string>()
+      .required('Harga wajib diisi!')
+      .test(
+        'is-valid-price',
+        'Harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Harga harus berupa angka!'),
+    total_price: Yup.mixed<number | string>()
+      .required('Total harga wajib diisi!')
+      .test(
+        'is-valid-total-price',
+        'Total harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Total harga harus berupa angka!'),
+  });
+
+const PurchaseManagerApprovalObjectSchema: Yup.ObjectSchema<PurchaseRequestManagerApprovalFormSchemaType> =
+  Yup.object({
+    action: Yup.mixed<'APPROVED' | 'REJECTED'>()
+      .oneOf(['APPROVED', 'REJECTED'], 'Action harus APPROVED atau REJECTED')
+      .required('Action wajib diisi!')
+      .default('APPROVED'),
+    notes: Yup.string().nullable().default(null),
+  });
+
+const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApprovalItemSchema> =
+  Yup.object({
+    purchase_item: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    })
+      .nullable()
+      .optional(),
+    purchase_item_id: Yup.number()
+      .min(1, 'Purchase item is required!')
+      .required('Purchase item is required!')
+      .typeError('Purchase item is required!')
+      .test(
+        'is-valid-purchase-item',
+        'Purchase item must be selected!',
+        function (value) {
+          return Boolean(value && value > 0);
+        }
+      ),
+    received_date: Yup.string()
+      .required('Tanggal penerimaan wajib diisi!')
+      .typeError('Tanggal penerimaan wajib diisi!'),
+    travel_number: Yup.string()
+      .required('No. Surat jalan wajib diisi!')
+      .typeError('No. Surat jalan wajib diisi!'),
+    travel_document_path: Yup.string()
+      .required('Dokumen Surat jalan wajib diisi!')
+      .typeError('Dokumen Surat jalan wajib diisi!'),
+    vehicle_number: Yup.string()
+      .required('Nomor kendaraan wajib diisi!')
+      .typeError('Nomor kendaraan wajib diisi!'),
+    expedition_vendor: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    expedition_vendor_id: Yup.number()
+      .min(1, 'Vendor ekspedisi wajib diisi!')
+      .required('Vendor ekspedisi wajib diisi!')
+      .test(
+        'is-valid-expedition-vendor',
+        'Vendor ekspedisi harus dipilih!',
+        function (value) {
+          if (!this.parent.expedition_vendor) return true;
+          return Boolean(value && value > 0);
+        }
+      )
+      .typeError('Vendor ekspedisi harus dipilih!'),
+    received_qty: Yup.mixed<string | number>()
+      .required('Jumlah diterima wajib diisi!')
+      .test(
+        'is-valid-received-qty',
+        'Harus berupa angka lebih dari 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue > 0;
+        }
+      )
+      .typeError('Jumlah diterima harus berupa angka!'),
+    transport_per_item: Yup.mixed<string | number>()
+      .required('Biaya transport per item wajib diisi!')
+      .test(
+        'is-valid-transport-per-item',
+        'Biaya transport per item harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Biaya transport per item harus berupa angka!'),
+  });
+
+export const PurchaseRequestStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestStaffApprovalFormSchemaType> =
+  Yup.object({
+    action: Yup.mixed<'APPROVED' | 'REJECTED'>()
+      .oneOf(['APPROVED', 'REJECTED'], 'Action harus APPROVED atau REJECTED')
+      .required('Action wajib diisi!')
+      .default('APPROVED'),
+    notes: Yup.string().nullable().default(null),
+    items: Yup.array()
+      .of(PurchaseStaffApprovalItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!')
+      .test(
+        'items-validation',
+        'Setiap item harus valid: existing items hanya butuh purchase_item_id, new items butuh product_id & warehouse_id',
+        function (items) {
+          if (!items || items.length === 0) return false;
+
+          return items.every((item) => {
+            const isExisting =
+              item.purchase_item_id && item.purchase_item_id > 0;
+
+            const isNew = !item.purchase_item_id || item.purchase_item_id === 0;
+
+            if (isExisting) {
+              return true;
+            }
+
+            if (isNew) {
+              return Boolean(
+                item.product_id &&
+                  item.product_id > 0 &&
+                  item.warehouse_id &&
+                  item.warehouse_id > 0
+              );
+            }
+
+            return false;
+          });
+        }
+      ),
+  });
+
+export const PurchaseDeleteItemsSchema: Yup.ObjectSchema<PurchaseDeleteItemsSchema> =
+  Yup.object({
+    item_ids: Yup.array()
+      .of(
+        Yup.number()
+          .min(1, 'Item ID tidak valid!')
+          .required('Item ID tidak valid!')
+          .typeError('Item ID tidak valid!')
+      )
+      .min(1, 'Minimal harus ada 1 item yang dihapus!')
+      .required('Item yang dihapus wajib diisi!')
+      .typeError('Item yang dihapus wajib diisi!'),
+  });
+
+export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaffApprovalFormSchemaType =
+  {
+    action: 'APPROVED',
+    notes: '',
+    items: [
+      {
+        product_id: 0,
+        warehouse_id: 0,
+        product: null,
+        warehouse: null,
+        qty: 0,
+        price: '',
+        total_price: '',
+      },
+    ],
+  };
+
+export const PurchaseRequestStaffApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequestStaffApprovalFormSchemaType => {
+  return {
+    action: 'APPROVED',
+    notes: purchase?.notes ?? null,
+    items: purchase?.items
+      ? purchase.items.map((item) => ({
+          purchase_item_id: item.id,
+          product_id: item.product_id || 0,
+          warehouse_id: item.warehouse?.id || 0,
+          product: {
+            value: item.product_id || 0,
+            label: item.product?.name || '',
+          },
+          warehouse: {
+            value: item.warehouse?.id || 0,
+            label: item.warehouse?.name || '',
+          },
+          qty: item.sub_qty || item.qty || 0,
+          price: item.price,
+          total_price: item.total_price,
+        }))
+      : [
+          {
+            product_id: 0,
+            warehouse_id: 0,
+            product: null,
+            warehouse: null,
+            qty: 0,
+            price: '',
+            total_price: '',
+          },
+        ],
+  };
+};
+
+export type PurchaseRequestStaffApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestStaffApprovalFormSchema
+>;
+
+export const PurchaseRequestManagerApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestManagerApprovalFormSchemaType> =
+  PurchaseManagerApprovalObjectSchema;
+
+export const PurchaseRequestManagerApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequestManagerApprovalFormSchemaType => {
+  return {
+    action: 'APPROVED',
+    notes: purchase?.notes ?? null,
+  };
+};
+
+export type PurchaseRequestManagerApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestManagerApprovalFormSchema
+>;
+
+export const PurchaseRequestAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestAcceptApprovalFormSchemaType> =
+  Yup.object({
+    action: Yup.mixed<'APPROVED' | 'REJECTED'>()
+      .oneOf(['APPROVED', 'REJECTED'], 'Action harus APPROVED atau REJECTED')
+      .required('Action wajib diisi!')
+      .default('APPROVED'),
+    notes: Yup.string().nullable().default(null),
+    items: Yup.array()
+      .of(PurchaseAcceptApprovalItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!'),
+  });
+
+export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcceptApprovalFormSchemaType =
+  {
+    action: 'APPROVED',
+    notes: '',
+    items: [
+      {
+        purchase_item_id: 0,
+        received_date: '',
+        travel_number: '',
+        travel_document_path: '',
+        vehicle_number: '',
+        expedition_vendor_id: 0,
+        received_qty: '',
+        transport_per_item: '',
+      },
+    ],
+  };
+
+export const PurchaseRequestAcceptApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequestAcceptApprovalFormSchemaType => {
+  return {
+    action: 'APPROVED',
+    notes: purchase?.notes ?? null,
+    items: purchase?.items
+      ? purchase.items.map((item) => ({
+          purchase_item_id: item.id,
+          received_date: '',
+          travel_number: '',
+          travel_document_path: '',
+          vehicle_number: '',
+          expedition_vendor_id: 0,
+          received_qty: '',
+          transport_per_item: '',
+        }))
+      : [
+          {
+            purchase_item_id: 0,
+            received_date: '',
+            travel_number: '',
+            travel_document_path: '',
+            vehicle_number: '',
+            expedition_vendor_id: 0,
+            received_qty: '',
+            transport_per_item: '',
+          },
+        ],
+  };
+};
+
+export type PurchaseRequestAcceptApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestAcceptApprovalFormSchema
+>;
+
+export const PurchaseDeleteItemsInitialValues: PurchaseDeleteItemsSchema = {
+  item_ids: [],
+};
+
+export type PurchaseDeleteItemsFormValues = Yup.InferType<
+  typeof PurchaseDeleteItemsSchema
+>;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
new file mode 100644
index 00000000..1fcd7a94
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -0,0 +1,1190 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useModal } from '@/components/Modal';
+import { SupplierApi } from '@/services/api/master-data';
+import { SupplierProducts } from '@/types/api/master-data/supplier';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+import {
+  PurchaseRequestStaffApprovalFormDefaultValues,
+  PurchaseRequestStaffApprovalFormInitialValues,
+  PurchaseRequestStaffApprovalFormSchema,
+  PurchaseStaffApprovalItemSchema,
+} from '@/components/pages/purchase/form/order/PurchaseOrderForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+import { PurchaseApi } from '@/services/api/purchase';
+import {
+  CreateStaffApprovalRequestPayload,
+  UpdateStaffApprovalRequestPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import { useRouter } from 'next/navigation';
+
+interface PurchaseOrderStaffApprovalFormProps {
+  type?: 'add' | 'edit';
+  initialValues?: Purchase;
+  onCancel?: () => void;
+  refreshApprovals?: () => void;
+  onModalClose?: () => void;
+  onRefetchData?: () => void;
+  rawDataApprovals?: BaseApproval[] | BaseGroupedApproval[];
+}
+
+const PurchaseOrderStaffApprovalForm = ({
+  type: propType,
+  initialValues,
+  onCancel,
+  refreshApprovals,
+  onModalClose,
+  onRefetchData,
+  rawDataApprovals,
+}: PurchaseOrderStaffApprovalFormProps) => {
+  const type = useMemo(() => {
+    if (propType && (propType === 'add' || propType === 'edit')) {
+      return propType;
+    }
+
+    if (!rawDataApprovals || rawDataApprovals.length === 0) {
+      return 'add';
+    }
+
+    const currentStep = initialValues?.latest_approval?.step_number || 1;
+
+    switch (currentStep) {
+      case 1:
+        // Step 1 (Pengajuan) - Ini dari @PurchaseRequestForm
+        return 'add';
+      case 2:
+        // Step 2 (Staff Purchase) - Staff approval pertama kali
+        return 'add';
+      case 3:
+        // Step 3 (Manager Purchase) - Manager approval, boleh edit/delete/add items
+        return 'edit';
+      default:
+        // Step 4+ (Penerimaan Barang dan selesai), tidak boleh edit kalau sudah disetujui
+        return 'edit';
+    }
+  }, [rawDataApprovals, propType, initialValues?.latest_approval?.step_number]);
+
+  const isRejected = initialValues?.latest_approval?.action === 'REJECTED';
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const deleteModal = useModal();
+  const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
+    useState('');
+  const [selectedItemForDelete, setSelectedItemForDelete] = useState<
+    number | null
+  >(null);
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(
+    null
+  );
+
+  // ===== UTILITY FUNCTIONS =====
+  const canUpdatePurchaseItems = useMemo(() => {
+    if (!initialValues?.latest_approval) return false;
+
+    const currentStep = initialValues.latest_approval.step_number;
+    return currentStep >= 3;
+  }, [initialValues?.latest_approval]);
+
+  const canShowDeleteAddButtons = useMemo(() => {
+    if (!initialValues?.latest_approval) return false;
+
+    const currentStep = initialValues.latest_approval.step_number;
+
+    // Step 2 (Staff Purchase) dengan mode 'add' tidak boleh add/delete items
+    // User hanya boleh input harga dan total harga untuk items yang sudah ada
+    if (currentStep === 2 && type === 'add') {
+      return false;
+    }
+
+    // Step 3 (Manager Purchase) boleh add/delete items
+    return currentStep === 3;
+  }, [initialValues?.latest_approval, type]);
+
+  const isRepeaterInputError = (
+    idx: number,
+    field: 'price' | 'total_price' | 'product_id' | 'warehouse_id'
+  ): { isError: boolean; errorMessage: string } => {
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    if (!touchedItem) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
+    const errorMessage = errorItem?.[field] || '';
+
+    return {
+      isError: Boolean(isTouched && errorMessage),
+      errorMessage: isTouched && errorMessage ? errorMessage : '',
+    };
+  };
+
+  const isNewItem = (item: PurchaseStaffApprovalItemSchema) => {
+    return !item.purchase_item_id || item.purchase_item_id === 0;
+  };
+
+  // ===== SUBMISSION HANDLERS =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.staffApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      formik.resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+    ]
+  );
+
+  const updateStaffApprovalHandler = useCallback(
+    async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
+      const res = await PurchaseApi.staffApproval.update(purchaseId, payload);
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      formik.resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [refreshApprovals, onModalClose, onRefetchData]
+  );
+
+  // ===== DELETE HANDLER =====
+  const deleteItemsHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : initialValues?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    const itemIdsToDelete = selectedItemForDelete
+      ? [selectedItemForDelete]
+      : [];
+
+    if (itemIdsToDelete.length === 0) {
+      toast.error('Tidak ada item yang dipilih untuk dihapus');
+      return;
+    }
+
+    try {
+      const res = await PurchaseApi.items.delete(purchaseRequestId, {
+        item_ids: itemIdsToDelete,
+      });
+
+      if (isResponseError(res)) {
+        toast.error(res.message || 'Gagal menghapus item pembelian');
+        return;
+      }
+
+      const successMessage = 'Item pembelian berhasil dihapus';
+      toast.success(successMessage);
+
+      refreshApprovals?.();
+      onRefetchData?.();
+      deleteModal.closeModal();
+      setSelectedItemForDelete(null);
+      setSelectedItemIndex(null);
+
+      if (selectedItemIndex !== null) {
+        const updatedPurchaseItems = formik.values.items?.filter(
+          (_, i) => i !== selectedItemIndex
+        );
+        formik.setFieldValue('items', updatedPurchaseItems);
+      }
+    } catch {
+      toast.error('Terjadi kesalahan saat menghapus item pembelian');
+    }
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItemForDelete,
+    selectedItemIndex,
+    refreshApprovals,
+    onRefetchData,
+    deleteModal,
+  ]);
+
+  // ===== API DATA FETCHING FOR SUPPLIER PRODUCTS =====
+  const { data: supplierData, isLoading: isLoadingSupplierProducts } = useSWR(
+    initialValues?.supplier?.id
+      ? SupplierApi.basePath + '/' + initialValues.supplier.id
+      : null,
+    (url: string) => SupplierApi.getSingle(Number(url.split('/').pop()))
+  );
+
+  const baseSupplierProductOptions: OptionType[] = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return [];
+    }
+
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+
+    if (type === 'edit' && initialValues?.items) {
+      const currentProductIds = initialValues.items.map(
+        (item) => item.product_id
+      );
+      return products
+        .filter((product) => currentProductIds.includes(product.id))
+        .map((product) => ({
+          value: product.id,
+          label: product.name,
+        }));
+    }
+
+    return products.map((product) => ({
+      value: product.id,
+      label: product.name,
+    }));
+  }, [supplierData, type, initialValues?.items]);
+
+  // ===== FORM CONFIGURATION =====
+  const formikInitialValues = useMemo(() => {
+    return initialValues
+      ? PurchaseRequestStaffApprovalFormDefaultValues(initialValues)
+      : PurchaseRequestStaffApprovalFormInitialValues;
+  }, [initialValues]);
+
+  const formik = useFormik({
+    initialValues: formikInitialValues,
+    validationSchema: PurchaseRequestStaffApprovalFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      if (type === 'edit' && !canUpdatePurchaseItems) {
+        setPurchaseOrderFormErrorMessage(
+          'Tidak bisa diupdate. Harus melewati step 3 dahulu (Approval dari Manager Purchasing).'
+        );
+        return;
+      }
+
+      const itemsPayload = (values.items || []).map((formItem) => {
+        const isNewItemForm =
+          !formItem.purchase_item_id || formItem.purchase_item_id === 0;
+
+        let cleanPayload: NonNullable<
+          UpdateStaffApprovalRequestPayload['items']
+        >[0];
+
+        if (isNewItemForm) {
+          cleanPayload = {
+            product_id: Number(formItem.product_id) || 0,
+            warehouse_id: Number(formItem.warehouse_id) || 0,
+            qty: Number(formItem.qty) || 0,
+            price:
+              typeof formItem.price === 'string'
+                ? parseFloat(formItem.price) || 0
+                : Number(formItem.price) || 0,
+            total_price:
+              typeof formItem.total_price === 'string'
+                ? parseFloat(formItem.total_price) || 0
+                : Number(formItem.total_price) || 0,
+          };
+        } else {
+          cleanPayload = {
+            purchase_item_id: Number(formItem.purchase_item_id) || 0,
+            qty: Number(formItem.qty) || 0,
+            price:
+              typeof formItem.price === 'string'
+                ? parseFloat(formItem.price) || 0
+                : Number(formItem.price) || 0,
+            total_price:
+              typeof formItem.total_price === 'string'
+                ? parseFloat(formItem.total_price) || 0
+                : Number(formItem.total_price) || 0,
+          };
+        }
+        return cleanPayload;
+      });
+
+      const payload: UpdateStaffApprovalRequestPayload = {
+        action: values.action || 'APPROVED',
+        notes: values.notes || null,
+        items: itemsPayload,
+      };
+
+      if (type === 'add') {
+        await createStaffApprovalHandler(
+          payload as CreateStaffApprovalRequestPayload
+        );
+      } else if (type === 'edit') {
+        const updateItemsPayload = (values.items || []).map((formItem) => {
+          const isNewItemForm =
+            !formItem.purchase_item_id || formItem.purchase_item_id === 0;
+
+          let cleanPayload: NonNullable<
+            UpdateStaffApprovalRequestPayload['items']
+          >[0];
+
+          if (isNewItemForm) {
+            cleanPayload = {
+              product_id: Number(formItem.product_id) || 0,
+              warehouse_id: Number(formItem.warehouse_id) || 0,
+              qty: Number(formItem.qty) || 0,
+              price:
+                typeof formItem.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : Number(formItem.price) || 0,
+              total_price:
+                typeof formItem.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : Number(formItem.total_price) || 0,
+            };
+          } else {
+            cleanPayload = {
+              purchase_item_id: Number(formItem.purchase_item_id) || 0,
+              qty: Number(formItem.qty) || 0,
+              price:
+                typeof formItem.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : Number(formItem.price) || 0,
+              total_price:
+                typeof formItem.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : Number(formItem.total_price) || 0,
+            };
+          }
+
+          return cleanPayload;
+        });
+
+        const updatePayload: UpdateStaffApprovalRequestPayload = {
+          action: values.action || 'APPROVED',
+          notes: values.notes || null,
+          items: updateItemsPayload,
+        };
+
+        await updateStaffApprovalHandler(
+          initialValues?.id as number,
+          updatePayload
+        );
+      }
+    },
+  });
+
+  const supplierProductOptions = baseSupplierProductOptions;
+
+  // ===== API DATA FETCHING =====
+  const purchaseItems = useMemo(() => {
+    if (initialValues?.items) {
+      return initialValues.items.map((item) => ({
+        value: item.id,
+        label: item.product.name,
+        id: item.id,
+        quantity: item.sub_qty || item.qty || 0,
+        product_id: item.product_id,
+        warehouse_id: item.warehouse.id,
+        product: {
+          name: item.product.name,
+          product_category: item.product.product_category,
+          uom: item.product.uom,
+        },
+        warehouse: {
+          name: item.warehouse?.name || '',
+        },
+      }));
+    }
+
+    return [];
+  }, [initialValues?.items]);
+
+  const groupedPurchaseItems = useMemo(() => {
+    if (!purchaseItems.length) return [];
+
+    const warehouseGroups = purchaseItems.reduce(
+      (acc, item) => {
+        const warehouseId = item.warehouse_id;
+        if (!acc[warehouseId]) {
+          acc[warehouseId] = {
+            warehouseId,
+            warehouseName: item.warehouse.name,
+            items: [],
+          };
+        }
+        acc[warehouseId].items.push(item);
+        return acc;
+      },
+      {} as Record<
+        number,
+        {
+          warehouseId: number;
+          warehouseName: string;
+          items: typeof purchaseItems;
+        }
+      >
+    );
+
+    return Object.values(warehouseGroups);
+  }, [purchaseItems]);
+
+  useEffect(() => {
+    if (purchaseItems.length > 0 && initialValues?.items) {
+      const updatedItems = purchaseItems.map((purchaseItem) => {
+        const originalItem = initialValues.items?.find(
+          (item) => item.id === purchaseItem.id
+        );
+        const itemData = {
+          purchase_item_id: purchaseItem.id,
+          product_id: purchaseItem.product_id || 0,
+          product: {
+            value: purchaseItem.product_id || 0,
+            label: purchaseItem.product?.name || '',
+          },
+          warehouse_id: purchaseItem.warehouse_id || 0,
+          qty: originalItem?.qty || purchaseItem.quantity || 0,
+          price: type === 'edit' && originalItem ? originalItem.price : '',
+          total_price:
+            type === 'edit' && originalItem ? originalItem.total_price : '',
+        };
+        return itemData;
+      });
+      formik.setFieldValue('items', updatedItems);
+    }
+  }, [purchaseItems, type, initialValues]);
+
+  // ===== PURCHASE ITEM OPERATIONS =====
+  const addPurchaseItem = () => {
+    const existingWarehouseId =
+      formik.values.items?.find((item) => (item.warehouse_id || 0) > 0)
+        ?.warehouse_id ||
+      groupedPurchaseItems[0]?.warehouseId ||
+      0;
+
+    const warehouseObject = initialValues?.items?.find(
+      (item) => item.warehouse.id === existingWarehouseId
+    )?.warehouse;
+
+    const newItem = {
+      product_id: 0,
+      product: null,
+      warehouse_id: existingWarehouseId,
+      warehouse: warehouseObject
+        ? {
+            value: warehouseObject.id,
+            label: warehouseObject.name,
+          }
+        : null,
+      qty: 0,
+      price: '',
+      total_price: '',
+    };
+    const newItems = [...(formik.values.items || []), newItem];
+    formik.setFieldValue('items', newItems);
+  };
+
+  const removePurchaseItem = (idx: number) => {
+    const itemToRemove = formik.values.items?.[idx];
+
+    if (
+      !itemToRemove?.purchase_item_id ||
+      itemToRemove.purchase_item_id === 0
+    ) {
+      const updatedPurchaseItems = formik.values.items?.filter(
+        (_, i) => i !== idx
+      );
+      formik.setFieldValue('items', updatedPurchaseItems);
+      return;
+    }
+    setSelectedItemForDelete(itemToRemove.purchase_item_id);
+    setSelectedItemIndex(idx);
+    deleteModal.openModal();
+  };
+
+  const handleProductChange = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const product = val as OptionType | null;
+    const productId = (product as OptionType)?.value || 0;
+
+    if (Number(productId) > 0) {
+      const currentItem = formik.values.items?.[idx];
+      const warehouseId = currentItem?.warehouse_id || 0;
+
+      const isDuplicate = formik.values.items?.some(
+        (item, itemIdx) =>
+          itemIdx !== idx &&
+          item.product_id === productId &&
+          item.warehouse_id === warehouseId
+      );
+
+      if (isDuplicate) {
+        const existingItem = formik.values.items?.find(
+          (item, itemIdx) =>
+            itemIdx !== idx &&
+            item.product_id === productId &&
+            item.warehouse_id === warehouseId
+        );
+        const existingProductName =
+          existingItem?.product?.label || 'produk ini';
+
+        toast.error(
+          `Tidak bisa menambahkan item yang sama. ${existingProductName} sudah ada di gudang ini.`
+        );
+        return;
+      }
+    }
+
+    formik.setFieldTouched(`items.${idx}.product`, true);
+    formik.setFieldValue(`items.${idx}.product`, product);
+    formik.setFieldTouched(`items.${idx}.product_id`, true);
+    formik.setFieldValue(`items.${idx}.product_id`, productId);
+  };
+
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: 'price' | 'total_price' | 'qty',
+    value: string | number
+  ) => {
+    const formItem = formik.values.items?.[idx];
+
+    if (!formItem) {
+      return;
+    }
+
+    if (field === 'qty') {
+      const numValue =
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
+
+      formik.setFieldValue(`items.${idx}.qty`, numValue);
+
+      formik.setFieldValue(`items.${idx}.price`, '');
+      formik.setFieldValue(`items.${idx}.total_price`, '');
+    }
+
+    if (field === 'price' || field === 'total_price') {
+      const numValue =
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
+
+      formik.setFieldValue(`items.${idx}.${field}`, numValue);
+
+      if (
+        field === 'price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
+        const calculatedTotal = numValue * formItem.qty;
+        formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
+      }
+
+      if (
+        field === 'total_price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
+        const calculatedPrice = numValue / formItem.qty;
+        formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        onSubmit={formik.handleSubmit}
+        className='w-full flex flex-col gap-6'
+      >
+        <div className='w-full'>
+          <h2 className='text-lg font-semibold mb-4'>
+            {type === 'add'
+              ? 'Konfirmasi Item Pembelian'
+              : 'Edit Item Pembelian'}
+          </h2>
+          <div className='overflow-x-auto'>
+            {groupedPurchaseItems.length > 0 ? (
+              <div>
+                {groupedPurchaseItems.map((warehouseData, index) => (
+                  <div key={warehouseData.warehouseId}>
+                    <div className='border border-gray-200 rounded-lg overflow-hidden mb-6'>
+                      {/* Warehouse Header */}
+                      <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
+                        {index + 1}. {warehouseData.warehouseName.toUpperCase()}
+                      </div>
+
+                      {/* Items Table */}
+                      <div className='overflow-x-auto'>
+                        <table className='table'>
+                          <thead>
+                            <tr>
+                              <th>Produk</th>
+                              <th>Jenis Produk</th>
+                              <th>Jumlah</th>
+                              <th>Satuan</th>
+                              <th>
+                                Harga Satuan
+                                <span className='text-error'>*</span>
+                              </th>
+                              <th>
+                                Total (Rp.)
+                                <span className='text-error'>*</span>
+                              </th>
+                              {canShowDeleteAddButtons && type === 'edit' && (
+                                <th>Action</th>
+                              )}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {/* Existing Items */}
+                            {warehouseData.items.map((purchaseItem) => {
+                              const formItem = formik.values.items?.find(
+                                (item) =>
+                                  item.purchase_item_id === purchaseItem.id
+                              );
+                              const formItemIndex =
+                                formik.values.items?.findIndex(
+                                  (item) =>
+                                    item.purchase_item_id === purchaseItem.id
+                                );
+
+                              if (
+                                !formItem?.purchase_item_id ||
+                                formItem.purchase_item_id === 0
+                              )
+                                return null;
+
+                              return (
+                                <tr key={`purchase-item-${purchaseItem.id}`}>
+                                  <td>
+                                    <SelectInput
+                                      key={`product-${purchaseItem.id}`}
+                                      value={
+                                        formItem?.product as OptionType | null
+                                      }
+                                      onChange={(val) =>
+                                        handleProductChange(formItemIndex, val)
+                                      }
+                                      options={supplierProductOptions}
+                                      placeholder='Pilih produk'
+                                      isClearable={false}
+                                      isSearchable={false}
+                                      isDisabled={type === 'add'}
+                                      className={{
+                                        wrapper:
+                                          'min-w-52 md:min-w-72 lg:min-w-80',
+                                      }}
+                                      bottomLabel={
+                                        type === 'edit'
+                                          ? 'Previous: ' +
+                                            purchaseItem.product.name
+                                          : undefined
+                                      }
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${formItemIndex}.product_category`}
+                                      type='text'
+                                      value={
+                                        typeof purchaseItem?.product
+                                          ?.product_category === 'string'
+                                          ? purchaseItem.product
+                                              .product_category
+                                          : purchaseItem?.product
+                                              ?.product_category?.name || ''
+                                      }
+                                      readOnly={true}
+                                      className={{
+                                        wrapper:
+                                          'min-w-40 md:min-w-52 lg:min-w-64',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    {type === 'edit' ? (
+                                      <NumberInput
+                                        name={`items.${formItemIndex}.qty`}
+                                        value={
+                                          formik.values.items?.[formItemIndex]
+                                            ?.qty ?? ''
+                                        }
+                                        onChange={(e) =>
+                                          handlePurchaseItemChange(
+                                            formItemIndex,
+                                            'qty',
+                                            e.target.value
+                                          )
+                                        }
+                                        onBlur={formik.handleBlur}
+                                        placeholder='Masukkan jumlah'
+                                        allowNegative={false}
+                                        decimalScale={0}
+                                        bottomLabel={`Previous: ${formatNumber(purchaseItem.quantity)}`}
+                                        className={{
+                                          wrapper: 'min-w-32',
+                                        }}
+                                      />
+                                    ) : (
+                                      <TextInput
+                                        name={`items.${formItemIndex}.quantity`}
+                                        type='text'
+                                        value={
+                                          purchaseItem?.quantity
+                                            ? purchaseItem.quantity.toLocaleString(
+                                                'id-ID'
+                                              )
+                                            : ''
+                                        }
+                                        readOnly={true}
+                                        className={{
+                                          wrapper: 'min-w-24',
+                                        }}
+                                        disabled={true}
+                                      />
+                                    )}
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${formItemIndex}.uom`}
+                                      type='text'
+                                      value={
+                                        purchaseItem?.product?.uom?.name || ''
+                                      }
+                                      readOnly={true}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${formItemIndex}.price`}
+                                      value={formItem?.price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          formItemIndex,
+                                          'price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan harga satuan'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      bottomLabel={
+                                        type === 'edit'
+                                          ? `Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.price || 0, 'id-ID', 2, 2)}`
+                                          : undefined
+                                      }
+                                      isError={
+                                        isRepeaterInputError(
+                                          formItemIndex,
+                                          'price'
+                                        ).isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(
+                                          formItemIndex,
+                                          'price'
+                                        ).errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${formItemIndex}.total_price`}
+                                      value={formItem?.total_price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          formItemIndex,
+                                          'total_price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan total harga'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      bottomLabel={
+                                        type === 'edit'
+                                          ? `Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.total_price || 0, 'id-ID', 2, 2)}`
+                                          : undefined
+                                      }
+                                      isError={
+                                        isRepeaterInputError(
+                                          formItemIndex,
+                                          'total_price'
+                                        ).isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(
+                                          formItemIndex,
+                                          'total_price'
+                                        ).errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <div className='flex justify-center'>
+                                      {canUpdatePurchaseItems &&
+                                        canShowDeleteAddButtons && (
+                                          <Button
+                                            type='button'
+                                            color='error'
+                                            onClick={() =>
+                                              removePurchaseItem(formItemIndex)
+                                            }
+                                            title='Hapus item'
+                                          >
+                                            <Icon
+                                              icon='mdi:trash-can'
+                                              width={16}
+                                              height={16}
+                                            />
+                                          </Button>
+                                        )}
+                                    </div>
+                                  </td>
+                                </tr>
+                              );
+                            })}
+
+                            {/* New Items */}
+                            {formik.values.items?.map((formItem, idx) => {
+                              const isNewItemForm = isNewItem(formItem);
+                              if (!isNewItemForm) return null;
+
+                              return (
+                                <tr key={`new-item-${idx}`}>
+                                  <td>
+                                    <SelectInput
+                                      required
+                                      value={
+                                        formItem.product as OptionType | null
+                                      }
+                                      onChange={(val) =>
+                                        handleProductChange(idx, val)
+                                      }
+                                      options={supplierProductOptions}
+                                      isLoading={isLoadingSupplierProducts}
+                                      isError={
+                                        isRepeaterInputError(idx, 'product_id')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'product_id')
+                                          .errorMessage
+                                      }
+                                      placeholder='Pilih Produk'
+                                      className={{
+                                        wrapper:
+                                          'min-w-52 md:min-w-72 lg:min-w-80',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${idx}.product_category`}
+                                      type='text'
+                                      readOnly={true}
+                                      className={{
+                                        wrapper:
+                                          'min-w-40 md:min-w-52 lg:min-w-64',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.qty`}
+                                      value={formItem?.qty || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'qty',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan jumlah'
+                                      allowNegative={false}
+                                      decimalScale={0}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${idx}.uom`}
+                                      type='text'
+                                      readOnly={true}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.price`}
+                                      value={formItem?.price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan harga satuan'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(idx, 'price')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'price')
+                                          .errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.total_price`}
+                                      value={formItem?.total_price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'total_price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan total harga'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(idx, 'total_price')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'total_price')
+                                          .errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <div className='flex justify-center'>
+                                      <Button
+                                        type='button'
+                                        color='error'
+                                        onClick={() => removePurchaseItem(idx)}
+                                        title='Hapus item baru'
+                                      >
+                                        <Icon
+                                          icon='mdi:trash-can'
+                                          width={16}
+                                          height={16}
+                                        />
+                                      </Button>
+                                    </div>
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {/* Add Item Button */}
+                    {canShowDeleteAddButtons && (
+                      <div className='flex justify-center items-center mt-4'>
+                        <Button
+                          type='button'
+                          color='success'
+                          onClick={addPurchaseItem}
+                          className='w-fit'
+                        >
+                          <Icon icon='ic:round-plus' width={24} height={24} />
+                          Tambah Item Baru
+                        </Button>
+                      </div>
+                    )}
+
+                    {/* Add divider after table except for last item */}
+                    {index < groupedPurchaseItems.length - 1 && (
+                      <div className='border-t border-gray-200 my-6'></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='text-center py-8 text-gray-500'>
+                Tidak ada data item pembelian
+              </div>
+            )}
+          </div>
+          <div className={'col-span-2'}>
+            <TextInput
+              label='Notes'
+              name='notes'
+              value={formik.values.notes || ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.notes && Boolean(formik.errors.notes)}
+              errorMessage={formik.errors.notes as string}
+              placeholder='Masukkan catatan'
+            />
+          </div>
+
+          {/* Action buttons */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+            <div className='flex flex-row justify-end gap-2 w-full'>
+              <Button
+                type='button'
+                color='warning'
+                className='px-4'
+                onClick={() => {
+                  formik.resetForm();
+                  setPurchaseOrderFormErrorMessage('');
+                  onCancel?.();
+                  onModalClose?.();
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                className='px-4'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting || isRejected}
+              >
+                Submit
+              </Button>
+            </div>
+          </div>
+
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+        </div>
+      </form>
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menghapus item pembelian ini?'
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Hapus',
+          color: 'error',
+          onClick: deleteItemsHandler,
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+    </>
+  );
+};
+
+export default PurchaseOrderStaffApprovalForm;
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
new file mode 100644
index 00000000..67a694bc
--- /dev/null
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -0,0 +1,170 @@
+import * as Yup from 'yup';
+import { Purchase } from '@/types/api/purchase/purchase';
+
+type PurchaseRequestFormSchemaType = {
+  supplier?: {
+    value: number;
+    label: string;
+  } | null;
+  supplier_id: number;
+  credit_term: number;
+  area?: {
+    value: number;
+    label: string;
+  } | null;
+  area_id: number | undefined;
+  location?: {
+    value: number;
+    label: string;
+  } | null;
+  location_id: number | undefined;
+  notes: string | null;
+  items: {
+    warehouse?: {
+      value: number;
+      label: string;
+    } | null;
+    warehouse_id: number;
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    qty: number;
+  }[];
+};
+
+export type PurchaseItemSchema = {
+  warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  warehouse_id: number;
+  product?: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  qty: number;
+};
+
+const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
+  Yup.object({
+    warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    warehouse_id: Yup.number()
+      .required('Gudang wajib dipilih!')
+      .min(1, 'Gudang wajib dipilih!')
+      .typeError('Gudang wajib dipilih!'),
+    product: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_id: Yup.number()
+      .required('Produk wajib dipilih!')
+      .min(1, 'Produk wajib dipilih!')
+      .typeError('Produk wajib dipilih!'),
+    qty: Yup.number()
+      .required('Kuantitas wajib diisi!')
+      .min(1, 'Kuantitas tidak boleh kurang dari 1!')
+      .typeError('Kuantitas wajib diisi!'),
+  });
+
+export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =
+  Yup.object({
+    supplier: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    supplier_id: Yup.number()
+      .required('Supplier wajib dipilih!')
+      .min(1, 'Supplier wajib dipilih!')
+      .typeError('Supplier wajib dipilih!'),
+    credit_term: Yup.number()
+      .required('Jangka waktu kredit wajib diisi!')
+      .min(0, 'Jangka waktu kredit tidak boleh kurang dari 0!')
+      .typeError('Jangka waktu kredit wajib diisi!'),
+    area: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    area_id: Yup.number()
+      .min(0, 'Area tidak boleh kurang dari 0!')
+      .typeError('Area harus berupa angka!'),
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    location_id: Yup.number()
+      .min(0, 'Lokasi tidak boleh kurang dari 0!')
+      .typeError('Lokasi harus berupa angka!'),
+    notes: Yup.string().nullable().default(null),
+    items: Yup.array()
+      .of(PurchaseItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!'),
+  });
+
+export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
+
+export type PurchaseRequestFormValues = Yup.InferType<
+  typeof PurchaseRequestFormSchema
+>;
+
+export const getPurchaseRequestFormInitialValues = (
+  initialValues?: Purchase
+): PurchaseRequestFormValues => ({
+  supplier: initialValues?.supplier
+    ? {
+        value: initialValues.supplier.id,
+        label: initialValues.supplier.name,
+      }
+    : null,
+  supplier_id: initialValues?.supplier?.id ?? 0,
+  credit_term: initialValues?.credit_term ?? 0,
+  area: initialValues?.area
+    ? {
+        value: initialValues.area.id,
+        label: initialValues.area.name,
+      }
+    : null,
+  area_id: initialValues?.area?.id ?? undefined,
+  location: initialValues?.location
+    ? {
+        value: initialValues.location.id,
+        label: initialValues.location.name,
+      }
+    : null,
+  location_id: initialValues?.location?.id ?? undefined,
+  notes: initialValues?.notes ?? null,
+  items: initialValues?.items?.length
+    ? initialValues.items.map((item) => ({
+        warehouse: item.warehouse
+          ? {
+              value: item.warehouse.id,
+              label: item.warehouse.name,
+            }
+          : null,
+        warehouse_id: item.warehouse?.id ?? 0,
+        product: item.product
+          ? {
+              value: item.product.id,
+              label: item.product.name,
+            }
+          : null,
+        product_id: item.product?.id ?? 0,
+        qty: item.qty ?? 0,
+      }))
+    : [
+        {
+          warehouse: null,
+          warehouse_id: 0,
+          product: null,
+          product_id: 0,
+          qty: 0,
+        },
+      ],
+});
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
new file mode 100644
index 00000000..396ce7bb
--- /dev/null
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -0,0 +1,972 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
+import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useModal } from '@/components/Modal';
+
+import {
+  PurchaseRequestFormSchema,
+  PurchaseRequestFormValues,
+  getPurchaseRequestFormInitialValues,
+  UpdatePurchaseRequestFormSchema,
+} from '@/components/pages/purchase/form/request/PurchaseRequestForm.schema';
+import {
+  SupplierApi,
+  AreaApi,
+  LocationApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import { Supplier, SupplierProducts } from '@/types/api/master-data/supplier';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+import { PurchaseApi } from '@/services/api/purchase';
+
+import Card from '@/components/Card';
+import {
+  CreatePurchaseRequestPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+
+interface PurchaseRequestFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Purchase;
+}
+
+const PurchaseRequestForm = ({
+  type = 'add',
+  initialValues,
+}: PurchaseRequestFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
+  const [selectedPurchaseItems, setSelectedPurchaseItems] = useState<number[]>(
+    []
+  );
+  const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
+    useState('');
+
+  // ===== TYPE DEFINITIONS =====
+  interface ProductOptionType {
+    value: number;
+    label: string;
+  }
+
+  // ===== UTILITY FUNCTIONS =====
+  const isRepeaterInputError = (
+    idx: number,
+    field: 'warehouse_id' | 'product_id' | 'qty'
+  ): { isError: boolean; errorMessage: string } => {
+    if (!formik.touched.items || !Array.isArray(formik.touched.items)) {
+      return {
+        isError: false,
+        errorMessage: '',
+      };
+    }
+
+    const touchedField = (
+      formik.touched.items[idx] as Partial<{
+        warehouse_id: boolean;
+        product_id: boolean;
+        qty: boolean;
+      }>
+    )?.[field];
+    const errorItem = formik.errors.items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    return {
+      isError: Boolean(touchedField && Boolean(errorItem?.[field])),
+      errorMessage: touchedField && errorItem?.[field] ? errorItem[field] : '',
+    };
+  };
+
+  // ===== SUBMISSION HANDLERS =====
+  const createPurchaseRequestHandler = useCallback(
+    async (payload: CreatePurchaseRequestPayload) => {
+      const res = await PurchaseApi.create(payload);
+      if (isResponseError(res)) {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const updatePurchaseRequestHandler = useCallback(
+    async (
+      purchaseRequestId: number,
+      payload: CreatePurchaseRequestPayload
+    ) => {
+      const res = await PurchaseApi.update(purchaseRequestId, payload);
+      if (isResponseError(res)) {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const deletePurchaseRequestClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValues?.id) return;
+
+    setIsDeleteLoading(true);
+    await PurchaseApi.delete(initialValues.id);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Purchase Request!');
+    setIsDeleteLoading(false);
+    router.push('/purchase');
+  }, [deleteModal, initialValues?.id, router]);
+
+  // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    rawData: supplierRawData,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'SAPRONAK',
+  });
+
+  const {
+    setInputValue: setAreaSelectInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+
+  const {
+    inputValue: warehouseSelectInputValue,
+    setInputValue: setWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+  // ===== FORM CONFIGURATION =====
+  const formikInitialValues = useMemo<PurchaseRequestFormValues>(
+    () => getPurchaseRequestFormInitialValues(initialValues),
+    [initialValues]
+  );
+
+  const formik = useFormik<PurchaseRequestFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdatePurchaseRequestFormSchema
+        : PurchaseRequestFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    validateOnMount: false,
+    enableReinitialize: true,
+    onSubmit: async (values) => {
+      const payload: CreatePurchaseRequestPayload = {
+        supplier_id:
+          typeof values.supplier_id === 'string'
+            ? parseInt(values.supplier_id) || 0
+            : values.supplier_id || 0,
+        credit_term:
+          typeof values.credit_term === 'string'
+            ? parseInt(values.credit_term) || 0
+            : values.credit_term || 0,
+        notes: values.notes || '',
+        items: (values.items || []).map((item) => ({
+          warehouse_id: Number(item.warehouse_id) || 0,
+          product_id: Number(item.product_id) || 0,
+          qty: Number(item.qty) || 0,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createPurchaseRequestHandler(payload);
+          break;
+        case 'edit':
+          await updatePurchaseRequestHandler(
+            initialValues?.id as number,
+            payload
+          );
+          break;
+      }
+    },
+  });
+
+  // ===== API DATA FETCHING =====
+  const { data: supplierData, isLoading: isLoadingProducts } = useSWR(
+    formik.values.supplier_id && Number(formik.values.supplier_id) > 0
+      ? formik.values.supplier_id?.toString()
+      : null,
+    (id: string) => SupplierApi.getSingle(Number(id))
+  );
+
+  const supplierProductOptions = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return [];
+    }
+
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+    return products.map((product) => ({
+      value: product.id,
+      label: product.name,
+    }));
+  }, [supplierData]);
+
+  const supplierProductData = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return {};
+    }
+
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+    const data: Record<number, NonNullable<typeof supplier.products>[0]> = {};
+
+    products.forEach((product) => {
+      data[product.id] = product;
+    });
+
+    return data;
+  }, [supplierData]);
+
+  const locationsUrl = useMemo(() => {
+    const params = new URLSearchParams({
+      search: locationSelectInputValue,
+      ...(formik.values.area_id && formik.values.area_id > 0
+        ? { area_id: formik.values.area_id.toString() }
+        : {}),
+    });
+    return `${LocationApi.basePath}?${params.toString()}`;
+  }, [locationSelectInputValue, formik.values.area_id]);
+
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationsUrl,
+    LocationApi.getAllFetcher
+  );
+
+  const locationOptions = useMemo(() => {
+    if (!isResponseSuccess(locations)) return [];
+    return (
+      locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      })) || []
+    );
+  }, [locations]);
+
+  const warehousesUrl = useMemo(() => {
+    const params = new URLSearchParams({ search: warehouseSelectInputValue });
+
+    if (formik.values.area_id && formik.values.area_id > 0) {
+      params.append('area_id', formik.values.area_id.toString());
+    }
+
+    if (formik.values.location_id && formik.values.location_id > 0) {
+      params.append('location_id', formik.values.location_id.toString());
+    }
+
+    return `${WarehouseApi.basePath}?${params.toString()}`;
+  }, [
+    warehouseSelectInputValue,
+    formik.values.area_id,
+    formik.values.location_id,
+  ]);
+
+  const { data: warehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  const warehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(warehouses)) return [];
+
+    return (
+      warehouses?.data.map((w) => ({
+        value: w.id,
+        label: w.name,
+        area: w.area?.name,
+        location:
+          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+            ? w.location?.name
+            : undefined,
+      })) || []
+    );
+  }, [warehouses]);
+
+  const addPurchaseItem = () => {
+    const newItems = [
+      ...(formik.values.items || []),
+      {
+        warehouse: null,
+        warehouse_id: 0,
+        product: null,
+        product_id: 0,
+        qty: 0,
+      },
+    ];
+    formik.setFieldValue('items', newItems);
+  };
+
+  const removePurchaseItem = (idx: number) => {
+    const updatedPurchaseItems = formik.values.items?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('items', updatedPurchaseItems);
+  };
+
+  const removeSelectedPurchaseItems = () => {
+    const updatedPurchaseItems = formik.values.items?.filter(
+      (_, idx) => !selectedPurchaseItems.includes(idx)
+    );
+    formik.setFieldValue('items', updatedPurchaseItems);
+    setSelectedPurchaseItems([]);
+  };
+
+  // ===== UTILITY FUNCTIONS =====
+  const updateCreditTermBasedOnSupplier = useCallback(
+    (supplierId: number) => {
+      if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
+        const supplierData = supplierRawData.data.find(
+          (s: Supplier) => s.id === supplierId
+        );
+        if (supplierData?.due_date) {
+          formik.setFieldTouched('credit_term', false);
+          formik.setFieldValue('credit_term', supplierData.due_date.toString());
+        } else {
+          formik.setFieldTouched('credit_term', false);
+          formik.setFieldValue('credit_term', '');
+        }
+      } else {
+        formik.setFieldTouched('credit_term', false);
+        formik.setFieldValue('credit_term', '');
+      }
+    },
+    [supplierRawData]
+  );
+
+  const resetPurchaseItems = useCallback(() => {
+    if (formik.values.items) {
+      formik.values.items.forEach((_, idx) => {
+        formik.setFieldTouched(`items.${idx}.product`, false);
+        formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldTouched(`items.${idx}.product_id`, false);
+        formik.setFieldValue(`items.${idx}.product_id`, 0);
+        formik.setFieldTouched(`items.${idx}.qty`, false);
+        formik.setFieldValue(`items.${idx}.qty`, 0);
+      });
+    }
+  }, []);
+
+  // ===== SIDE EFFECTS =====
+  useEffect(() => {
+    if (formik.values.supplier_id && Number(formik.values.supplier_id) > 0) {
+      updateCreditTermBasedOnSupplier(Number(formik.values.supplier_id));
+      resetPurchaseItems();
+    } else {
+      formik.setFieldTouched('credit_term', false);
+      formik.setFieldValue('credit_term', '');
+      resetPurchaseItems();
+    }
+  }, [formik.values.supplier_id]);
+
+  // ===== FORM HANDLERS =====
+  const handleSupplierChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const supplier = val as OptionType | null;
+      const supplierId = Number(supplier?.value);
+
+      formik.setFieldTouched('supplier', true);
+      formik.setFieldValue('supplier', supplier);
+      formik.setFieldTouched('supplier_id', true);
+      formik.setFieldValue('supplier_id', supplierId);
+    },
+    []
+  );
+
+  const handleCreditTermChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      formik.setFieldTouched('credit_term', true);
+      formik.setFieldValue('credit_term', value);
+    },
+    []
+  );
+
+  const handleCreditTermBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      formik.handleBlur(e);
+    },
+    [formik]
+  );
+
+  const handleAreaChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const area = val as OptionType | null;
+      formik.setFieldTouched('area_id', true);
+      formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
+      formik.setFieldTouched('area', true);
+      formik.setFieldValue('area', area);
+    },
+    []
+  );
+
+  const handleLocationChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const location = val as OptionType | null;
+      formik.setFieldTouched('location_id', true);
+      formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
+      formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
+    },
+    []
+  );
+
+  const handleWarehouseChange = useCallback(
+    (idx: number, val: OptionType | OptionType[] | null) => {
+      const warehouse = val as OptionType | null;
+      const warehouseId = (warehouse as OptionType)?.value || 0;
+
+      formik.setFieldTouched(`items.${idx}.warehouse`, true);
+      formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
+      formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
+      formik.setFieldValue(`items.${idx}.warehouse_id`, warehouseId);
+    },
+    []
+  );
+
+  // ===== PURCHASE ITEM OPERATIONS =====
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: 'qty',
+    value: string | number
+  ) => {
+    if (field === 'qty') {
+      const numValue =
+        typeof value === 'string' ? parseFloat(value) || 0 : value;
+      formik.setFieldTouched(`items.${idx}.qty`, true);
+      formik.setFieldValue(`items.${idx}.qty`, numValue);
+    }
+  };
+
+  return (
+    <>
+      <section className='w-full'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/purchase'
+            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'>
+            {type === 'add' && 'Tambah Purchase Request'}
+            {type === 'edit' && 'Edit Purchase Request'}
+            {type === 'detail' && 'Detail Purchase Request'}
+          </h1>
+        </header>
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Basic Info Card */}
+          <Card
+            title='Informasi Purchase Request'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+              <SelectInput
+                required
+                label='Vendor'
+                placeholder='Pilih Vendor...'
+                value={formik.values.supplier}
+                onChange={handleSupplierChange}
+                options={supplierOptions}
+                onInputChange={setSupplierSelectInputValue}
+                isLoading={isLoadingSuppliers}
+                isError={
+                  formik.touched.supplier_id &&
+                  Boolean(formik.errors.supplier_id)
+                }
+                errorMessage={formik.errors.supplier_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <NumberInput
+                required={!!formik.values.supplier_id}
+                label='Jatuh tempo (hari)'
+                name='credit_term'
+                value={formik.values.credit_term || ''}
+                onChange={handleCreditTermChange}
+                onBlur={handleCreditTermBlur}
+                isError={
+                  formik.touched.credit_term &&
+                  Boolean(formik.errors.credit_term)
+                }
+                errorMessage={formik.errors.credit_term as string}
+                readOnly={type === 'detail' || !formik.values.supplier_id}
+                disabled={type === 'detail' || !formik.values.supplier_id}
+                allowNegative={false}
+                decimalScale={0}
+                placeholder={
+                  !formik.values.supplier_id
+                    ? 'Pilih Vendor terlebih dahulu'
+                    : 'Masukkan jumlah hari jatuh tempo'
+                }
+              />
+
+              <SelectInput
+                label='Area'
+                placeholder='Pilih Area...'
+                value={formik.values.area}
+                onChange={handleAreaChange}
+                options={areaOptions}
+                onInputChange={setAreaSelectInputValue}
+                isLoading={isLoadingAreas}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <SelectInput
+                label='Lokasi'
+                placeholder='Pilih Lokasi...'
+                value={formik.values.location}
+                onChange={handleLocationChange}
+                options={locationOptions}
+                onInputChange={setLocationSelectInputValue}
+                isLoading={isLoadingLocations}
+                isDisabled={type === 'detail'}
+                isClearable={type !== 'detail'}
+              />
+
+              <div className={'col-span-2'}>
+                <TextInput
+                  label='Notes'
+                  name='notes'
+                  value={formik.values.notes || ''}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={formik.touched.notes && Boolean(formik.errors.notes)}
+                  errorMessage={formik.errors.notes as string}
+                  readOnly={type === 'detail'}
+                  disabled={type === 'detail'}
+                  placeholder='Masukkan catatan'
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* Purchase Items Table */}
+          <Card
+            title='Item Pembelian'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-items'
+                          checked={
+                            formik.values.items?.length ===
+                              selectedPurchaseItems.length &&
+                            formik.values.items?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedPurchaseItems(
+                                formik.values.items?.map((_, idx) => idx) ?? []
+                              );
+                            } else {
+                              setSelectedPurchaseItems([]);
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Gudang
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Item
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Jumlah
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>Estimasi Harga</th>
+                    <th>Satuan</th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.items?.map((item, idx) => (
+                    <tr key={`purchase-item-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`purchase-item-${idx}`}
+                            checked={selectedPurchaseItems.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedPurchaseItems([
+                                  ...selectedPurchaseItems,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedPurchaseItems(
+                                  selectedPurchaseItems.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          placeholder='Pilih Gudang...'
+                          value={item.warehouse}
+                          onChange={(val) => handleWarehouseChange(idx, val)}
+                          options={warehouseOptions}
+                          onInputChange={setWarehouseSelectInputValue}
+                          isLoading={isLoadingWarehouses}
+                          isError={
+                            isRepeaterInputError(idx, 'warehouse_id').isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(idx, 'warehouse_id')
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable={type !== 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <SelectInput
+                          required
+                          value={item.product ?? undefined}
+                          onChange={(val) => {
+                            const product = val as ProductOptionType | null;
+                            const productId =
+                              (product as ProductOptionType)?.value || 0;
+
+                            formik.setFieldTouched(
+                              `items.${idx}.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `items.${idx}.product`,
+                              product
+                            );
+                            formik.setFieldTouched(
+                              `items.${idx}.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `items.${idx}.product_id`,
+                              productId
+                            );
+                          }}
+                          options={supplierProductOptions}
+                          isLoading={isLoadingProducts}
+                          isError={
+                            isRepeaterInputError(idx, 'product_id').isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(idx, 'product_id').errorMessage
+                          }
+                          isDisabled={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
+                          isClearable={
+                            type !== 'detail' && !!formik.values.supplier_id
+                          }
+                          placeholder={
+                            !formik.values.supplier_id
+                              ? 'Pilih Vendor terlebih dahulu'
+                              : 'Pilih Produk'
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`items.${idx}.qty`}
+                          value={item.qty || ''}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(idx, 'qty', e.target.value)
+                          }
+                          onBlur={formik.handleBlur}
+                          placeholder={
+                            !formik.values.supplier_id
+                              ? 'Pilih Vendor terlebih dahulu'
+                              : 'Masukkan kuantitas'
+                          }
+                          readOnly={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
+                          disabled={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
+                          allowNegative={false}
+                          decimalScale={0}
+                          isError={isRepeaterInputError(idx, 'qty').isError}
+                          errorMessage={
+                            isRepeaterInputError(idx, 'qty').errorMessage
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`items.${idx}.price`}
+                          value={
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? formatNumber(
+                                  supplierProductData[item.product_id]
+                                    .ProductPrice *
+                                    (parseFloat(item.qty?.toString() || '0') ||
+                                      0)
+                                )
+                              : ''
+                          }
+                          onChange={() => {}}
+                          onBlur={formik.handleBlur}
+                          type='text'
+                          className={{
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
+                          }}
+                          disabled={true}
+                          readOnly={true}
+                          inputPrefix={'Rp'}
+                          placeholder={
+                            item.product_id
+                              ? 'Loading...'
+                              : 'Pilih produk terlebih dahulu'
+                          }
+                          bottomLabel={
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? `Harga per unit: Rp ${formatNumber(
+                                  supplierProductData[item.product_id]
+                                    .ProductPrice
+                                )}`
+                              : ''
+                          }
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`items.${idx}.uom`}
+                          value={
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? supplierProductData[item.product_id].uom.name
+                              : ''
+                          }
+                          onBlur={formik.handleBlur}
+                          type='text'
+                          readOnly={true}
+                          disabled={true}
+                          className={{
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
+                          }}
+                          placeholder={
+                            item.product_id
+                              ? 'Loading...'
+                              : 'Pilih produk terlebih dahulu'
+                          }
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removePurchaseItem(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedPurchaseItems.length > 0 && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={removeSelectedPurchaseItems}
+                    disabled={selectedPurchaseItems.length === 0}
+                    className='w-fit'
+                  >
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
+                    Hapus Terpilih ({selectedPurchaseItems.length})
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addPurchaseItem}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Item
+                </Button>
+              </div>
+            )}
+          </Card>
+
+          {/* Action buttons */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+            {type === 'detail' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  href={`/purchase/detail/edit/?purchaseId=${initialValues?.id}`}
+                  color='warning'
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:edit-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Edit
+                </Button>
+
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deletePurchaseRequestClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {purchaseRequestFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseRequestFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data Purchase Request ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default PurchaseRequestForm;
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
new file mode 100644
index 00000000..35d9e104
--- /dev/null
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -0,0 +1,1147 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import {
+  ColumnDef,
+  SortingState,
+  Row,
+  Table as TableType,
+} from '@tanstack/react-table';
+
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useModal } from '@/components/Modal';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import Modal from '@/components/Modal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
+import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
+import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
+
+import Card from '@/components/Card';
+import {
+  CreateAcceptApprovalRequestPayload,
+  CreateManagerApprovalRequestPayload,
+  CreateStaffApprovalRequestPayload,
+  Purchase,
+  PurchaseItem,
+} from '@/types/api/purchase/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
+import { isResponseError } from '@/lib/api-helper';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
+import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+
+const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <RowOptionsMenuWrapper type='dropdown'>
+      <Button
+        onClick={onEdit}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <RowOptionsMenuWrapper type='dropdown'>
+      <Button
+        onClick={onEdit}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+interface PurchaseOrderDetailProps {
+  type?: 'detail' | 'edit';
+  initialValues?: Purchase;
+  refetchData?: () => void;
+}
+
+const PurchaseOrderDetail = ({
+  type = 'detail',
+  initialValues,
+  refetchData,
+}: PurchaseOrderDetailProps) => {
+  // ===== MODAL HOOKS =====
+  const searchParams = useSearchParams();
+  const confirmationModalWithNotes = useModal();
+  const staffApprovalModal = useModal();
+  const staffRejectionModal = useModal();
+  const acceptApprovalModal = useModal();
+  const acceptRejectionModal = useModal();
+  const managerRejectionModal = useModal();
+  const editModal = useModal();
+  const penerimaanBarangModal = useModal();
+  const deleteModal = useModal();
+
+  // ===== STATE MANAGEMENT =====
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<PurchaseItem | null>(null);
+
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  // ===== COMPUTED VALUES =====
+  const purchaseOrderItems = useMemo(
+    () => initialValues?.items || [],
+    [initialValues?.items]
+  );
+
+  const goodsReceiptItems = useMemo(() => {
+    return purchaseOrderItems.filter((item) => item.received_date);
+  }, [purchaseOrderItems]);
+
+  const groupedGoodsReceiptItems = useMemo(() => {
+    const uniqueProducts = Array.from(
+      new Map(
+        goodsReceiptItems.map((item) => [item.product?.id, item])
+      ).values()
+    );
+
+    return uniqueProducts.map((item, index) => {
+      const productGroupItems = goodsReceiptItems.filter(
+        (groupItem) => groupItem.product?.id === item.product?.id
+      );
+
+      const totalQty = productGroupItems.reduce(
+        (sum, item) => sum + (item.total_qty || 0),
+        0
+      );
+      const receivedQty = productGroupItems.reduce(
+        (sum, item) => sum + (item.sub_qty || 0),
+        0
+      );
+      const unreceivedQty = totalQty - receivedQty;
+      const nominalReceived = productGroupItems.reduce(
+        (sum, item) => sum + (item.sub_qty || 0) * (item.price || 0),
+        0
+      );
+      const nominalUnreceived = productGroupItems.reduce(
+        (sum, item) => sum + unreceivedQty * (item.price || 0),
+        0
+      );
+
+      return {
+        productIndex: index + 1,
+        productName: item.product?.name || 'Unknown Product',
+        productGroupItems,
+        totalQty,
+        receivedQty,
+        unreceivedQty,
+        nominalReceived,
+        nominalUnreceived,
+      };
+    });
+  }, [goodsReceiptItems]);
+
+  const approvalStep = useMemo(() => {
+    if (!initialValues?.latest_approval) return null;
+    return initialValues.latest_approval.step_number;
+  }, [initialValues?.latest_approval]);
+
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    rawDataApprovals,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.latest_approval,
+    approvalLines: PURCHASE_ORDER_APPROVAL_LINE,
+    moduleName: 'PURCHASES',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
+
+  const showApprovalButton =
+    approvalStep !== null &&
+    approvalStep >= 1 &&
+    approvalStep <= 3 &&
+    initialValues?.latest_approval?.action !== 'REJECTED';
+
+  const canDeleteItems = useMemo(() => {
+    if (!initialValues?.latest_approval) return false;
+
+    const currentStep = initialValues.latest_approval.step_number;
+
+    const hasReachedStep5 = rawDataApprovals?.some(
+      (approval) => approval.step_number === 5
+    );
+
+    return currentStep === 3 && !hasReachedStep5;
+  }, [initialValues?.latest_approval, rawDataApprovals]);
+
+  const handleApprovalClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffApprovalModal.openModal();
+        break;
+      case 2:
+        confirmationModalWithNotes.openModal();
+        break;
+      case 3:
+        acceptApprovalModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleRejectionClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffRejectionModal.openModal();
+        break;
+      case 2:
+        managerRejectionModal.openModal();
+        break;
+      case 3:
+        acceptRejectionModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const canShowPurchaseOrderInvoice = useMemo(() => {
+    if (!initialValues?.latest_approval) return false;
+
+    const currentStep = initialValues.latest_approval.step_number;
+    return currentStep >= 3;
+  }, [initialValues?.latest_approval]);
+
+  const canShowPenerimaanBarang = useMemo(() => {
+    if (!initialValues?.latest_approval) return false;
+
+    const currentStep = initialValues.latest_approval.step_number;
+    return currentStep === 5;
+  }, [initialValues?.latest_approval]);
+
+  const totalBeforeTax = useMemo(() => {
+    return purchaseOrderItems.reduce(
+      (sum, item) => sum + (item.total_price || 0),
+      0
+    );
+  }, [purchaseOrderItems]);
+
+  // ===== SUBMISSION HANDLER =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.staffApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals();
+      refetchData?.();
+    },
+    [initialValues?.id, searchParams, refreshApprovals, refetchData]
+  );
+
+  const createManagerApprovalHandler = useCallback(
+    async (payload: CreateManagerApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.managerApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refetchData?.();
+    },
+    [initialValues?.id, searchParams, refetchData]
+  );
+
+  const createAcceptApprovalHandler = useCallback(
+    async (payload: CreateAcceptApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.acceptApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals();
+      refetchData?.();
+    },
+    [initialValues?.id, searchParams, refreshApprovals, refetchData]
+  );
+
+  // ===== MODAL HANDLERS =====
+  const handleStaffApprovalModalClose = useCallback(() => {
+    refreshApprovals();
+    refetchData?.();
+    staffApprovalModal.closeModal();
+  }, [refreshApprovals, refetchData]);
+
+  const handleEditModalClose = useCallback(() => {
+    refreshApprovals();
+    refetchData?.();
+    editModal.closeModal();
+  }, [refreshApprovals, refetchData]);
+
+  // ===== DELETE HANDLER =====
+  const deleteItemsHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : initialValues?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    const itemIdsToDelete = selectedItem ? [selectedItem.id] : selectedRowIds;
+
+    if (itemIdsToDelete.length === 0) {
+      toast.error('Pilih minimal 1 item untuk dihapus');
+      return;
+    }
+
+    setIsDeleteLoading(true);
+
+    try {
+      const res = await PurchaseApi.items.delete(purchaseRequestId, {
+        item_ids: itemIdsToDelete,
+      });
+
+      if (isResponseError(res)) {
+        toast.error(res.message || 'Gagal menghapus item pembelian');
+        return;
+      }
+
+      const successMessage = selectedItem
+        ? 'Berhasil menghapus item pembelian'
+        : `Berhasil menghapus ${itemIdsToDelete.length} item pembelian`;
+
+      toast.success(successMessage);
+      refreshApprovals();
+      refetchData?.();
+      deleteModal.closeModal();
+      setSelectedItem(null);
+      setRowSelection({});
+    } catch (error) {
+      toast.error('Terjadi kesalahan saat menghapus item pembelian');
+    } finally {
+      setIsDeleteLoading(false);
+    }
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItem,
+    selectedRowIds,
+    refetchData,
+  ]);
+
+  if (!initialValues) {
+    return null;
+  }
+
+  const purchaseData = initialValues;
+
+  const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
+    ...(canDeleteItems
+      ? [
+          {
+            id: 'select',
+            header: ({ table }: { table: TableType<PurchaseItem> }) => (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </div>
+            ),
+            cell: ({ row }: { row: Row<PurchaseItem> }) => {
+              return (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'product.name',
+      header: 'Produk',
+      cell: (props) => props.row.original.product?.name || '-',
+    },
+    {
+      accessorKey: 'product.product_category',
+      header: 'Jenis Produk',
+      cell: (props) => {
+        const category = props.row.original.product?.product_category;
+        if (typeof category === 'string') {
+          return category;
+        }
+        return category?.name || '-';
+      },
+    },
+    {
+      accessorKey: 'sub_qty',
+      header: 'Jumlah',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      accessorKey: 'product.uom.name',
+      header: 'Satuan',
+      cell: (props) => {
+        const uom = props.row.original.product?.uom;
+        if (uom && typeof uom === 'object' && uom.name) {
+          return uom.name;
+        }
+        return uom || '-';
+      },
+    },
+    {
+      accessorKey: 'price',
+      header: 'Harga Satuan',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+    {
+      accessorKey: 'total_price',
+      header: 'Total (Rp.)',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+    ...(canDeleteItems
+      ? [
+          {
+            header: 'Aksi',
+            cell: (props: { row: Row<PurchaseItem> }) => {
+              const deleteClickHandler = () => {
+                setSelectedItem(props.row.original);
+                setRowSelection({});
+                deleteModal.openModal();
+              };
+
+              return (
+                <Button
+                  type='button'
+                  color='error'
+                  className='text-sm'
+                  onClick={deleteClickHandler}
+                >
+                  <Icon icon='mdi:trash-can' width={16} height={16} />
+                </Button>
+              );
+            },
+          },
+        ]
+      : []),
+  ];
+
+  const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
+    {
+      header: 'Tanggal Penerimaan',
+      accessorKey: 'received_date',
+      cell: (props) =>
+        props.row.original.received_date
+          ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      header: 'Gudang Tujuan',
+      accessorKey: 'warehouse.name',
+      cell: (props) => {
+        const warehouse = props.row.original.warehouse;
+        return warehouse?.name || '-';
+      },
+    },
+    {
+      header: 'No. Surat Jalan',
+      accessorKey: 'travel_number',
+      cell: (props) => props.row.original.travel_number || '-',
+    },
+    {
+      header: 'Dokumen Surat Jalan',
+      accessorKey: 'travel_document_path',
+      cell: (props) => {
+        const documentPath = props.row.original.travel_document_path;
+        return documentPath ? (
+          <Button
+            color='primary'
+            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
+            href={documentPath}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Icon
+              icon='material-symbols:file-open-outline'
+              width={16}
+              height={16}
+            />
+            Lihat Dokumen
+          </Button>
+        ) : (
+          '-'
+        );
+      },
+    },
+    {
+      header: 'No. Armada Pengangkut',
+      accessorKey: 'vehicle_number',
+      cell: (props) => props.row.original.vehicle_number || '-',
+    },
+    {
+      header: 'Jumlah Total',
+      accessorKey: 'sub_qty',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      header: 'Jumlah Diterima',
+      accessorKey: 'total_qty',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      header: 'Ekspedisi',
+      accessorKey: 'expedition_name',
+      cell: (props) => '-',
+    },
+    {
+      header: 'Transport /Item',
+      accessorKey: 'transport_per_item',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+  ];
+
+  const summaryData = [
+    {
+      label: 'Total Sebelum Pajak',
+      value: totalBeforeTax,
+    },
+    {
+      label: 'Total Pembayaran',
+      value: totalBeforeTax,
+    },
+  ];
+
+  const summaryColumns: ColumnDef<(typeof summaryData)[0]>[] = [
+    {
+      accessorKey: 'label',
+      header: '',
+      cell: (props) => (
+        <span className='font-semibold text-gray-700 text-sm'>
+          {props.getValue() as string}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'value',
+      header: '',
+      cell: (props) => (
+        <span className='font-semibold text-gray-900 text-sm text-right'>
+          {formatCurrency(props.getValue() as number)}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <section className='w-full'>
+      {/* Approval and Action Buttons */}
+      <div className='flex justify-between items-center w-full my-6'>
+        <Button
+          href='/purchase'
+          variant='link'
+          className='w-fit p-0 text-primary'
+        >
+          <Icon icon='uil:arrow-left' width={24} height={24} />
+          Kembali
+        </Button>
+
+        {showApprovalButton && (
+          <div className='flex flex-row gap-2'>
+            <Button
+              onClick={handleApprovalClick}
+              variant='outline'
+              color='success'
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              variant='outline'
+              color='error'
+              className='w-full sm:w-fit'
+              onClick={handleRejectionClick}
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Steps */}
+      {approvals && !approvalsLoading && (
+        <div className='my-8'>
+          <ApprovalSteps approvals={approvals} />
+        </div>
+      )}
+
+      {/* Detail Purchase Order */}
+      <Card
+        collapsible
+        title='Detail Purchase Order'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        {/* Order Information */}
+        <div className='my-8'>
+          <h3 className='text-lg font-semibold text-gray-800 mb-6 pb-3 border-b border-gray-200'>
+            Informasi Pesanan
+          </h3>
+          <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4'>
+            {/* Kolom 1 */}
+            <div className='space-y-4'>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Area
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    : {purchaseData.items?.[0]?.warehouse?.area?.name || '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Lokasi
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    :{' '}
+                    {purchaseData.items?.[0]?.warehouse?.type === 'LOKASI' &&
+                    purchaseData.items?.[0]?.warehouse?.location?.name
+                      ? purchaseData.items[0].warehouse.location.name
+                      : '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Gudang
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    : {purchaseData.items?.[0]?.warehouse?.name || '-'}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Kolom 2 */}
+            <div className='space-y-4'>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Nama Vendor
+                  </span>
+                  <span className='text-gray-900 font-medium ml-3 break-all'>
+                    : {purchaseData.supplier?.name || '-'} (
+                    {purchaseData.supplier?.alias || ''})
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Kategori Vendor
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    : {purchaseData.supplier?.category || '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Nomor
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    : {purchaseData.pr_number}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
+                    Nomor PO
+                  </span>
+                  <div className='ml-3'>
+                    {canShowPurchaseOrderInvoice &&
+                    purchaseData.po_number &&
+                    purchaseData.po_number !== 'Belum dibuat' ? (
+                      <PurchaseOrderInvoice data={purchaseData} />
+                    ) : (
+                      <>
+                        : <i className='text-gray-400'>Belum dibuat</i>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Item Pembelian Section */}
+        <div className='mb-8'>
+          <div className='flex items-center justify-between mb-4 pb-2 border-b border-gray-200'>
+            <h3 className='text-lg font-semibold text-gray-800'>
+              Item Pembelian
+            </h3>
+            {canShowPurchaseOrderInvoice && (
+              <RowDropdownOptions isLast2Rows>
+                <ItemPembelianDropdown onEdit={editModal.openModal} />
+              </RowDropdownOptions>
+            )}
+          </div>
+          <div className='rounded-lg border border-gray-200 overflow-hidden'>
+            {/* Product Table */}
+            <div className='overflow-x-auto'>
+              <Table<PurchaseItem>
+                data={purchaseOrderItems}
+                columns={purchaseOrderColumns}
+                isLoading={false}
+                sorting={sorting}
+                setSorting={setSorting}
+                rowSelection={rowSelection}
+                setRowSelection={setRowSelection}
+                enableRowSelection={() => canDeleteItems}
+                className={{
+                  containerClassName: 'm-0',
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto',
+                  headerRowClassName: 'bg-gray-50 border-b border-gray-200',
+                  headerColumnClassName:
+                    'px-6 py-4 text-sm font-semibold text-gray-700 text-left',
+                  bodyRowClassName:
+                    'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                  bodyColumnClassName: 'px-6 py-4 text-sm text-gray-900',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </div>
+
+            {/* Bulk Action Buttons */}
+            {selectedRowIds.length > 0 && canDeleteItems && (
+              <div className='flex justify-center items-center mt-4 gap-4 px-6 py-4 bg-gray-50 border-t border-gray-200'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={() => {
+                    setSelectedItem(null);
+                    deleteModal.openModal();
+                  }}
+                  disabled={selectedRowIds.length === 0}
+                  className='w-fit text-sm'
+                >
+                  <Icon icon='mdi:trash-can' width={16} height={16} />
+                  Hapus Terpilih ({selectedRowIds.length})
+                </Button>
+              </div>
+            )}
+
+            {/* Bottom Section - Catatan dan Total */}
+            <div className='border-t border-gray-200 grid grid-cols-1 lg:grid-cols-5 divide-x divide-gray-200'>
+              {/* Catatan Section */}
+              <div className='lg:col-span-3 p-6 border-r border-gray-200'>
+                <h4 className='font-medium text-gray-700 mb-3'>Catatan</h4>
+                <div className='text-gray-900 min-h-[60px] italic text-sm'>
+                  {purchaseData.notes || 'Tidak ada catatan'}
+                </div>
+              </div>
+
+              {/* Summary Section */}
+              <div className='lg:col-span-2 p-6'>
+                <Table
+                  data={summaryData}
+                  columns={summaryColumns}
+                  isLoading={false}
+                  className={{
+                    containerClassName: 'm-0',
+                    tableWrapperClassName: 'overflow-x-auto',
+                    tableClassName: 'w-full table-auto',
+                    headerRowClassName: 'hidden',
+                    headerColumnClassName: 'hidden',
+                    paginationClassName: 'hidden',
+                    bodyRowClassName:
+                      'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                    bodyColumnClassName: 'px-6 py-4 text-sm text-gray-900',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Penerimaan Barang */}
+      <Card
+        collapsible
+        title='Penerimaan Barang'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full mt-8',
+        }}
+      >
+        {/* Detail Penerimaan Barang Section */}
+        <div className='my-8'>
+          <div className='flex items-center justify-between mb-4 pb-2 border-b border-gray-200'>
+            <h3 className='text-lg font-semibold text-gray-800'>
+              Informasi Penerimaan Barang
+            </h3>
+            {canShowPenerimaanBarang && (
+              <RowDropdownOptions isLast2Rows>
+                <PenerimaanBarangDropdown
+                  onEdit={penerimaanBarangModal.openModal}
+                />
+              </RowDropdownOptions>
+            )}
+          </div>
+          <div className='overflow-x-auto'>
+            {groupedGoodsReceiptItems.length > 0 ? (
+              <div>
+                {groupedGoodsReceiptItems.map((productData, index) => (
+                  <div key={productData.productIndex}>
+                    <div className='border border-gray-200 rounded-lg overflow-hidden mb-6'>
+                      {/* Product Header */}
+                      <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
+                        {productData.productIndex}.{' '}
+                        {productData.productName.toUpperCase()}
+                      </div>
+
+                      {/* Product Table */}
+                      <Table<PurchaseItem>
+                        data={productData.productGroupItems}
+                        columns={goodsReceiptColumns}
+                        isLoading={false}
+                        className={{
+                          containerClassName: 'm-0',
+                          tableWrapperClassName: 'overflow-x-auto',
+                          tableClassName: 'w-full table-auto',
+                          headerRowClassName:
+                            'bg-gray-50 border-b border-gray-200',
+                          headerColumnClassName:
+                            'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
+                          bodyRowClassName:
+                            'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                          bodyColumnClassName:
+                            'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                          paginationClassName: 'hidden',
+                        }}
+                      />
+                    </div>
+
+                    {/* Add divider after table except for last item */}
+                    {index < groupedGoodsReceiptItems.length - 1 && (
+                      <div className='border-t border-gray-200 my-6'></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='text-center py-8 text-gray-500'>
+                Tidak ada data penerimaan barang
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      {/* Confirmation Modal with Notes */}
+      <ConfirmationModalWithNotes
+        ref={confirmationModalWithNotes.ref}
+        type='success'
+        text='Apakah Anda yakin ingin melanjutkan approval ini?'
+        placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Lanjutkan',
+          color: 'success',
+          onClick: async (notes) => {
+            const payload: CreateManagerApprovalRequestPayload = {
+              action: 'APPROVED',
+              notes: notes || null,
+            };
+
+            await createManagerApprovalHandler(payload);
+            await refreshApprovals();
+            await refetchData?.();
+            confirmationModalWithNotes.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
+      {/* Staff Approval Modal */}
+      <Modal
+        ref={staffApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='add'
+          initialValues={purchaseData}
+          onCancel={handleStaffApprovalModalClose}
+          refreshApprovals={refreshApprovals}
+          onModalClose={staffApprovalModal.closeModal}
+          onRefetchData={refetchData}
+          rawDataApprovals={rawDataApprovals}
+        />
+      </Modal>
+
+      {/* Accept Approval Modal */}
+      <Modal
+        ref={acceptApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='add'
+          initialValues={purchaseData}
+          onCancel={acceptApprovalModal.closeModal}
+          refreshApprovals={refreshApprovals}
+          onModalClose={acceptApprovalModal.closeModal}
+          onRefetchData={refetchData}
+        />
+      </Modal>
+
+      {/* Edit Modal */}
+      <Modal
+        ref={editModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={handleEditModalClose}
+          refreshApprovals={refreshApprovals}
+          onModalClose={editModal.closeModal}
+          onRefetchData={refetchData}
+          rawDataApprovals={rawDataApprovals}
+        />
+      </Modal>
+
+      {/* Penerimaan Barang Modal */}
+      <Modal
+        ref={penerimaanBarangModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={penerimaanBarangModal.closeModal}
+          refreshApprovals={refreshApprovals}
+          onModalClose={penerimaanBarangModal.closeModal}
+          onRefetchData={refetchData}
+        />
+      </Modal>
+
+      {/* Staff Rejection Modal */}
+      <ConfirmationModalWithNotes
+        ref={staffRejectionModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menolak (reject) permintaan pembelian ini?'
+        placeholder='(Opsional) Masukkan alasan penolakan...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Tolak',
+          color: 'error',
+          onClick: async (notes) => {
+            const payload: CreateStaffApprovalRequestPayload = {
+              action: 'REJECTED',
+              notes: notes || null,
+            };
+
+            await createStaffApprovalHandler(payload);
+            await refetchData?.();
+            staffRejectionModal.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
+      {/* Accept Rejection Modal */}
+      <ConfirmationModalWithNotes
+        ref={acceptRejectionModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menolak (reject) penerimaan barang ini?'
+        placeholder='(Opsional) Masukkan alasan penolakan...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Tolak',
+          color: 'error',
+          onClick: async (notes) => {
+            const payload: CreateAcceptApprovalRequestPayload = {
+              action: 'REJECTED',
+              notes: notes || null,
+            };
+
+            await createAcceptApprovalHandler(payload);
+            await refetchData?.();
+            acceptRejectionModal.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
+      {/* Manager Rejection Modal */}
+      <ConfirmationModalWithNotes
+        ref={managerRejectionModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menolak (reject) approval manajer untuk permintaan pembelian ini?'
+        placeholder='(Opsional) Masukkan alasan penolakan...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Tolak',
+          color: 'error',
+          onClick: async (notes) => {
+            const payload: CreateManagerApprovalRequestPayload = {
+              action: 'REJECTED',
+              notes: notes || null,
+            };
+
+            await createManagerApprovalHandler(payload);
+            await refetchData?.();
+            managerRejectionModal.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah Anda yakin ingin menghapus ${
+          selectedItem
+            ? 'item pembelian ini?'
+            : `${selectedRowIds.length} item pembelian yang dipilih?`
+        }`}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Hapus',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: async () => {
+            await deleteItemsHandler();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+    </section>
+  );
+};
+
+export default PurchaseOrderDetail;
diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
new file mode 100644
index 00000000..36aea9c7
--- /dev/null
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -0,0 +1,534 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  Image,
+  StyleSheet,
+  Font,
+  pdf,
+} from '@react-pdf/renderer';
+import { Icon } from '@iconify/react';
+import toast from 'react-hot-toast';
+
+import Button from '@/components/Button';
+import { Purchase } from '@/types/api/purchase/purchase';
+import { formatDate, formatNumber } from '@/lib/helper';
+
+Font.register({
+  family: 'Helvetica',
+  src: 'helvetica',
+});
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 10,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    marginBottom: 20,
+  },
+  logo: {
+    width: 120,
+    height: 30,
+    marginBottom: 8,
+  },
+  companyInfo: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+    color: '#1f74bf',
+  },
+  address: {
+    fontSize: 8,
+    color: '#666666',
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    marginBottom: 15,
+  },
+  titleSection: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    flex: 3,
+    color: '#1f74bf',
+  },
+  poInfo: {
+    flex: 1,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1f74bf',
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#000000',
+    borderTopStyle: 'solid',
+  },
+  grandTotalLabel: {
+    flex: 3,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+  },
+  grandTotalValue: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 0,
+  },
+  allocationSection: {
+    marginBottom: 15,
+  },
+  allocationTable: {
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerTable: {
+    marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  innerCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  footer: {
+    marginTop: 30,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  footerCompany: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    flex: 1,
+    color: '#1f74bf',
+  },
+  specialInstructionTable: {
+    width: '60%',
+    maxWidth: 300,
+    borderWidth: 1,
+    borderColor: '#000000',
+    flex: 1,
+  },
+});
+
+interface PurchaseOrderInvoiceProps {
+  data?: Purchase;
+  className?: string;
+}
+
+const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
+  const [, setIsGeneratingPDF] = useState(false);
+  const purchaseData = data;
+
+  const grandTotal = useMemo(() => {
+    return (
+      purchaseData?.items?.reduce(
+        (sum, item) => sum + (item.total_price || 0),
+        0
+      ) || 0
+    );
+  }, [purchaseData?.items]);
+
+  const handleDownloadPDF = async () => {
+    if (!purchaseData) {
+      toast.error('No purchase order data available');
+      return;
+    }
+
+    setIsGeneratingPDF(true);
+    try {
+      const PDFDocument = () => (
+        <Document>
+          <Page size='A4' style={pdfStyles.page}>
+            {/* Header Section */}
+            <View style={pdfStyles.header}>
+              <Image
+                src={'https://placehold.co/120x30/png'}
+                style={pdfStyles.logo}
+                id={'mbu-logo'}
+              />
+              <Text style={pdfStyles.companyInfo}>
+                PT LUMBUNG TELUR INDONESIA
+              </Text>
+              <Text style={pdfStyles.address}>
+                SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+                Cipedes, Kec. Sukajadi, Kota Bandung 40162
+              </Text>
+              <View style={pdfStyles.divider} />
+            </View>
+
+            {/* Purchase Order Title */}
+            <View style={pdfStyles.titleSection}>
+              <Text style={pdfStyles.title}>PURCHASE ORDER</Text>
+              <View style={pdfStyles.poInfo}>
+                <Text>PO Number: {purchaseData?.po_number || '-'}</Text>
+                <Text>
+                  Date:{' '}
+                  {purchaseData?.po_date
+                    ? formatDate(purchaseData.po_date, 'DD MMM YYYY')
+                    : formatDate(new Date(), 'DD MMM YYYY')}
+                </Text>
+              </View>
+            </View>
+
+            {/* Vendor and Ship To Table */}
+            <View style={pdfStyles.table}>
+              <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                <View style={pdfStyles.tableCellHeader}>
+                  <Text>Vendor</Text>
+                </View>
+                <View style={pdfStyles.tableCellHeaderLast}>
+                  <Text>Ship To</Text>
+                </View>
+              </View>
+              <View style={pdfStyles.tableRow}>
+                <View style={pdfStyles.tableCell}>
+                  <Text style={{ fontWeight: 'bold' }}>
+                    {purchaseData?.supplier?.name || '-'} (
+                    {purchaseData?.supplier?.alias || ''})
+                  </Text>
+                  <Text>{purchaseData?.supplier?.category || '-'}</Text>
+                  <Text>
+                    Credit Term: {purchaseData?.credit_term || 0} hari
+                  </Text>
+                  <Text>
+                    Due Date:{' '}
+                    {purchaseData?.due_date
+                      ? formatDate(purchaseData.due_date, 'DD MMM YYYY')
+                      : '-'}
+                  </Text>
+                </View>
+                <View style={pdfStyles.tableCellLast}>
+                  <Text style={{ fontWeight: 'bold' }}>
+                    PT LUMBUNG TELUR INDONESIA
+                  </Text>
+                  <Text>
+                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                      ? purchaseData.items[0].warehouse.location.name
+                      : '-'}
+                  </Text>
+                  <Text>
+                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                      ? purchaseData.items[0].warehouse.location.address
+                      : '-'}
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            {/* Item Description Table */}
+            <View>
+              <View style={pdfStyles.table}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Item Description</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Unit Price</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Quantity</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Total Amount</Text>
+                  </View>
+                </View>
+                {purchaseData?.items?.map((item, index) => {
+                  const isLastItem =
+                    index === (purchaseData?.items?.length || 0) - 1;
+                  return (
+                    <View
+                      key={index}
+                      style={[
+                        pdfStyles.tableRow,
+                        isLastItem ? {} : pdfStyles.tableBorderBottom,
+                      ]}
+                    >
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{item.product?.name || '-'}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRight}>
+                        <Text>Rp{formatNumber(item.price || 0)}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRight}>
+                        <Text>{formatNumber(item.sub_qty || 0)}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRightLast}>
+                        <Text>Rp{formatNumber(item.total_price || 0)}</Text>
+                      </View>
+                    </View>
+                  );
+                }) || []}
+
+                {/* Grand Total Row inside table */}
+                <View style={pdfStyles.grandTotalRow}>
+                  <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+                    <Text></Text>
+                  </View>
+                  <View
+                    style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}
+                  >
+                    <Text></Text>
+                  </View>
+                  <View style={pdfStyles.tableCellRight}>
+                    <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+                  </View>
+                  <View
+                    style={[
+                      pdfStyles.tableCellRightLast,
+                      { fontWeight: 'bold' },
+                    ]}
+                  >
+                    <Text>Rp{formatNumber(grandTotal)}</Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+
+            {/* Product Allocation Section */}
+            <View style={pdfStyles.allocationSection}>
+              <Text style={pdfStyles.sectionTitle}>Product Allocation</Text>
+              <View style={pdfStyles.allocationTable}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Warehouse Name</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Area</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Location Address</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Product Allocation</Text>
+                  </View>
+                </View>
+                {purchaseData?.items?.map((item, itemIndex) => (
+                  <View key={itemIndex} style={pdfStyles.tableRow}>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>{item.warehouse?.name || '-'}</Text>
+                    </View>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>{item.warehouse?.area?.name || '-'}</Text>
+                    </View>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>
+                        {item.warehouse?.type === 'LOKASI'
+                          ? item.warehouse.location.address
+                          : '-'}
+                      </Text>
+                    </View>
+                    <View style={pdfStyles.tableCellLast}>
+                      {/* Inner table for product allocation */}
+                      <View style={pdfStyles.innerTable}>
+                        {/* Header for inner table */}
+                        <View
+                          style={[
+                            pdfStyles.innerRow,
+                            { backgroundColor: '#F5F5F5' },
+                          ]}
+                        >
+                          <Text style={pdfStyles.innerCell}>Item</Text>
+                          <Text style={pdfStyles.innerCellRightLast}>
+                            Quantity
+                          </Text>
+                        </View>
+                        {/* Data row */}
+                        <View style={pdfStyles.innerRow}>
+                          <Text style={pdfStyles.innerCell}>
+                            {item.product?.name || '-'}
+                          </Text>
+                          <Text style={pdfStyles.innerCellRightLast}>
+                            {formatNumber(item.total_qty || 0)} of{' '}
+                            {formatNumber(item.sub_qty || 0)}
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                )) || []}
+              </View>
+            </View>
+
+            {/* Footer with Special Instructions */}
+            <View style={pdfStyles.footer}>
+              <View style={pdfStyles.specialInstructionTable}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Notes</Text>
+                  </View>
+                </View>
+                <View style={pdfStyles.tableRow}>
+                  <View style={pdfStyles.tableCellLast}>
+                    <Text>{purchaseData?.notes || '-'}</Text>
+                  </View>
+                </View>
+              </View>
+              <View style={pdfStyles.footerCompany}>
+                <Text>PT LUMBUNG TELUR INDONESIA</Text>
+              </View>
+            </View>
+          </Page>
+        </Document>
+      );
+
+      const blob = await pdf(<PDFDocument />).toBlob();
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${purchaseData?.po_number || 'purchase-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!purchaseData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No purchase order data available</div>
+      </div>
+    );
+  }
+
+  return purchaseData?.po_number &&
+    purchaseData.po_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {purchaseData.po_number}
+    </Button>
+  ) : null;
+};
+
+export default PurchaseOrderInvoice;
diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx
index 85ec4f3e..26ce1ce8 100644
--- a/src/components/steps/StepItem.tsx
+++ b/src/components/steps/StepItem.tsx
@@ -24,7 +24,14 @@ const StepItem = ({ children, icon, className, color }: StepItemProps) => {
 
   return (
     <li className={cn(stepItemBaseClassName, className)}>
-      <span className='step-icon'>{icon}</span>
+      <span
+        className={cn('step-icon', {
+          'transition-shadow shadow-[0_0_10px_2px_var(--color-warning)] hover:shadow-[0_0_15px_5px_var(--color-warning)]':
+            color === 'warning',
+        })}
+      >
+        {icon}
+      </span>
 
       <div>{children}</div>
     </li>
diff --git a/src/components/table/RowCollapseOptions.tsx b/src/components/table/RowCollapseOptions.tsx
index 42f9720a..ce90314c 100644
--- a/src/components/table/RowCollapseOptions.tsx
+++ b/src/components/table/RowCollapseOptions.tsx
@@ -16,7 +16,7 @@ const RowCollapseOptions = ({ children }: RowCollapseOptionsProps) => {
           <Icon icon='material-symbols:more-vert' width={16} height={16} />
         </Button>
       }
-      className='w-fit'
+      className='w-fit min-w-36'
       titleClassName='p-0! justify-self-end'
     >
       {children}
diff --git a/src/components/table/RowOptionsMenuWrapper.tsx b/src/components/table/RowOptionsMenuWrapper.tsx
new file mode 100644
index 00000000..53a8ecf1
--- /dev/null
+++ b/src/components/table/RowOptionsMenuWrapper.tsx
@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface RowOptionsMenuWrapperProps {
+  children?: ReactNode;
+  type: 'dropdown' | 'collapse';
+}
+
+const RowOptionsMenuWrapper = ({
+  children,
+  type,
+}: RowOptionsMenuWrapperProps) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content mr-2': type === 'dropdown',
+          'w-fit ml-auto mt-2': type === 'collapse',
+        },
+        'p-2.5 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>{children}</div>
+    </div>
+  );
+};
+
+export default RowOptionsMenuWrapper;
diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
index 4e2e2c93..57010881 100644
--- a/src/components/table/TableRowOptions.tsx
+++ b/src/components/table/TableRowOptions.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
-import Button from '../Button';
-import { cn } from '@/lib/helper';
+import Button from '@/components/Button';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 interface TableRowOptionsProps {
   type?: 'dropdown' | 'collapse';
@@ -21,16 +21,7 @@ export const TableRowOptions = ({
   showEdit = true,
   showDelete = true,
 }: TableRowOptionsProps) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`${basePath}/detail/?${queryParam}=${recordId}`}
       variant='ghost'
@@ -56,7 +47,7 @@ export const TableRowOptions = ({
         onClick={onDelete}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit justify-start text-sm'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -67,5 +58,5 @@ export const TableRowOptions = ({
         Delete
       </Button>
     )}
-  </div>
+  </RowOptionsMenuWrapper>
 );
diff --git a/src/components/table/TableRowSizeSelector.tsx b/src/components/table/TableRowSizeSelector.tsx
index a6fd039d..645151b6 100644
--- a/src/components/table/TableRowSizeSelector.tsx
+++ b/src/components/table/TableRowSizeSelector.tsx
@@ -1,4 +1,4 @@
-import SelectInput from '../input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
 
 export interface OptionType {
   label: string;
@@ -9,15 +9,18 @@ interface TableRowSizeSelectorProps {
   value: number;
   onChange: (val: OptionType | OptionType[] | null) => void;
   options: OptionType[];
+  children?: React.ReactNode;
 }
 
 export const TableRowSizeSelector = ({
   value,
   onChange,
   options,
+  children,
 }: TableRowSizeSelectorProps) => {
   return (
-    <div className='flex flex-row justify-end'>
+    <div className='flex flex-row gap-3 items-end justify-end'>
+      {children}
       <SelectInput
         label='Baris'
         options={options}
diff --git a/src/components/table/TableToolbar.tsx b/src/components/table/TableToolbar.tsx
index e3b385b1..a61cf094 100644
--- a/src/components/table/TableToolbar.tsx
+++ b/src/components/table/TableToolbar.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
-import Button from '../Button';
-import DebouncedTextInput from '../input/DebouncedTextInput';
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 
 interface TableToolbarProps {
   addButton?: {
@@ -18,8 +18,13 @@ export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
   return (
     <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
       {addButton && (
-        <div className='flex flex-row'>
-          <Button href={addButton.href} color='primary'>
+        <div className='w-full flex flex-row'>
+          <Button
+            href={addButton.href}
+            variant='outline'
+            color='primary'
+            className='w-full sm:w-fit'
+          >
             <Icon icon='ic:round-plus' width={24} height={24} />
             {addButton.label}
           </Button>
diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
new file mode 100644
index 00000000..5333c016
--- /dev/null
+++ b/src/config/approval-line.ts
@@ -0,0 +1,147 @@
+import { ApprovalLine } from '@/types/config/constant';
+
+export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Aktif',
+  },
+  {
+    step_number: 3,
+    step_name: 'Selesai',
+  },
+] as const;
+
+export const PROJECT_FLOCK_KANDANGS_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+  {
+    step_number: 3,
+    step_name: 'Selesai',
+  },
+] as const;
+
+export const CHICKINS_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const TRANSFER_TO_LAYING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const MARKETING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Sales Order',
+  },
+  {
+    step_number: 3,
+    step_name: 'Delivery Order',
+  },
+] as const;
+
+export const RECORDING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const GROWING_RECORDING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const LAYING_RECORDING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const PURCHASE_ORDER_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Staff Purchase',
+  },
+  {
+    step_number: 3,
+    step_name: 'Manager Purchase',
+  },
+  {
+    step_number: 4,
+    step_name: 'Penerimaan Produk',
+  },
+  {
+    step_number: 5,
+    step_name: 'Selesai',
+  },
+] as const;
+
+export const EXPENSE_REQUEST_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Approval Manager',
+  },
+  {
+    step_number: 3,
+    step_name: 'Approval Finance',
+  },
+  {
+    step_number: 4,
+    step_name: 'Realisasi',
+  },
+  {
+    step_number: 5,
+    step_name: 'Selesai',
+  },
+] as const;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 2b87c4d7..96fc8401 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -1,132 +1,125 @@
-type MAIN_DRAWER_MENU = {
-  title: string;
-  link: string;
-  icon: string;
-  submenu?: MAIN_DRAWER_MENU[];
-};
+import { SidebarMenuItem } from '@/components/molecules/SidebarMenu';
 
-export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
+export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
   {
-    title: 'Dashboard',
+    text: 'Dashboard',
     link: '/dashboard',
-    icon: 'gg:chart',
+    icon: 'heroicons-outline:chart-bar-square',
   },
-
   {
-    title: 'Production',
+    text: 'Produksi',
     link: '/production',
-    icon: 'material-symbols:conveyor-belt-outline-rounded',
+    icon: 'heroicons-outline:wrench-screwdriver',
     submenu: [
       {
-        title: 'List Flock',
+        text: 'Daftar Flock',
         link: '/production/project-flock',
-        icon: 'material-symbols:list-alt-add-outline-rounded',
       },
       {
-        title: 'Chick In',
-        link: '/production/chickin',
-        icon: 'mdi:home-import-outline',
-      },
-      {
-        title: 'Recording',
+        text: 'Recording',
         link: '/production/recording',
-        icon: 'mdi:clipboard-text',
+      },
+      {
+        text: 'Transfer to Laying',
+        link: '/production/transfer-to-laying',
       },
     ],
   },
-
   {
-    title: 'Persediaan',
+    text: 'Pembelian',
+    link: '/purchase',
+    icon: 'heroicons-outline:shopping-cart',
+  },
+  {
+    text: 'Penjualan',
+    link: '/marketing',
+    icon: 'heroicons-outline:currency-dollar',
+  },
+  {
+    text: 'Biaya Operasional',
+    link: '/expense',
+    icon: 'heroicons:wallet',
+  },
+  {
+    text: 'Closing',
+    link: '/closing',
+    icon: 'heroicons-outline:presentation-chart-bar',
+  },
+  {
+    text: 'Persediaan',
     link: '/inventory',
-    icon: 'mdi:warehouse',
+    icon: 'heroicons-outline:folder',
     submenu: [
       {
-        title: 'Product',
+        text: 'Produk',
         link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
       },
       {
-        title: 'Penyesuaian Stok',
+        text: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
-        icon: 'mdi:database-edit',
       },
       {
-        title: 'Transfer Stok',
+        text: 'Transfer Stok',
         link: '/inventory/movement',
-        icon: 'mdi:swap-horizontal',
       },
     ],
   },
-
   {
-    title: 'Master Data',
+    text: 'Master Data',
     link: '/master-data',
-    icon: 'majesticons:data-line',
+    icon: 'heroicons-outline:circle-stack',
     submenu: [
       {
-        title: 'Product',
+        text: 'Produk',
         link: '/master-data/product',
-        icon: 'fluent-mdl2:product-variant',
       },
       {
-        title: 'Product Category',
+        text: 'Kategori Produk',
         link: '/master-data/product-category',
-        icon: 'carbon:categories',
       },
       {
-        title: 'Bank',
+        text: 'Bank',
         link: '/master-data/bank',
-        icon: 'mdi:bank-outline',
       },
       {
-        title: 'Area',
+        text: 'Area',
         link: '/master-data/area',
-        icon: 'majesticons:map-marker-area-line',
       },
       {
-        title: 'Location',
+        text: 'Lokasi',
         link: '/master-data/location',
-        icon: 'mingcute:location-line',
       },
       {
-        title: 'Kandang',
+        text: 'Kandang',
         link: '/master-data/kandang',
-        icon: 'mdi:farm-home-outline',
       },
       {
-        title: 'Warehouse',
+        text: 'Warehouse',
         link: '/master-data/warehouse',
-        icon: 'hugeicons:warehouse',
       },
       {
-        title: 'Customer',
+        text: 'Customer',
         link: '/master-data/customer',
-        icon: 'ix:customer',
       },
       {
-        title: 'UOM',
+        text: 'UOM',
         link: '/master-data/uom',
-        icon: 'lsicon:measure-outline',
       },
       {
-        title: 'Non-Stock',
+        text: 'Non-Stock',
         link: '/master-data/nonstock',
-        icon: 'fluent:box-32-regular',
       },
       {
-        title: 'FCR',
+        text: 'FCR',
         link: '/master-data/fcr',
-        icon: 'fluent:food-chicken-leg-16-regular',
       },
       {
-        title: 'Supplier',
+        text: 'Supplier',
         link: '/master-data/supplier',
-        icon: 'material-symbols:add-business-outline-rounded',
       },
       {
-        title: 'Flock',
+        text: 'Flock',
         link: '/master-data/flock',
-        icon: 'material-symbols:raven-outline-rounded',
       },
     ],
   },
@@ -220,3 +213,41 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Culling', value: 'Ayam Culling' },
   { label: 'Ayam Mati', value: 'Ayam Mati' },
 ];
+
+export const APPROVAL_WORKFLOWS = [
+  {
+    key: 'PROJECT_FLOCKS',
+    steps: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+      },
+      {
+        step_number: 2,
+        step_name: 'Aktif',
+      },
+    ],
+  },
+  {
+    key: 'RECORDINGS',
+    steps: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+      },
+      {
+        step_number: 2,
+        step_name: 'Disetujui',
+      },
+    ],
+  },
+];
+
+export const ACCEPTED_FILE_TYPE = {
+  PDF: {
+    'application/pdf': ['.pdf'],
+  },
+  IMAGE: {
+    'image/*': [],
+  },
+};
diff --git a/src/dummy/closing.dummy.ts b/src/dummy/closing.dummy.ts
new file mode 100644
index 00000000..3a20cdaf
--- /dev/null
+++ b/src/dummy/closing.dummy.ts
@@ -0,0 +1,1136 @@
+/**
+ * Dummy Data untuk Closing API
+ *
+ * File ini berisi dummy data untuk testing API Closing sebelum backend siap.
+ *
+ * Struktur data mengikuti tipe yang didefinisikan di @/types/api/closing.d.ts
+ *
+ * @example
+ * // 1. Menggunakan getAllFetcher dengan SWR:
+ * import useSWR from 'swr';
+ * import { ClosingApi } from '@/services/api/closing';
+ *
+ * const { data, error, isLoading } = useSWR(
+ *   '/closings',
+ *   ClosingApi.getAllFetcher.bind(ClosingApi)
+ * );
+ *
+ * if (data?.status === 'success') {
+ *   console.log(data.data); // Array of Closing objects
+ * }
+ *
+ * @example
+ * // 2. Menggunakan getSingle:
+ * import { ClosingApi } from '@/services/api/closing';
+ *
+ * const response = await ClosingApi.getSingle(1);
+ * if (response?.status === 'success') {
+ *   console.log(response.data); // Single Closing object
+ * } else if (response?.status === 'error') {
+ *   console.error(response.message); // Error message
+ * }
+ *
+ * @example
+ * // 3. Menggunakan getGeneralInfo dengan SWR:
+ * import useSWR from 'swr';
+ * import { ClosingApi } from '@/services/api/closing';
+ *
+ * const closingId = 1;
+ * const { data, error, isLoading } = useSWR(
+ *   closingId,
+ *   (id: number) => ClosingApi.getGeneralInfo(id)
+ * );
+ *
+ * if (data?.status === 'success') {
+ *   console.log(data.data); // ClosingGeneralInformation object
+ * }
+ *
+ * @example
+ * // 4. Menggunakan getAllIncomingSapronakFetcher dengan SWR:
+ * import useSWR from 'swr';
+ * import { ClosingApi } from '@/services/api/closing';
+ *
+ * const { data, error, isLoading } = useSWR(
+ *   `${ClosingApi.basePath}/1/sapronak/incoming`,
+ *   ClosingApi.getAllIncomingSapronakFetcher.bind(ClosingApi)
+ * );
+ *
+ * if (data?.status === 'success') {
+ *   console.log(data.data); // Array of ClosingIncomingSapronak
+ * }
+ *
+ * @example
+ * // 5. Menggunakan getAllOutgoingSapronakFetcher dengan SWR:
+ * import useSWR from 'swr';
+ * import { ClosingApi } from '@/services/api/closing';
+ *
+ * const { data, error, isLoading } = useSWR(
+ *   `${ClosingApi.basePath}/1/sapronak/outgoing`,
+ *   ClosingApi.getAllOutgoingSapronakFetcher.bind(ClosingApi)
+ * );
+ *
+ * if (data?.status === 'success') {
+ *   console.log(data.data); // Array of ClosingOutgoingSapronak
+ * }
+ *
+ * @see {@link /home/sweetpotet/Documents/projects/lti-web-client/src/types/api/closing.d.ts}
+ */
+
+import { format } from 'date-fns';
+import {
+  Closing,
+  ClosingGeneralInformation,
+  ClosingIncomingSapronak,
+  ClosingOutgoingSapronak,
+  ClosingOverhead,
+  ClosingSapronakCalculation,
+} from '@/types/api/closing';
+import { CreatedUser, BaseApiResponse } from '@/types/api/api-general';
+
+// Waktu saat ini untuk created_at/updated_at
+const now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+const today = format(new Date(), 'yyyy-MM-dd');
+const yesterday = format(
+  new Date().setDate(new Date().getDate() - 1),
+  'yyyy-MM-dd'
+);
+const lastWeek = format(
+  new Date().setDate(new Date().getDate() - 7),
+  'yyyy-MM-dd'
+);
+const lastMonth = format(
+  new Date().setMonth(new Date().getMonth() - 1),
+  'yyyy-MM-dd'
+);
+
+// ======================
+// 👤 Created User
+// ======================
+export const createdUser: CreatedUser = {
+  id: 1,
+  id_user: 1,
+  email: 'admin@example.com',
+  name: 'Admin Utama',
+};
+
+// ======================
+// 📊 Closing Dummy Data
+// ======================
+export const dummyClosings: Closing[] = [
+  // 1. Closing dengan status Pengajuan - GROWING
+  {
+    id: 1,
+    location_id: 1,
+    location_name: 'Farm Sukajadi',
+    project_category: 'GROWING',
+    period: 1,
+    closing_date: today,
+    shed_label: 'Kandang A1, A2, A3',
+    shed_count: 3,
+    sales_paid_amount: 150000000,
+    sales_remaining_amount: 50000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Pengajuan',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+
+  // 2. Closing dengan status Aktif - LAYING
+  {
+    id: 2,
+    location_id: 2,
+    location_name: 'Farm Cihampelas',
+    project_category: 'LAYING',
+    period: 2,
+    closing_date: yesterday,
+    shed_label: 'Kandang B1, B2',
+    shed_count: 2,
+    sales_paid_amount: 200000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Aktif',
+    created_user: createdUser,
+    created_at: lastWeek,
+    updated_at: yesterday,
+  },
+
+  // 3. Closing dengan status Selesai - GROWING
+  {
+    id: 3,
+    location_id: 3,
+    location_name: 'Farm Pasteur',
+    project_category: 'GROWING',
+    period: 3,
+    closing_date: lastWeek,
+    shed_label: 'Kandang C1, C2, C3, C4',
+    shed_count: 4,
+    sales_paid_amount: 300000000,
+    sales_remaining_amount: 25000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Selesai',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastWeek,
+  },
+
+  // 4. Closing dengan status Aktif - LAYING
+  {
+    id: 4,
+    location_id: 4,
+    location_name: 'Farm Setiabudi',
+    project_category: 'LAYING',
+    period: 1,
+    closing_date: today,
+    shed_label: 'Kandang D1',
+    shed_count: 1,
+    sales_paid_amount: 75000000,
+    sales_remaining_amount: 75000000,
+    sales_payment_status: 'Belum Lunas',
+    project_status: 'Aktif',
+    created_user: createdUser,
+    created_at: yesterday,
+    updated_at: now,
+  },
+
+  // 5. Closing dengan status Selesai - GROWING
+  {
+    id: 5,
+    location_id: 5,
+    location_name: 'Farm Dago',
+    project_category: 'GROWING',
+    period: 4,
+    closing_date: lastMonth,
+    shed_label: 'Kandang E1, E2, E3, E4, E5',
+    shed_count: 5,
+    sales_paid_amount: 500000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Selesai',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastMonth,
+  },
+
+  // 6. Closing dengan status Pengajuan - LAYING
+  {
+    id: 6,
+    location_id: 6,
+    location_name: 'Farm Lembang',
+    project_category: 'LAYING',
+    period: 2,
+    closing_date: undefined, // Belum ada tanggal closing
+    shed_label: 'Kandang F1, F2',
+    shed_count: 2,
+    sales_paid_amount: 0,
+    sales_remaining_amount: 180000000,
+    sales_payment_status: 'Belum Lunas',
+    project_status: 'Pengajuan',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+
+  // 7. Closing dengan status Aktif - GROWING
+  {
+    id: 7,
+    location_id: 7,
+    location_name: 'Farm Ciwidey',
+    project_category: 'GROWING',
+    period: 1,
+    closing_date: yesterday,
+    shed_label: 'Kandang G1, G2, G3',
+    shed_count: 3,
+    sales_paid_amount: 120000000,
+    sales_remaining_amount: 30000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Aktif',
+    created_user: createdUser,
+    created_at: lastWeek,
+    updated_at: yesterday,
+  },
+
+  // 8. Closing dengan status Selesai - LAYING
+  {
+    id: 8,
+    location_id: 8,
+    location_name: 'Farm Bandung Timur',
+    project_category: 'LAYING',
+    period: 3,
+    closing_date: lastMonth,
+    shed_label: 'Kandang H1, H2, H3, H4, H5, H6',
+    shed_count: 6,
+    sales_paid_amount: 600000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Selesai',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastMonth,
+  },
+];
+
+// ======================
+// 📊 Closing General Information Dummy Data
+// ======================
+export const dummyClosingGeneralInformations: ClosingGeneralInformation[] = [
+  // 1. General Info - GROWING - Pengajuan
+  {
+    id: 1,
+    location_id: 1,
+    location_name: 'Farm Sukajadi',
+    project_category: 'GROWING',
+    period: 1,
+    closing_date: today,
+    shed_label: 'Kandang A1, A2, A3',
+    shed_count: 3,
+    sales_paid_amount: 150000000,
+    sales_remaining_amount: 50000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Pengajuan',
+    flock_id: 101,
+    project_type: 'GROWING',
+    population: 15000,
+    active_house_count: 3,
+    closing_status: 'Draft',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+
+  // 2. General Info - LAYING - Aktif
+  {
+    id: 2,
+    location_id: 2,
+    location_name: 'Farm Cihampelas',
+    project_category: 'LAYING',
+    period: 2,
+    closing_date: yesterday,
+    shed_label: 'Kandang B1, B2',
+    shed_count: 2,
+    sales_paid_amount: 200000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Aktif',
+    flock_id: 102,
+    project_type: 'LAYING',
+    population: 10000,
+    active_house_count: 2,
+    closing_status: 'In Progress',
+    created_user: createdUser,
+    created_at: lastWeek,
+    updated_at: yesterday,
+  },
+
+  // 3. General Info - GROWING - Selesai
+  {
+    id: 3,
+    location_id: 3,
+    location_name: 'Farm Pasteur',
+    project_category: 'GROWING',
+    period: 3,
+    closing_date: lastWeek,
+    shed_label: 'Kandang C1, C2, C3, C4',
+    shed_count: 4,
+    sales_paid_amount: 300000000,
+    sales_remaining_amount: 25000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Selesai',
+    flock_id: 103,
+    project_type: 'GROWING',
+    population: 20000,
+    active_house_count: 4,
+    closing_status: 'Completed',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastWeek,
+  },
+
+  // 4. General Info - LAYING - Aktif
+  {
+    id: 4,
+    location_id: 4,
+    location_name: 'Farm Setiabudi',
+    project_category: 'LAYING',
+    period: 1,
+    closing_date: today,
+    shed_label: 'Kandang D1',
+    shed_count: 1,
+    sales_paid_amount: 75000000,
+    sales_remaining_amount: 75000000,
+    sales_payment_status: 'Belum Lunas',
+    project_status: 'Aktif',
+    flock_id: 104,
+    project_type: 'LAYING',
+    population: 5000,
+    active_house_count: 1,
+    closing_status: 'In Progress',
+    created_user: createdUser,
+    created_at: yesterday,
+    updated_at: now,
+  },
+
+  // 5. General Info - GROWING - Selesai
+  {
+    id: 5,
+    location_id: 5,
+    location_name: 'Farm Dago',
+    project_category: 'GROWING',
+    period: 4,
+    closing_date: lastMonth,
+    shed_label: 'Kandang E1, E2, E3, E4, E5',
+    shed_count: 5,
+    sales_paid_amount: 500000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Selesai',
+    flock_id: 105,
+    project_type: 'GROWING',
+    population: 25000,
+    active_house_count: 5,
+    closing_status: 'Completed',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastMonth,
+  },
+
+  // 6. General Info - LAYING - Pengajuan
+  {
+    id: 6,
+    location_id: 6,
+    location_name: 'Farm Lembang',
+    project_category: 'LAYING',
+    period: 2,
+    closing_date: undefined,
+    shed_label: 'Kandang F1, F2',
+    shed_count: 2,
+    sales_paid_amount: 0,
+    sales_remaining_amount: 180000000,
+    sales_payment_status: 'Belum Lunas',
+    project_status: 'Pengajuan',
+    flock_id: 106,
+    project_type: 'LAYING',
+    population: 12000,
+    active_house_count: 2,
+    closing_status: 'Draft',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+
+  // 7. General Info - GROWING - Aktif
+  {
+    id: 7,
+    location_id: 7,
+    location_name: 'Farm Ciwidey',
+    project_category: 'GROWING',
+    period: 1,
+    closing_date: yesterday,
+    shed_label: 'Kandang G1, G2, G3',
+    shed_count: 3,
+    sales_paid_amount: 120000000,
+    sales_remaining_amount: 30000000,
+    sales_payment_status: 'Sebagian Lunas',
+    project_status: 'Aktif',
+    flock_id: 107,
+    project_type: 'GROWING',
+    population: 18000,
+    active_house_count: 3,
+    closing_status: 'In Progress',
+    created_user: createdUser,
+    created_at: lastWeek,
+    updated_at: yesterday,
+  },
+
+  // 8. General Info - LAYING - Selesai
+  {
+    id: 8,
+    location_id: 8,
+    location_name: 'Farm Bandung Timur',
+    project_category: 'LAYING',
+    period: 3,
+    closing_date: lastMonth,
+    shed_label: 'Kandang H1, H2, H3, H4, H5, H6',
+    shed_count: 6,
+    sales_paid_amount: 600000000,
+    sales_remaining_amount: 0,
+    sales_payment_status: 'Lunas',
+    project_status: 'Selesai',
+    flock_id: 108,
+    project_type: 'LAYING',
+    population: 30000,
+    active_house_count: 6,
+    closing_status: 'Completed',
+    created_user: createdUser,
+    created_at: lastMonth,
+    updated_at: lastMonth,
+  },
+];
+
+// ======================
+// 📦 Incoming Sapronak Dummy Data
+// ======================
+export const dummyIncomingSapronaks: ClosingIncomingSapronak[] = [
+  {
+    id: 1,
+    date: today,
+    reference_number: 'IN-2025-001',
+    transaction_type: 'Pembelian',
+    product_name: 'DOC Broiler Cobb 500',
+    product_category: 'DOC',
+    product_sub_category: 'DOC Broiler',
+    source_warehouse: 'Gudang Pusat',
+    destination_warehouse: 'Kandang A1',
+    quantity: 5000,
+    unit: 'Ekor',
+    formatted_quantity: '5,000 Ekor',
+    notes: 'DOC berkualitas tinggi dari supplier terpercaya',
+  },
+  {
+    id: 2,
+    date: yesterday,
+    reference_number: 'IN-2025-002',
+    transaction_type: 'Transfer Masuk',
+    product_name: 'Pakan Starter BR-1',
+    product_category: 'Pakan',
+    product_sub_category: 'Starter',
+    source_warehouse: 'Gudang Area Bandung',
+    destination_warehouse: 'Kandang B1',
+    quantity: 100,
+    unit: 'Sak',
+    formatted_quantity: '100 Sak (5,000 Kg)',
+    notes: 'Pakan starter untuk periode awal',
+  },
+  {
+    id: 3,
+    date: lastWeek,
+    reference_number: 'IN-2025-003',
+    transaction_type: 'Pembelian',
+    product_name: 'Vitamin B Complex',
+    product_category: 'OVK',
+    product_sub_category: 'Vitamin',
+    source_warehouse: 'Supplier Medion',
+    destination_warehouse: 'Gudang Farmasi',
+    quantity: 50,
+    unit: 'Botol',
+    formatted_quantity: '50 Botol',
+    notes: 'Vitamin untuk meningkatkan daya tahan tubuh',
+  },
+  {
+    id: 4,
+    date: today,
+    reference_number: 'IN-2025-004',
+    transaction_type: 'Pembelian',
+    product_name: 'Pakan Finisher BR-2',
+    product_category: 'Pakan',
+    product_sub_category: 'Finisher',
+    source_warehouse: 'Gudang Pusat',
+    destination_warehouse: 'Kandang C1',
+    quantity: 200,
+    unit: 'Sak',
+    formatted_quantity: '200 Sak (10,000 Kg)',
+    notes: 'Pakan finisher untuk periode akhir',
+  },
+  {
+    id: 5,
+    date: yesterday,
+    reference_number: 'IN-2025-005',
+    transaction_type: 'Transfer Masuk',
+    product_name: 'Antibiotik Enrofloxacin',
+    product_category: 'OVK',
+    product_sub_category: 'Obat',
+    source_warehouse: 'Gudang Area Jakarta',
+    destination_warehouse: 'Gudang Farmasi',
+    quantity: 30,
+    unit: 'Box',
+    formatted_quantity: '30 Box',
+    notes: 'Antibiotik untuk pencegahan penyakit',
+  },
+];
+
+// ======================
+// 📤 Outgoing Sapronak Dummy Data
+// ======================
+export const dummyOutgoingSapronaks: ClosingOutgoingSapronak[] = [
+  {
+    id: 1,
+    date: today,
+    reference_number: 'OUT-2025-001',
+    transaction_type: 'Pemakaian',
+    product_name: 'Pakan Starter BR-1',
+    product_category: 'Pakan',
+    product_sub_category: 'Starter',
+    source_warehouse: 'Kandang A1',
+    destination_warehouse: 'Konsumsi Kandang A1',
+    quantity: 50,
+    unit: 'Sak',
+    formatted_quantity: '50 Sak (2,500 Kg)',
+    notes: 'Pemakaian pakan harian periode starter',
+  },
+  {
+    id: 2,
+    date: yesterday,
+    reference_number: 'OUT-2025-002',
+    transaction_type: 'Transfer Keluar',
+    product_name: 'DOC Broiler Cobb 500',
+    product_category: 'DOC',
+    product_sub_category: 'DOC Broiler',
+    source_warehouse: 'Kandang B1',
+    destination_warehouse: 'Kandang B2',
+    quantity: 1000,
+    unit: 'Ekor',
+    formatted_quantity: '1,000 Ekor',
+    notes: 'Transfer DOC ke kandang baru',
+  },
+  {
+    id: 3,
+    date: lastWeek,
+    reference_number: 'OUT-2025-003',
+    transaction_type: 'Pemakaian',
+    product_name: 'Vitamin B Complex',
+    product_category: 'OVK',
+    product_sub_category: 'Vitamin',
+    source_warehouse: 'Gudang Farmasi',
+    destination_warehouse: 'Konsumsi Kandang C1',
+    quantity: 10,
+    unit: 'Botol',
+    formatted_quantity: '10 Botol',
+    notes: 'Pemberian vitamin untuk meningkatkan kesehatan',
+  },
+  {
+    id: 4,
+    date: today,
+    reference_number: 'OUT-2025-004',
+    transaction_type: 'Pemakaian',
+    product_name: 'Pakan Finisher BR-2',
+    product_category: 'Pakan',
+    product_sub_category: 'Finisher',
+    source_warehouse: 'Kandang C1',
+    destination_warehouse: 'Konsumsi Kandang C1',
+    quantity: 80,
+    unit: 'Sak',
+    formatted_quantity: '80 Sak (4,000 Kg)',
+    notes: 'Pemakaian pakan harian periode finisher',
+  },
+  {
+    id: 5,
+    date: yesterday,
+    reference_number: 'OUT-2025-005',
+    transaction_type: 'Pemakaian',
+    product_name: 'Antibiotik Enrofloxacin',
+    product_category: 'OVK',
+    product_sub_category: 'Obat',
+    source_warehouse: 'Gudang Farmasi',
+    destination_warehouse: 'Konsumsi Kandang D1',
+    quantity: 5,
+    unit: 'Box',
+    formatted_quantity: '5 Box',
+    notes: 'Pengobatan untuk ayam yang sakit',
+  },
+  {
+    id: 6,
+    date: lastWeek,
+    reference_number: 'OUT-2025-006',
+    transaction_type: 'Transfer Keluar',
+    product_name: 'Pakan Starter BR-1',
+    product_category: 'Pakan',
+    product_sub_category: 'Starter',
+    source_warehouse: 'Kandang E1',
+    destination_warehouse: 'Kandang E2',
+    quantity: 30,
+    unit: 'Sak',
+    formatted_quantity: '30 Sak (1,500 Kg)',
+    notes: 'Transfer pakan antar kandang',
+  },
+];
+
+// ======================
+// 📊 Perhitungan Sapronak Dummy Data
+// ======================
+export const dummySapronakCalculation: ClosingSapronakCalculation = {
+  // DOC Broiler Calculation
+  doc_broiler: {
+    rows: [
+      {
+        id: 1,
+        tanggal: today,
+        no_referensi: 'IN-2025-001',
+        qty_masuk: 5000,
+        qty_keluar: 0,
+        qty_pakai: 0,
+        uraian: 'DOC Broiler Cobb 500',
+        kategori_produk: 'DOC Broiler',
+        harga_beli_per_qty: 8000,
+        total_harga: 40000000,
+        keterangan: 'Pembelian DOC dari supplier',
+      },
+      {
+        id: 2,
+        tanggal: yesterday,
+        no_referensi: 'OUT-2025-002',
+        qty_masuk: 0,
+        qty_keluar: 1000,
+        qty_pakai: 0,
+        uraian: 'DOC Broiler Cobb 500',
+        kategori_produk: 'DOC Broiler',
+        harga_beli_per_qty: 8000,
+        total_harga: 8000000,
+        keterangan: 'Transfer DOC ke kandang lain',
+      },
+      {
+        id: 3,
+        tanggal: lastWeek,
+        no_referensi: 'USE-2025-001',
+        qty_masuk: 0,
+        qty_keluar: 0,
+        qty_pakai: 50,
+        uraian: 'DOC Broiler Cobb 500',
+        kategori_produk: 'DOC Broiler',
+        harga_beli_per_qty: 8000,
+        total_harga: 400000,
+        keterangan: 'Mortalitas DOC',
+      },
+    ],
+    total: {
+      label: 'Total DOC Broiler',
+      qty_masuk: 5000,
+      qty_keluar: 1000,
+      qty_pakai: 50,
+      harga_beli_per_qty: 8000,
+      total_harga: 48400000,
+    },
+  },
+
+  // OVK Calculation
+  ovk: {
+    rows: [
+      {
+        id: 1,
+        tanggal: today,
+        no_referensi: 'IN-2025-003',
+        qty_masuk: 50,
+        qty_keluar: 0,
+        qty_pakai: 0,
+        uraian: 'Vitamin B Complex',
+        kategori_produk: 'Vitamin',
+        harga_beli_per_qty: 150000,
+        total_harga: 7500000,
+        keterangan: 'Pembelian vitamin',
+      },
+      {
+        id: 2,
+        tanggal: yesterday,
+        no_referensi: 'IN-2025-005',
+        qty_masuk: 30,
+        qty_keluar: 0,
+        qty_pakai: 0,
+        uraian: 'Antibiotik Enrofloxacin',
+        kategori_produk: 'Obat',
+        harga_beli_per_qty: 250000,
+        total_harga: 7500000,
+        keterangan: 'Pembelian antibiotik',
+      },
+      {
+        id: 3,
+        tanggal: lastWeek,
+        no_referensi: 'OUT-2025-003',
+        qty_masuk: 0,
+        qty_keluar: 0,
+        qty_pakai: 10,
+        uraian: 'Vitamin B Complex',
+        kategori_produk: 'Vitamin',
+        harga_beli_per_qty: 150000,
+        total_harga: 1500000,
+        keterangan: 'Pemakaian vitamin',
+      },
+      {
+        id: 4,
+        tanggal: yesterday,
+        no_referensi: 'OUT-2025-005',
+        qty_masuk: 0,
+        qty_keluar: 0,
+        qty_pakai: 5,
+        uraian: 'Antibiotik Enrofloxacin',
+        kategori_produk: 'Obat',
+        harga_beli_per_qty: 250000,
+        total_harga: 1250000,
+        keterangan: 'Pemakaian antibiotik',
+      },
+    ],
+    total: {
+      label: 'Total OVK',
+      qty_masuk: 80,
+      qty_keluar: 0,
+      qty_pakai: 15,
+      harga_beli_per_qty: 200000,
+      total_harga: 17750000,
+    },
+  },
+
+  // Pakan Calculation
+  pakan: {
+    rows: [
+      {
+        id: 1,
+        tanggal: yesterday,
+        no_referensi: 'IN-2025-002',
+        qty_masuk: 100,
+        qty_keluar: 0,
+        qty_pakai: 0,
+        uraian: 'Pakan Starter BR-1',
+        kategori_produk: 'Starter',
+        harga_beli_per_qty: 450000,
+        total_harga: 45000000,
+        keterangan: 'Pembelian pakan starter',
+      },
+      {
+        id: 2,
+        tanggal: today,
+        no_referensi: 'IN-2025-004',
+        qty_masuk: 200,
+        qty_keluar: 0,
+        qty_pakai: 0,
+        uraian: 'Pakan Finisher BR-2',
+        kategori_produk: 'Finisher',
+        harga_beli_per_qty: 480000,
+        total_harga: 96000000,
+        keterangan: 'Pembelian pakan finisher',
+      },
+      {
+        id: 3,
+        tanggal: today,
+        no_referensi: 'OUT-2025-001',
+        qty_masuk: 0,
+        qty_keluar: 0,
+        qty_pakai: 50,
+        uraian: 'Pakan Starter BR-1',
+        kategori_produk: 'Starter',
+        harga_beli_per_qty: 450000,
+        total_harga: 22500000,
+        keterangan: 'Pemakaian pakan starter',
+      },
+      {
+        id: 4,
+        tanggal: today,
+        no_referensi: 'OUT-2025-004',
+        qty_masuk: 0,
+        qty_keluar: 0,
+        qty_pakai: 80,
+        uraian: 'Pakan Finisher BR-2',
+        kategori_produk: 'Finisher',
+        harga_beli_per_qty: 480000,
+        total_harga: 38400000,
+        keterangan: 'Pemakaian pakan finisher',
+      },
+      {
+        id: 5,
+        tanggal: lastWeek,
+        no_referensi: 'OUT-2025-006',
+        qty_masuk: 0,
+        qty_keluar: 30,
+        qty_pakai: 0,
+        uraian: 'Pakan Starter BR-1',
+        kategori_produk: 'Starter',
+        harga_beli_per_qty: 450000,
+        total_harga: 13500000,
+        keterangan: 'Transfer pakan ke kandang lain',
+      },
+    ],
+    total: {
+      label: 'Total Pakan',
+      qty_masuk: 300,
+      qty_keluar: 30,
+      qty_pakai: 130,
+      harga_beli_per_qty: 465000,
+      total_harga: 215400000,
+    },
+  },
+};
+
+// ======================
+// 💰 Overhead Dummy Data
+// ======================
+export const dummyOverhead: ClosingOverhead = {
+  overheads: [
+    {
+      item_name: 'Expedisi DOC',
+      uom_name: 'Ekor',
+      budget_quantity: 500,
+      budget_unit_price: 8000,
+      budget_total_amount: 4000000,
+      actual_date: '',
+      actual_quantity: 0,
+      actual_unit_price: 0,
+      actual_total_amount: 0,
+      cost_per_bird: 0,
+    },
+    {
+      item_name: 'Solar',
+      uom_name: 'Liter',
+      budget_quantity: 0,
+      budget_unit_price: 0,
+      budget_total_amount: 0,
+      actual_date: today,
+      actual_quantity: 20,
+      actual_unit_price: 10000,
+      actual_total_amount: 200000,
+      cost_per_bird: 200,
+    },
+    {
+      item_name: 'Gaji Karyawan Kandang',
+      uom_name: 'Orang',
+      budget_quantity: 3,
+      budget_unit_price: 3000000,
+      budget_total_amount: 9000000,
+      actual_date: today,
+      actual_quantity: 3,
+      actual_unit_price: 3200000,
+      actual_total_amount: 9600000,
+      cost_per_bird: 640,
+    },
+    {
+      item_name: 'Listrik Kandang',
+      uom_name: 'Bulan',
+      budget_quantity: 1,
+      budget_unit_price: 2500000,
+      budget_total_amount: 2500000,
+      actual_date: today,
+      actual_quantity: 1,
+      actual_unit_price: 2800000,
+      actual_total_amount: 2800000,
+      cost_per_bird: 187,
+    },
+    {
+      item_name: 'Air Bersih',
+      uom_name: 'Bulan',
+      budget_quantity: 1,
+      budget_unit_price: 500000,
+      budget_total_amount: 500000,
+      actual_date: today,
+      actual_quantity: 1,
+      actual_unit_price: 450000,
+      actual_total_amount: 450000,
+      cost_per_bird: 30,
+    },
+    {
+      item_name: 'Perbaikan Kandang',
+      uom_name: 'Paket',
+      budget_quantity: 1,
+      budget_unit_price: 3000000,
+      budget_total_amount: 3000000,
+      actual_date: yesterday,
+      actual_quantity: 1,
+      actual_unit_price: 3500000,
+      actual_total_amount: 3500000,
+      cost_per_bird: 233,
+    },
+    {
+      item_name: 'Service Peralatan',
+      uom_name: 'Kali',
+      budget_quantity: 2,
+      budget_unit_price: 500000,
+      budget_total_amount: 1000000,
+      actual_date: lastWeek,
+      actual_quantity: 2,
+      actual_unit_price: 550000,
+      actual_total_amount: 1100000,
+      cost_per_bird: 73,
+    },
+    {
+      item_name: 'ATK & Supplies',
+      uom_name: 'Paket',
+      budget_quantity: 1,
+      budget_unit_price: 500000,
+      budget_total_amount: 500000,
+      actual_date: today,
+      actual_quantity: 1,
+      actual_unit_price: 450000,
+      actual_total_amount: 450000,
+      cost_per_bird: 30,
+    },
+    {
+      item_name: 'Biaya Komunikasi',
+      uom_name: 'Bulan',
+      budget_quantity: 1,
+      budget_unit_price: 300000,
+      budget_total_amount: 300000,
+      actual_date: today,
+      actual_quantity: 1,
+      actual_unit_price: 320000,
+      actual_total_amount: 320000,
+      cost_per_bird: 21,
+    },
+    {
+      item_name: 'BBM Kendaraan Operasional',
+      uom_name: 'Liter',
+      budget_quantity: 200,
+      budget_unit_price: 10000,
+      budget_total_amount: 2000000,
+      actual_date: today,
+      actual_quantity: 220,
+      actual_unit_price: 10500,
+      actual_total_amount: 2310000,
+      cost_per_bird: 154,
+    },
+  ],
+  total: {
+    budget_quantity: 710,
+    budget_total_amount: 23300000,
+    actual_quantity: 250,
+    actual_total_amount: 24530000,
+    cost_per_bird: 1568,
+  },
+};
+
+// ======================
+// 🔧 Dummy API Response Functions
+// ======================
+
+/**
+ * Dummy implementation for getAllFetcher
+ * Returns all closing records
+ */
+export const dummyGetAllFetcher = async (): Promise<{
+  code: number;
+  status: 'success';
+  message: string;
+  data: Closing[];
+}> => {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data closing berhasil diambil',
+    data: dummyClosings,
+  };
+};
+
+/**
+ * Dummy implementation for getSingle
+ * Returns a single closing by ID
+ */
+export const dummyGetSingle = async (
+  id: number
+): Promise<BaseApiResponse<Closing> | undefined> => {
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  const closing = dummyClosings.find((c) => c.id === id);
+
+  if (!closing) {
+    return {
+      code: 404,
+      status: 'error',
+      message: `Closing dengan ID ${id} tidak ditemukan`,
+    };
+  }
+
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data closing berhasil diambil',
+    data: closing,
+  };
+};
+
+/**
+ * Dummy implementation for getAllIncomingSapronakFetcher
+ * Returns all incoming sapronak records
+ */
+export const dummyGetAllIncomingSapronakFetcher = async (): Promise<{
+  code: number;
+  status: 'success';
+  message: string;
+  data: ClosingIncomingSapronak[];
+}> => {
+  await new Promise((resolve) => setTimeout(resolve, 400));
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data sapronak masuk berhasil diambil',
+    data: dummyIncomingSapronaks,
+  };
+};
+
+/**
+ * Dummy implementation for getAllOutgoingSapronakFetcher
+ * Returns all outgoing sapronak records
+ */
+export const dummyGetAllOutgoingSapronakFetcher = async (): Promise<{
+  code: number;
+  status: 'success';
+  message: string;
+  data: ClosingOutgoingSapronak[];
+}> => {
+  await new Promise((resolve) => setTimeout(resolve, 400));
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data sapronak keluar berhasil diambil',
+    data: dummyOutgoingSapronaks,
+  };
+};
+
+/**
+ * Dummy implementation for getGeneralInfo
+ * Returns closing general information by ID
+ */
+export const dummyGetGeneralInfo = async (
+  id: number
+): Promise<BaseApiResponse<ClosingGeneralInformation> | undefined> => {
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  const closingInfo = dummyClosingGeneralInformations.find((c) => c.id == id);
+
+  if (!closingInfo) {
+    return {
+      code: 404,
+      status: 'error',
+      message: `Closing general information dengan ID ${id} tidak ditemukan`,
+    };
+  }
+
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data closing general information berhasil diambil',
+    data: closingInfo,
+  };
+};
+
+/**
+ * Dummy implementation for getPerhitunganSapronak
+ * Returns sapronak calculation data
+ */
+export const dummyGetPerhitunganSapronak = async (
+  id: number
+): Promise<
+  | {
+      code: number;
+      status: 'success';
+      message: string;
+      data: ClosingSapronakCalculation;
+    }
+  | undefined
+> => {
+  await new Promise((resolve) => setTimeout(resolve, 400));
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data perhitungan sapronak berhasil diambil',
+    data: dummySapronakCalculation,
+  };
+};
+
+/**
+ * Dummy implementation for getOverhead
+ * Returns overhead data
+ */
+export const dummyGetOverhead = async (
+  id: number
+): Promise<BaseApiResponse<ClosingOverhead> | undefined> => {
+  await new Promise((resolve) => setTimeout(resolve, 400));
+  return {
+    code: 200,
+    status: 'success',
+    message: 'Data overhead berhasil diambil',
+    data: dummyOverhead,
+  };
+};
diff --git a/src/dummy/marketing.dummy.ts b/src/dummy/marketing.dummy.ts
new file mode 100644
index 00000000..35e65e8c
--- /dev/null
+++ b/src/dummy/marketing.dummy.ts
@@ -0,0 +1,388 @@
+import { format } from 'date-fns';
+import { Area } from '@/types/api/master-data/area';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import {
+  BaseMarketing,
+  Marketing,
+  BaseSalesOrder,
+  BaseDeliveryOrder,
+  BaseDelivery,
+} from '@/types/api/marketing/marketing';
+import {
+  CreatedUser,
+  BaseApproval,
+  BaseMetadata,
+} from '@/types/api/api-general';
+import { Product } from '@/types/api/master-data/product';
+import { Customer } from '@/types/api/master-data/customer';
+import { Uom } from '@/types/api/master-data/uom';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Supplier } from '@/types/api/master-data/supplier';
+
+// Waktu saat ini untuk created_at/updated_at
+const now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+const today = format(new Date(), 'yyyy-MM-dd');
+const tomorrow = format(
+  new Date().setDate(new Date().getDate() + 1),
+  'yyyy-MM-dd'
+);
+
+// ======================
+// 👤 Created User & Helper Data
+// ======================
+export const createdUser: CreatedUser = {
+  id: 1,
+  id_user: 1,
+  email: 'admin@example.com',
+  name: 'Admin Utama',
+};
+
+const dummyProductBase: Product = {
+  id: 101,
+  name: 'Pakan Ayam Premium',
+  brand: 'Brand Hebat',
+  sku: 'PAK-001',
+  product_price: 15000,
+  selling_price: 18000,
+  tax: 0.1,
+  expiry_period: 365,
+  uom: { id: 1, name: 'Sak' } as Uom,
+  product_category: { id: 1, name: 'Pakan' } as ProductCategory,
+  suppliers: [{ id: 1, name: 'Supplier A' } as Supplier],
+  flags: ['PAKAN'],
+  created_user: createdUser,
+  created_at: now,
+  updated_at: now,
+};
+
+// ======================
+// 📍 Area Dummy
+// ======================
+export const dummyAreas: Area[] = [
+  {
+    id: 1,
+    name: 'Bandung Barat',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+  {
+    id: 2,
+    name: 'Cimahi Utara',
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+];
+
+// ======================
+// 🏢 Location Dummy
+// ======================
+export const dummyLocations: Location[] = [
+  {
+    id: 1,
+    name: 'Gudang A',
+    address: 'Jl. Sukajadi No. 12',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+  {
+    id: 2,
+    name: 'Gudang B',
+    address: 'Jl. Setiabudi No. 45',
+    area: dummyAreas[1],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+];
+
+// ======================
+// 🐔 Kandang Dummy
+// ======================
+export const dummyKandangs: Kandang[] = [
+  {
+    id: 1,
+    name: 'Kandang Ayam Layer 1',
+    status: 'AKTIF',
+    capacity: 500,
+    location: dummyLocations[0],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+  {
+    id: 2,
+    name: 'Kandang Ayam Broiler 2',
+    status: 'NONAKTIF',
+    capacity: 300,
+    location: dummyLocations[1],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+];
+
+// ======================
+// 🏭 Warehouse Dummy
+// ======================
+export const dummyWarehouses: Warehouse[] = [
+  {
+    id: 1,
+    type: 'AREA',
+    name: 'Gudang Wilayah Bandung Barat',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Warehouse,
+  {
+    id: 2,
+    type: 'LOKASI',
+    name: 'Gudang Produksi Sukajadi',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Warehouse,
+  {
+    id: 3,
+    type: 'KANDANG',
+    name: 'Gudang Kandang Layer 1',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    kandang: {
+      ...dummyKandangs[0],
+      location: dummyLocations[0],
+      pic: createdUser,
+    },
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Warehouse,
+];
+
+// ======================
+// 📦 Product Warehouse Dummy
+// ======================
+export const dummyProductWarehouses: ProductWarehouse[] = [
+  {
+    id: 1,
+    product_id: 101,
+    warehouse_id: 1,
+    quantity: 1000,
+    product: dummyProductBase,
+    warehouse: dummyWarehouses[0],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+  {
+    id: 2,
+    product_id: 102,
+    warehouse_id: 2,
+    quantity: 500,
+    product: {
+      ...dummyProductBase,
+      id: 102,
+      name: 'Vitamin Ayam Super',
+      sku: 'VIT-002',
+      flags: ['VITAMIN'],
+      selling_price: 25000,
+    },
+    warehouse: dummyWarehouses[1],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  },
+];
+
+// ======================
+// 💼 Marketing Dummy
+// ======================
+
+// Helper untuk Sales Order (SO) Item
+const soItem1: BaseSalesOrder = {
+  vehicle_number: 'B 1234 ABC',
+  id: 101,
+  marketing_id: 1,
+  product_warehouse_id: 1,
+  qty: 100,
+  unit_price: 18000, // Harga jual
+  avg_weight: 1.0,
+  total_weight: 100 * 1.0,
+  total_price: 100 * 18000,
+  product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
+};
+const soItem2: BaseSalesOrder = {
+  vehicle_number: 'D 5678 EFG',
+  id: 102,
+  marketing_id: 2,
+  product_warehouse_id: 2,
+  qty: 50,
+  unit_price: 25000,
+  avg_weight: 0.5,
+  total_weight: 50 * 0.5,
+  total_price: 50 * 25000,
+  product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
+};
+
+// Helper untuk Delivery Item (DO) Detail
+const doDelivery1: BaseDelivery[] = [
+  {
+    product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
+    qty: soItem1.qty,
+    unit_price: soItem1.unit_price,
+    total_weight: soItem1.total_weight,
+    avg_weight: soItem1.avg_weight,
+    total_price: soItem1.total_price,
+    vehicle_number: 'B 1234 ABC',
+  },
+];
+
+const doDelivery2: BaseDelivery[] = [
+  {
+    product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
+    qty: soItem2.qty,
+    unit_price: soItem2.unit_price,
+    total_weight: soItem2.total_weight,
+    avg_weight: soItem2.avg_weight,
+    total_price: soItem2.total_price,
+    vehicle_number: 'D 5678 EFG',
+  },
+];
+
+// Helper untuk Delivery Order (DO) Header
+const deliveryOrder1: BaseDeliveryOrder[] = [
+  {
+    id: 1,
+    marketing_id: 3,
+    do_number: 'DO-003-2025',
+    delivery_date: tomorrow,
+    warehouse: dummyWarehouses[0],
+    deliveries: doDelivery1,
+  },
+];
+
+export const dummyMarketings: Marketing[] = [
+  // 1. Pengajuan Order (Langkah Pertama/Awal)
+  {
+    id: 1,
+    status: 'DRAFT',
+    // name: 'SO-001-2025', // `name` is not part of BaseMarketing
+    so_number: 'SO-001-2025',
+    so_date: today,
+    customer: {
+      id: 1,
+      name: 'PT Maju Jaya',
+      pic_id: 1,
+      pic: createdUser,
+      type: 'Distributor',
+      address: 'Jl. Merdeka No. 1',
+      phone: '081212121212',
+      email: 'contact@majujaya.com',
+      account_number: '1234567890',
+      created_user: createdUser,
+      created_at: now,
+      updated_at: now,
+    } as Customer,
+    sales_person: createdUser,
+    notes: 'Pengajuan Order Awal, menunggu persetujuan harga.',
+    latest_approval: {
+      step_number: 1,
+      step_name: 'Pengajuan Order',
+      action: 'CREATED',
+      action_by: createdUser,
+      action_at: now,
+    } as BaseApproval,
+    sales_order: [soItem1],
+    delivery_order: [],
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Marketing,
+
+  // 2. Sales Order (Disetujui dan Siap DO)
+  {
+    id: 2,
+    status: 'APPROVED',
+    // name: 'SO-002-2025', // `name` is not part of BaseMarketing
+    so_number: 'SO-002-2025',
+    so_date: today,
+    customer: {
+      id: 2,
+      name: 'CV Sumber Sehat',
+      pic_id: 2,
+      pic: createdUser,
+      type: 'Retail',
+      address: 'Jl. Cihampelas No. 5',
+      phone: '082222222222',
+      email: 'info@sumbersehat.com',
+      account_number: '9876543210',
+      created_user: createdUser,
+      created_at: now,
+      updated_at: now,
+    } as Customer,
+    sales_person: createdUser,
+    notes: 'Sales Order telah disetujui oleh Supervisor.',
+    latest_approval: {
+      id: 2,
+      step_number: 2,
+      step_name: 'Sales Order',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: now,
+    } as BaseApproval,
+    sales_order: [soItem2],
+    delivery_order: [], // Belum ada pengiriman (DO) yang dibuat
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Marketing,
+
+  // 3. Delivery Order (Proses Pengiriman telah dibuat)
+  {
+    id: 3,
+    status: 'DELIVERED', // Asumsi status DELIVERED berarti DO sudah selesai/terbuat
+    // name: 'SO-003-2025', // `name` is not part of BaseMarketing
+    so_number: 'SO-003-2025',
+    so_date: today,
+    customer: {
+      id: 3,
+      name: 'UD Ternak Sejahtera',
+      pic_id: 3,
+      pic: createdUser,
+      type: 'Reseller',
+      address: 'Jl. Pasteur No. 88',
+      phone: '083333333333',
+      email: 'halo@ternaksejahtera.com',
+      account_number: '1122334455',
+      created_user: createdUser,
+      created_at: now,
+      updated_at: now,
+    } as Customer,
+    sales_person: createdUser,
+    notes: 'Pengiriman barang telah berhasil dilakukan.',
+    latest_approval: {
+      id: 3,
+      step_number: 3,
+      step_name: 'Delivery Order',
+      action: 'COMPLETED',
+      action_by: createdUser,
+      action_at: now,
+    } as BaseApproval,
+    sales_order: [soItem1, soItem2],
+    delivery_order: deliveryOrder1, // DO sudah terbuat
+    created_user: createdUser,
+    created_at: now,
+    updated_at: now,
+  } as Marketing,
+];
diff --git a/src/lib/auth-helper.ts b/src/lib/auth-helper.ts
new file mode 100644
index 00000000..bf05b70e
--- /dev/null
+++ b/src/lib/auth-helper.ts
@@ -0,0 +1,25 @@
+/**
+ * Redirects the user to the SSO login page with loop protection.
+ *
+ * This function checks a session storage timestamp to ensure that redirects
+ * do not happen too frequently (blocking infinite redirect loops).
+ */
+export const redirectToSSO = () => {
+  if (typeof window === 'undefined') return;
+
+  const lastRedirect = sessionStorage.getItem('auth_redirect_timestamp');
+  const now = Date.now();
+
+  // Loop protection: allow redirect only if last one was > 5 seconds ago
+  // or if no redirect has happened yet.
+  if (!lastRedirect || now - parseInt(lastRedirect, 10) > 5000) {
+    sessionStorage.setItem('auth_redirect_timestamp', now.toString());
+    // const ssoLoginUrl = `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`;
+
+    const ltiSsoStart = `${process.env.NEXT_PUBLIC_API_BASE_URL as string}/sso/start?client_id=${process.env.NEXT_PUBLIC_CLIENT_ID as string}&redirect_url=${window.location.href}`;
+    const ssoLoginUrl = `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${ltiSsoStart}`;
+    window.location.href = ssoLoginUrl;
+  } else {
+    console.error('Redirect loop detected. Aborting redirect.');
+  }
+};
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 2ec60598..c69f610f 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -1,11 +1,17 @@
 import moment from 'moment';
+import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
 
+// set locale globally
+moment.locale('id');
+
 export const sleep = (ms: number = 1000) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
 export const formatDate = (date: moment.MomentInput, format?: string) => {
+  if (!date) return '-';
+
   return moment(date).format(format);
 };
 
@@ -15,7 +21,7 @@ export const cn = (...inputs: ClassValue[]) => {
 
 export const formatNumber = (
   value: number | bigint | Intl.StringNumericLiteral,
-  locale = 'en-US',
+  locale = 'id-ID',
   minimumFractionDigits = 0,
   maximumFractionDigits = 2
 ) => {
@@ -25,11 +31,40 @@ export const formatNumber = (
   }).format(value);
 };
 
+export const formatTitleCase = (value: string) => {
+  return value
+    .toLowerCase()
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export function formatVechicleNumber(value: string): string {
+  let result = '';
+  for (let i = 0; i < (value?.length ?? 0); i++) {
+    const curr = value[i];
+    const prev = value[i - 1];
+
+    // Cek apakah terjadi perpindahan dari huruf ke angka atau angka ke huruf
+    if (i > 0) {
+      const isCurrDigit = /\d/.test(curr);
+      const isPrevDigit = /\d/.test(prev);
+
+      if (isCurrDigit !== isPrevDigit) {
+        result += ' ';
+      }
+    }
+
+    result += curr;
+  }
+
+  return result.trim().replace(/\s+/g, ' ');
+}
 
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
-  currency = 'USD',
-  locale = 'en-US',
+  currency = 'IDR',
+  locale = 'id-ID',
   minimumFractionDigits = 0,
   maximumFractionDigits = 2
 ) => {
@@ -40,3 +75,70 @@ export const formatCurrency = (
     maximumFractionDigits,
   }).format(value);
 };
+
+/**
+ * Retrieves a nested value from an object using a dot-delimited key path.
+ * Supports array indexes (e.g., "users.0.name") and returns a default value
+ * if the path does not exist.
+ *
+ * @param obj - The source object to search.
+ * @param path - Dot-delimited key string (e.g., "user.address.city").
+ * @param defaultValue - Optional value to return if the key path is not found.
+ * @returns The value found at the specified path, or the default value.
+ */
+export function getByPath<T, D = undefined>(
+  obj: T,
+  path: string,
+  defaultValue?: D
+): D {
+  if (obj == null) return defaultValue as D;
+  if (!path) return obj as D;
+
+  const segments = path.split('.').filter(Boolean);
+  let cur: { [key: string]: unknown } = obj;
+
+  for (const seg of segments) {
+    if (cur == null) return defaultValue as D;
+    const key: string | number =
+      Array.isArray(cur) && /^\d+$/.test(seg) ? Number(seg) : seg;
+    if (Object(cur) !== cur || !(key in cur)) {
+      return defaultValue as D;
+    }
+    cur = cur[key] as { [key: string]: unknown };
+  }
+
+  return cur as D;
+}
+
+export const convertRowSelectionArrToObj = (
+  rowSelectionArr: string[] | number[]
+) => {
+  const result: Record<string | number, boolean> = {};
+
+  rowSelectionArr.forEach((item) => {
+    result[item] = true;
+  });
+
+  return result;
+};
+
+export const convertRowSelectionObjToArr = (
+  rowSelection: string[] | number[]
+) => {
+  const result = Object.keys(rowSelection).map(Number);
+
+  return result;
+};
+
+export 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;
+};
diff --git a/src/lib/utils/formik.ts b/src/lib/utils/formik.ts
new file mode 100644
index 00000000..e474c8c6
--- /dev/null
+++ b/src/lib/utils/formik.ts
@@ -0,0 +1,48 @@
+import { FormikContextType, getIn, setIn } from 'formik';
+
+function spliceArray<T>(arr: T[] | undefined, index: number) {
+  const a = Array.isArray(arr) ? arr.slice() : [];
+  if (index >= 0 && index < a.length) a.splice(index, 1);
+  return a;
+}
+
+/**
+ * Remove one item from an array field and also trim Formik's errors & touched
+ * at the SAME index to keep everything aligned.
+ *
+ * @param formik - your useFormik instance
+ * @param arrayPath - path to the array field, e.g. "kandangExpenses[0].expenses"
+ * @param index - the index to remove
+ * @param validateAfter - optional: revalidate after removal (default false)
+ */
+export async function removeArrayItemAndSync<FormValues>(
+  formik: FormikContextType<FormValues>,
+  arrayPath: string,
+  index: number,
+  validateAfter: boolean = false
+) {
+  // 1) VALUES: remove at index
+  const currValues = getIn(formik.values, arrayPath);
+  const nextValues = spliceArray(currValues, index);
+  formik.setFieldValue(arrayPath, nextValues, false);
+
+  // 2) ERRORS: remove the same index (if array exists)
+  const currErrors = getIn(formik.errors, arrayPath);
+  if (Array.isArray(currErrors)) {
+    const nextErrors = spliceArray(currErrors, index);
+    formik.setErrors(setIn(formik.errors, arrayPath, nextErrors));
+  }
+
+  // 3) TOUCHED: remove the same index (if array exists)
+  const currTouched = getIn(formik.touched, arrayPath);
+  if (Array.isArray(currTouched)) {
+    const nextTouched = spliceArray(currTouched, index);
+    formik.setTouched(setIn(formik.touched, arrayPath, nextTouched), false);
+  }
+
+  // 4) (optional) revalidate to rebuild a perfectly clean error tree
+  if (validateAfter) {
+    const newErrors = await formik.validateForm();
+    formik.setErrors(newErrors);
+  }
+}
diff --git a/src/services/api/approval.ts b/src/services/api/approval.ts
new file mode 100644
index 00000000..1debace3
--- /dev/null
+++ b/src/services/api/approval.ts
@@ -0,0 +1,6 @@
+import { BaseApiService } from '@/services/api/base';
+import { BaseApproval } from '@/types/api/api-general';
+
+export const ApprovalApi = new BaseApiService<BaseApproval, unknown, unknown>(
+  '/approvals'
+);
diff --git a/src/services/api/auth.ts b/src/services/api/auth.ts
index e69de29b..f5319435 100644
--- a/src/services/api/auth.ts
+++ b/src/services/api/auth.ts
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse, LogoutResponse } from '@/types/api/api-general';
+
+export class AuthApiService {
+  async logout() {
+    try {
+      const logoutRes = await httpClient<LogoutResponse>(`/sso/logout`, {
+        method: 'POST',
+      });
+
+      return logoutRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+}
+
+export const AuthApi = new AuthApiService();
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index 5ccabdd7..2fcf3712 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -105,10 +105,13 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
 
       const url = options?.params
         ? `${urlBase}?${new URLSearchParams(
-            Object.entries(options.params).reduce((acc, [key, value]) => {
-              if (value !== undefined) acc[key] = String(value);
-              return acc;
-            }, {} as Record<string, string>)
+            Object.entries(options.params).reduce(
+              (acc, [key, value]) => {
+                if (value !== undefined) acc[key] = String(value);
+                return acc;
+              },
+              {} as Record<string, string>
+            )
           )}`
         : urlBase;
 
diff --git a/src/services/api/closing.ts b/src/services/api/closing.ts
new file mode 100644
index 00000000..0a6ef40c
--- /dev/null
+++ b/src/services/api/closing.ts
@@ -0,0 +1,199 @@
+import axios from 'axios';
+
+import { BaseApiService } from '@/services/api/base';
+import {
+  Closing,
+  ClosingGeneralInformation,
+  ClosingIncomingSapronak,
+  ClosingOutgoingSapronak,
+  ClosingOverhead,
+  ClosingSapronakCalculation,
+} from '@/types/api/closing';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  dummyGetAllFetcher,
+  dummyGetSingle,
+  dummyGetAllIncomingSapronakFetcher,
+  dummyGetAllOutgoingSapronakFetcher,
+  dummyGetGeneralInfo,
+  dummyGetPerhitunganSapronak,
+  dummyGetOverhead,
+} from '@/dummy/closing.dummy';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { ClosingSales } from '@/types/api/closing';
+
+export class ClosingApiService extends BaseApiService<Closing, null, null> {
+  constructor(basePath: string) {
+    super(basePath);
+  }
+
+  async getAllFetcher(endpoint: string): Promise<BaseApiResponse<Closing[]>> {
+    // TODO: Remove this block when backend is ready
+    // return await dummyGetAllFetcher();
+
+    // Uncomment this when backend is ready
+    return await httpClientFetcher<BaseApiResponse<Closing[]>>(endpoint);
+  }
+
+  async getSingle(id: number): Promise<BaseApiResponse<Closing> | undefined> {
+    // TODO: Remove this block when backend is ready
+    // try {
+    //   return await dummyGetSingle(id);
+    // } catch (error) {
+    //   if (axios.isAxiosError<BaseApiResponse<Closing>>(error)) {
+    //     return error.response?.data;
+    //   }
+    //   return undefined;
+    // }
+
+    // Uncomment this when backend is ready
+    try {
+      const getSinglePath = `${this.basePath}/${id}`;
+      const getSingleRes =
+        await httpClient<BaseApiResponse<Closing>>(getSinglePath);
+      return getSingleRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Closing>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async getPenjualan(
+    id: number
+  ): Promise<BaseApiResponse<ClosingSales> | undefined> {
+    try {
+      const getPenjualanPath = `${this.basePath}/${id}/penjualan`;
+      const getPenjualanRes =
+        await httpClient<BaseApiResponse<ClosingSales>>(getPenjualanPath);
+
+      return getPenjualanRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingSales>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async getAllIncomingSapronakFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<ClosingIncomingSapronak[]>> {
+    // TODO: Remove this block when backend is ready
+    // return await dummyGetAllIncomingSapronakFetcher();
+
+    // Uncomment this when backend is ready
+    return await httpClientFetcher<BaseApiResponse<ClosingIncomingSapronak[]>>(
+      endpoint
+    );
+  }
+
+  async getAllOutgoingSapronakFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<ClosingOutgoingSapronak[]>> {
+    // TODO: Remove this block when backend is ready
+    return await dummyGetAllOutgoingSapronakFetcher();
+
+    // Uncomment this when backend is ready
+    // return await httpClientFetcher<BaseApiResponse<ClosingOutgoingSapronak[]>>(
+    //   endpoint
+    // );
+  }
+
+  async getGeneralInfo(
+    id: number
+  ): Promise<BaseApiResponse<ClosingGeneralInformation> | undefined> {
+    // TODO: Remove this block when backend is ready
+    // try {
+    //   return await dummyGetGeneralInfo(id);
+    // } catch (error) {
+    //   if (
+    //     axios.isAxiosError<BaseApiResponse<ClosingGeneralInformation>>(error)
+    //   ) {
+    //     return error.response?.data;
+    //   }
+    //   return undefined;
+    // }
+
+    // Uncomment this when backend is ready
+    try {
+      const getGeneralInfoPath = `${this.basePath}/${id}`;
+      const getGeneralInfoRes =
+        await httpClient<BaseApiResponse<ClosingGeneralInformation>>(
+          getGeneralInfoPath
+        );
+      return getGeneralInfoRes;
+    } catch (error) {
+      if (
+        axios.isAxiosError<BaseApiResponse<ClosingGeneralInformation>>(error)
+      ) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async getPerhitunganSapronak(
+    id: number
+  ): Promise<BaseApiResponse<ClosingSapronakCalculation> | undefined> {
+    // TODO: Remove this block when backend is ready
+    // try {
+    //   return await dummyGetPerhitunganSapronak(id);
+    // } catch (error) {
+    //   if (
+    //     axios.isAxiosError<BaseApiResponse<ClosingSapronakCalculation>>(error)
+    //   ) {
+    //     return error.response?.data;
+    //   }
+    //   return undefined;
+    // }
+
+    // Uncomment this when backend is ready
+    try {
+      const path = `${this.basePath}/${id}/perhitungan_sapronak`;
+      return await httpClient<BaseApiResponse<ClosingSapronakCalculation>>(
+        path,
+        {
+          method: 'GET',
+        }
+      );
+    } catch (error) {
+      if (
+        axios.isAxiosError<BaseApiResponse<ClosingSapronakCalculation>>(error)
+      ) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async getOverhead(
+    id: number
+  ): Promise<BaseApiResponse<ClosingOverhead> | undefined> {
+    // TODO: Remove this block when backend is ready
+    // try {
+    //   return await dummyGetOverhead(id);
+    // } catch (error) {
+    //   if (axios.isAxiosError<BaseApiResponse<ClosingOverhead>>(error)) {
+    //     return error.response?.data;
+    //   }
+    //   return undefined;
+    // }
+
+    // Uncomment this when backend is ready
+    try {
+      const path = `${this.basePath}/${id}/overhead`;
+      return await httpClient<BaseApiResponse<ClosingOverhead>>(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingOverhead>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+}
+
+export const ClosingApi = new ClosingApiService('/closings');
diff --git a/src/services/api/expense.ts b/src/services/api/expense.ts
new file mode 100644
index 00000000..44a855f4
--- /dev/null
+++ b/src/services/api/expense.ts
@@ -0,0 +1,542 @@
+import axios from 'axios';
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse, GroupedApprovals } from '@/types/api/api-general';
+import {
+  CreateExpensePayload,
+  CreateExpenseRealizationPayload,
+  Expense,
+  UpdateExpensePayload,
+} from '@/types/api/expense';
+import { httpClient } from '@/services/http/client';
+
+export class ExpenseApiService extends BaseApiService<
+  Expense,
+  FormData,
+  FormData
+> {
+  constructor(basePath: string) {
+    super(basePath);
+  }
+
+  async create(
+    payload: FormData
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const createExpenseRequestRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(this.basePath, {
+        method: 'POST',
+        body: payload,
+      });
+
+      return createExpenseRequestRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async createRealization(
+    id: number,
+    payload: FormData
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const createExpenseRealizationRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(`${this.basePath}/${id}/realizations`, {
+        method: 'POST',
+        body: payload,
+      });
+
+      return createExpenseRealizationRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async update(
+    id: number,
+    payload: FormData,
+    deletedDocumentIds?: number[]
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      for (const deletedDocumentId of deletedDocumentIds ?? []) {
+        await this.deleteExpenseRequestDocument(id, deletedDocumentId);
+      }
+
+      const updateExpenseRequestRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(`${this.basePath}/${id}`, {
+        method: 'PATCH',
+        body: payload,
+      });
+
+      return updateExpenseRequestRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async updateRealization(
+    id: number,
+    payload: FormData
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const updateExpenseRealizationRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(`${this.basePath}/${id}/realizations`, {
+        method: 'PATCH',
+        body: payload,
+      });
+
+      return updateExpenseRealizationRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async uploadRequestDocuments(
+    id: number,
+    files: File[]
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const updateExpenseRequestDocumentsFormData = new FormData();
+
+      // files (multiple "documents" keys)
+      files.forEach((file) => {
+        updateExpenseRequestDocumentsFormData.append('documents', file);
+      });
+
+      const updateExpenseRealizationRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(`${this.basePath}/${id}`, {
+        method: 'PATCH',
+        body: updateExpenseRequestDocumentsFormData,
+      });
+
+      return updateExpenseRealizationRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async uploadRealizationDocuments(
+    id: number,
+    files: File[]
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const updateExpenseRealizationDocumentsFormData = new FormData();
+
+      // files (multiple "documents" keys)
+      files.forEach((file) => {
+        updateExpenseRealizationDocumentsFormData.append('documents', file);
+      });
+
+      const updateExpenseRealizationRes = await httpClient<
+        BaseApiResponse<Expense>
+      >(`${this.basePath}/${id}/realizations`, {
+        method: 'PATCH',
+        body: updateExpenseRealizationDocumentsFormData,
+      });
+
+      return updateExpenseRealizationRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async approveManager(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const approveRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/manager`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return approveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkApproveManager(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const bulkApproveRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/manager`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return bulkApproveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async approveFinance(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const approveRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/finance`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return approveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkApproveFinance(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const bulkApproveRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/finance`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return bulkApproveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async rejectManager(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const rejectRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/manager`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return rejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkRejectManager(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const bulkRejectRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/manager`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return bulkRejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async rejectFinance(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const rejectRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/finance`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return rejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkRejectFinance(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const bulkRejectRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/approvals/finance`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return bulkRejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async complete(id: number): Promise<BaseApiResponse<Expense> | undefined> {
+    try {
+      const completeRes = await httpClient<BaseApiResponse<Expense>>(
+        `${this.basePath}/${id}/complete`,
+        {
+          method: 'POST',
+        }
+      );
+
+      return completeRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<Expense>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async deleteExpenseRequestDocument(
+    expenseId: number,
+    documentId: number
+  ): Promise<BaseApiResponse | undefined> {
+    try {
+      const deleteExpenseRequestDocument = await httpClient<BaseApiResponse>(
+        `${this.basePath}/${expenseId}/documents/${documentId}`,
+        {
+          method: 'DELETE',
+        }
+      );
+
+      return deleteExpenseRequestDocument;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async deleteExpenseRealizationDocument(
+    expenseId: number,
+    documentId: number
+  ): Promise<BaseApiResponse | undefined> {
+    try {
+      const deleteExpenseRealizationDocument =
+        await httpClient<BaseApiResponse>(
+          `${this.basePath}/${expenseId}/realization-documents/${documentId}`,
+          {
+            method: 'DELETE',
+          }
+        );
+
+      return deleteExpenseRealizationDocument;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async getApprovalHistory(
+    expenseId: number,
+    group: boolean = true,
+    page: number = 1,
+    limit: number = 10
+  ) {
+    try {
+      const approvalHistoryRes = await httpClient<GroupedApprovals>(
+        '/approvals',
+        {
+          query: {
+            module_name: 'EXPENSES',
+            module_id: expenseId,
+            group_step_number: group ? 'true' : 'false',
+            page,
+            limit,
+          },
+        }
+      );
+
+      return approvalHistoryRes;
+    } catch (error) {
+      if (axios.isAxiosError<GroupedApprovals>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  convertExpenseRequestPayloadToFormData = (payload: CreateExpensePayload) => {
+    const formData = new FormData();
+
+    formData.append('category', payload.category);
+    formData.append('transaction_date', payload.transaction_date);
+    formData.append('supplier_id', String(payload.supplier_id));
+
+    // files (multiple "documents" keys)
+    payload.documents.forEach((file) => {
+      formData.append('documents', file);
+    });
+
+    formData.append(
+      'expense_nonstocks',
+      JSON.stringify(payload.expense_nonstocks)
+    );
+
+    return formData;
+  };
+
+  convertExpenseRequestUpdatePayloadToFormData = (
+    payload: UpdateExpensePayload
+  ) => {
+    const formData = new FormData();
+
+    formData.append('category', payload.category);
+    formData.append('transaction_date', payload.transaction_date);
+    formData.append('supplier_id', String(payload.supplier_id));
+
+    // files (multiple "documents" keys)
+    payload.documents.forEach((file) => {
+      formData.append('documents', file);
+    });
+
+    formData.append(
+      'expense_nonstocks',
+      JSON.stringify(payload.expense_nonstocks)
+    );
+
+    return formData;
+  };
+
+  convertExpenseRealizationPayloadToFormData = (
+    payload: CreateExpenseRealizationPayload
+  ) => {
+    const formData = new FormData();
+
+    formData.append('realization_date', payload.realization_date);
+
+    // files (multiple "documents" keys)
+    payload.documents.forEach((file) => {
+      formData.append('documents', file);
+    });
+
+    formData.append('realizations', JSON.stringify(payload.realizations));
+
+    return formData;
+  };
+}
+
+export const ExpenseApi = new ExpenseApiService('/expenses');
diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts
index ec58f6f2..fa406917 100644
--- a/src/services/api/inventory.ts
+++ b/src/services/api/inventory.ts
@@ -7,12 +7,12 @@ import {
 import {
   CreateMovementPayload,
   Movement,
-  UpdateMovementPayload,
 } from '@/types/api/inventory/movement';
 import {
   CreateInventoryAdjustmentPayload,
   InventoryAdjustment,
 } from '@/types/api/inventory/adjustment';
+import { InventoryProduct } from '@/types/api/inventory/product';
 
 export const ProductWarehouseApi = new BaseApiService<
   ProductWarehouse,
@@ -23,11 +23,17 @@ export const ProductWarehouseApi = new BaseApiService<
 export const MovementApi = new BaseApiService<
   Movement,
   CreateMovementPayload,
-  UpdateMovementPayload
+  unknown
 >('/inventory/transfers');
 
-export const inventoryAdjustmentApi = new BaseApiService<
+export const InventoryAdjustmentApi = new BaseApiService<
   InventoryAdjustment,
   CreateInventoryAdjustmentPayload,
   unknown
 >('/inventory/adjustments');
+
+export const InventoryProductApi = new BaseApiService<
+  InventoryProduct,
+  unknown,
+  unknown
+>('/inventory/product-stocks');
diff --git a/src/services/api/marketing/marketing.ts b/src/services/api/marketing/marketing.ts
new file mode 100644
index 00000000..c2b5d018
--- /dev/null
+++ b/src/services/api/marketing/marketing.ts
@@ -0,0 +1,149 @@
+import { dummyMarketings } from '@/dummy/marketing.dummy';
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Marketing,
+  CreateSalesOrderPayload,
+  UpdateSalesOrderPayload,
+  CreateDeliveryOrderPayload,
+  UpdateDeliveryOrderPayload,
+} from '@/types/api/marketing/marketing';
+
+/**
+ * 💡 Helper untuk membuat respons dummy
+ * @param data Data yang akan dimasukkan ke dalam body respons
+ */
+const createDummyResponse = <T>(data: T): BaseApiResponse<T> => ({
+  code: 200,
+  status: 'success',
+  message: 'Data retrieved successfully (MOCK)',
+  data: data,
+});
+
+export class SalesOrderService extends BaseApiService<
+  Marketing,
+  CreateSalesOrderPayload,
+  UpdateSalesOrderPayload
+> {
+  constructor(basePath: string = '/marketing') {
+    super(basePath);
+  }
+
+  // /**
+  //  * Override: Mengambil semua data Marketing dari dummyMarketings
+  //  */
+  // async getAllFetcher(endpoint: string): Promise<BaseApiResponse<Marketing[]>> {
+  //   // Simulasi delay jaringan
+  //   await sleep(500);
+
+  //   // Filter data marketing yang valid (jika menggunakan BaseMarketing[])
+  //   const data = dummyMarketings as Marketing[];
+
+  //   return createDummyResponse<Marketing[]>(data);
+  // }
+
+  // /**
+  //  * Override: Mengambil satu data Marketing berdasarkan ID dari dummyMarketings
+  //  */
+  // async getSingle(id: number): Promise<BaseApiResponse<Marketing> | undefined> {
+  //   // Simulasi delay jaringan
+  //   await sleep(300);
+
+  //   const foundData = dummyMarketings.find((m) => m.id == id);
+
+  //   if (foundData) {
+  //     // Data ditemukan, kembalikan respons sukses
+  //     return createDummyResponse<Marketing>(foundData as Marketing);
+  //   } else {
+  //     // Data tidak ditemukan, simulasi respons error
+  //     return {
+  //       code: 404,
+  //       status: 'error',
+  //       message: 'Marketing data not found (MOCK)',
+  //     };
+  //   }
+  // }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'APPROVED' | 'REJECTED',
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: [id],
+          notes: notes || `${action} marketing ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve marketing:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Bulk approve
+   */
+  async bulkApprovals(
+    ids: number[],
+    action: 'APPROVED' | 'REJECTED',
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: ids,
+          notes: notes || `${action} marketing ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error bulk approve marketing:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Delivery
+   */
+  async delivery(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: 'APPROVED',
+          approvable_ids: [id],
+          notes: notes || `Delivery marketing ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error delivery marketing:', error);
+      return undefined;
+    }
+  }
+}
+
+export const SalesOrderApi = new SalesOrderService('/marketing/sales-orders');
+export const DeliveryOrderApi = new BaseApiService<
+  Marketing,
+  CreateDeliveryOrderPayload,
+  UpdateDeliveryOrderPayload
+>('/marketing/delivery-orders');
+export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
+  '/marketing'
+);
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index 854bb8f3..66df717a 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -140,4 +140,4 @@ export const FlockApi = new BaseApiService<
   Flock,
   CreateFlockPayload,
   UpdateFlockPayload
->('/master-data/flocks');
\ No newline at end of file
+>('/master-data/flocks');
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 1ccf4a6e..8e66d57e 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -1,4 +1,5 @@
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
 import {
   CreateProjectFlockPayload,
   ProjectFlock,
@@ -8,25 +9,83 @@ import {
   CreateRecordingPayload,
   Recording,
   UpdateRecordingPayload,
+  NextDayRecording,
 } from '@/types/api/production/recording';
-import {
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
+export const ProjectFlockKandangApi = new BaseApiService<
+  ProjectFlockKandang,
+  unknown,
+  unknown
+>('/production/project-flock-kandangs');
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
   CreateProjectFlockPayload,
   UpdateProjectFlockPayload
->('/production/project_flocks');
-export const RecordingApi = new BaseApiService<
+>('/production/project-flocks');
+export class RecordingService extends BaseApiService<
   Recording,
   CreateRecordingPayload,
   UpdateRecordingPayload
->('/flock/recordings');
-export const ChickinApi = new BaseApiService<
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload
->('/production/chickins');
\ No newline at end of file
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  async approve(
+    idOrIds: number | number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Recording[]> | undefined> {
+    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+    return await this.customRequest<BaseApiResponse<Recording[]>>('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids,
+        notes,
+      },
+    });
+  }
+
+  async reject(
+    idOrIds: number | number[],
+    notes: string = ''
+  ): Promise<BaseApiResponse<Recording[]> | undefined> {
+    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+    return await this.customRequest<BaseApiResponse<Recording[]>>('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids,
+        notes,
+      },
+    });
+  }
+
+  async deleteGrading(
+    gradingId: number
+  ): Promise<BaseApiResponse<unknown> | undefined> {
+    return await this.customRequest<BaseApiResponse<unknown>>(
+      `gradings/${gradingId}`,
+      {
+        method: 'DELETE',
+      }
+    );
+  }
+
+  async nextDayRecording(
+    projectFlockId: number
+  ): Promise<BaseApiResponse<NextDayRecording> | undefined> {
+    return await this.customRequest<BaseApiResponse<NextDayRecording>>(
+      `next-day`,
+      {
+        method: 'GET',
+        params: {
+          project_flock_kandang_id: projectFlockId,
+        },
+      }
+    );
+  }
+}
+
+export const RecordingApi = new RecordingService('/production/recordings');
diff --git a/src/services/api/production/chickin.ts b/src/services/api/production/chickin.ts
new file mode 100644
index 00000000..f582c5d4
--- /dev/null
+++ b/src/services/api/production/chickin.ts
@@ -0,0 +1,44 @@
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+
+export class ChickinService extends BaseApiService<
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload
+> {
+  constructor(basePath: string = '/production/chickins') {
+    super(basePath);
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'APPROVED' | 'REJECTED',
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: [id],
+          notes: notes ?? `${action} chickin ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve chickin:', error);
+      return undefined;
+    }
+  }
+}
+
+export const ChickinApi = new ChickinService('/production/chickins');
diff --git a/src/services/api/production/project-flock-kandang.ts b/src/services/api/production/project-flock-kandang.ts
new file mode 100644
index 00000000..f4887e68
--- /dev/null
+++ b/src/services/api/production/project-flock-kandang.ts
@@ -0,0 +1,188 @@
+import { BaseApiService } from '@/services/api/base';
+import {
+  BaseProjectFlockKandang,
+  ProjectFlockKandang,
+  ClosingProjectFlockKandangPayload,
+  CheckClosingResponse,
+} from '@/types/api/production/project-flock-kandang';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+import axios from 'axios';
+
+export class ProjectFlockKandangService extends BaseApiService<
+  BaseProjectFlockKandang,
+  ProjectFlockKandang,
+  unknown
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  /**
+   * Close or Unclose Project Flock Kandang
+   */
+  async closing(
+    id: number,
+    payload: ClosingProjectFlockKandangPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/${id}/closing`;
+
+      const headers = {
+        'Content-Type': 'application/json',
+        ...(this.header ?? {}),
+      };
+
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: payload,
+        headers,
+      });
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  /**
+   * Check Closing Requirements for Project Flock Kandang
+   * TODO: Replace with actual API call when backend is ready
+   */
+  async checkClosing(
+    id: number
+  ): Promise<BaseApiResponse<CheckClosingResponse> | undefined> {
+    // Dummy data - replace with actual API call when backend is ready
+    // return new Promise((resolve) => {
+    //   setTimeout(() => {
+    //     resolve({
+    //       code: 200,
+    //       status: 'success',
+    //       message: 'Cek persyaratan closing kandang',
+    //       data: {
+    //         unfinished_expenses: id % 2 === 1 ? 2 : 0,
+    //         stock_remaining: [
+    //           {
+    //             id: 1,
+    //             product_id: 1,
+    //             warehouse_id: 1,
+    //             quantity: id % 2 === 1 ? 100 : 0,
+    //             product: {
+    //               id: 1,
+    //               name: 'Pakan Starter',
+    //               brand: 'Brand A',
+    //               sku: 'PKN-STR-001',
+    //               product_price: 15000,
+    //               selling_price: 17000,
+    //               tax: 0,
+    //               expiry_period: 365,
+    //               flags: ['active'],
+    //               uom: {
+    //                 id: 1,
+    //                 name: 'Kg',
+    //                 created_user: {
+    //                   id: 1,
+    //                   id_user: 1,
+    //                   email: 'admin@example.com',
+    //                   name: 'Admin User',
+    //                 },
+    //                 created_at: '2024-01-01',
+    //                 updated_at: '2024-01-01',
+    //               },
+    //               product_category: {
+    //                 id: 1,
+    //                 name: 'Pakan',
+    //                 code: 'PKN',
+    //                 created_user: {
+    //                   id: 1,
+    //                   id_user: 1,
+    //                   email: 'admin@example.com',
+    //                   name: 'Admin User',
+    //                 },
+    //                 created_at: '2024-01-01',
+    //                 updated_at: '2024-01-01',
+    //               },
+    //               suppliers: [],
+    //               created_user: {
+    //                 id: 1,
+    //                 id_user: 1,
+    //                 email: 'admin@example.com',
+    //                 name: 'Admin User',
+    //               },
+    //               created_at: '2024-01-01',
+    //               updated_at: '2024-01-01',
+    //             },
+    //             warehouse: {
+    //               id: 1,
+    //               name: 'Gudang Utama',
+    //               type: 'AREA',
+    //               area: {
+    //                 id: 1,
+    //                 name: 'Area 1',
+    //               },
+    //               created_user: {
+    //                 id: 1,
+    //                 id_user: 1,
+    //                 email: 'admin@example.com',
+    //                 name: 'Admin User',
+    //               },
+    //               created_at: '2024-01-01',
+    //               updated_at: '2024-01-01',
+    //             },
+    //             created_user: {
+    //               id: 1,
+    //               id_user: 1,
+    //               email: 'admin@example.com',
+    //               name: 'Admin User',
+    //             },
+    //             created_at: '2025-01-01',
+    //             updated_at: '2025-01-01',
+    //           },
+    //         ],
+    //         expenses: [
+    //           {
+    //             id: 1,
+    //             po_number: 'PO-BOP-LTI-00001',
+    //             category: 'NON-BOP',
+    //             total: 110000,
+    //             status: id % 2 === 1 ? 'PENGAJUAN' : 'SELESAI',
+    //             step_name: id % 2 === 1 ? 'Approval Finance' : 'Selesai',
+    //             step: id % 2 === 1 ? 1 : 5,
+    //             reference_number: 'BOP-LTI-00001',
+    //           },
+    //           {
+    //             id: 3,
+    //             po_number: 'PO-BOP-LTI-00003',
+    //             category: 'BOP',
+    //             total: 110000,
+    //             status: id % 2 === 1 ? 'PENGAJUAN' : 'SELESAI',
+    //             step_name: id % 2 === 1 ? 'Approval Finance' : 'Selesai',
+    //             step: id % 2 === 1 ? 1 : 5,
+    //             reference_number: 'BOP-LTI-00003',
+    //           },
+    //         ],
+    //       },
+    //     });
+    //   }, 500); // Simulate network delay
+    // });
+
+    // Original API call - uncomment when backend is ready
+    try {
+      const path = `${this.basePath}/${id}/closing/check`;
+
+      return await httpClient<BaseApiResponse<CheckClosingResponse>>(path, {
+        method: 'GET',
+      });
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<CheckClosingResponse>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+}
+
+export const ProjectFlockKandangApi = new ProjectFlockKandangService(
+  '/production/project-flock-kandangs'
+);
diff --git a/src/services/api/production/project-flock.ts b/src/services/api/production/project-flock.ts
new file mode 100644
index 00000000..d92881f6
--- /dev/null
+++ b/src/services/api/production/project-flock.ts
@@ -0,0 +1,246 @@
+import {
+  CreateProjectFlockPayload,
+  ProjectFlock,
+  UpdateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+import { BaseApiService } from '@/services/api/base';
+import {
+  BaseApiResponse,
+  BaseGroupedApproval,
+  ErrorApiResponse,
+  SuccessApiResponse,
+} from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+import axios from 'axios';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { RequestOptions } from '@/services/http/base';
+
+export class ProjectFlockService extends BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  UpdateProjectFlockPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+  /**
+   * Get Approval Lines
+   */
+  async getApprovalLines(
+    id: number
+  ): Promise<
+    | BaseApiResponse<BaseGroupedApproval[]>
+    | ErrorApiResponse
+    | SuccessApiResponse<BaseGroupedApproval[]>
+    | undefined
+  > {
+    const path = `/approvals`;
+    try {
+      return await httpClient<SuccessApiResponse<BaseGroupedApproval[]>>(path, {
+        method: 'GET',
+        query: {
+          module_id: id,
+          module_name: 'PROJECT_FLOCKS',
+          group_step_number: true,
+        },
+      } as RequestOptions);
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Lookup for Project Flock Kandang
+   */
+  async lookupProjectFlockKandang(
+    projectFlockId: number,
+    kandangId: number
+  ): Promise<
+    | BaseApiResponse<
+        | ErrorApiResponse
+        | SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+      >
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/kandangs/lookup`;
+      return await httpClient<
+        BaseApiResponse<
+          SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+        >
+      >(path, {
+        method: 'GET',
+        body: {
+          project_flock_id: projectFlockId,
+          kandang_id: kandangId,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Get Next Period of Project Flock
+   */
+  async getNextPeriod(locationId: number): Promise<
+    | BaseApiResponse<
+        {
+          id: number;
+          name: string;
+          period: number;
+        }[]
+      >
+    | ErrorApiResponse
+    | SuccessApiResponse<
+        {
+          id: number;
+          name: string;
+          period: number;
+        }[]
+      >
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/locations/${locationId.toString()}/periods`;
+      return await httpClient<
+        SuccessApiResponse<
+          {
+            id: number;
+            name: string;
+            period: number;
+          }[]
+        >
+      >(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Resubmit Project Flock
+   */
+  async resubmit(
+    id: number,
+    payload: UpdateProjectFlockPayload
+  ): Promise<BaseApiResponse<ProjectFlock> | undefined> {
+    try {
+      const updatePath = `${this.basePath}/${id}/resubmit`;
+
+      const headers = {
+        'Content-Type': 'application/json',
+        ...(this.header ?? {}),
+      };
+
+      const updateRes = await httpClient<BaseApiResponse<ProjectFlock>>(
+        updatePath,
+        {
+          method: 'PUT',
+          body: payload,
+          headers,
+        }
+      );
+      return updateRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<ProjectFlock>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  /**
+   * Approve single Project Flock
+   */
+  async approve(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'APPROVED', notes);
+  }
+
+  /**
+   * Reject single Project Flock
+   */
+  async reject(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'REJECTED', notes);
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprove(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'APPROVED', notes);
+  }
+
+  /**
+   * Reject Bulk Project Flock
+   */
+  async bulkReject(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'REJECTED', notes);
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprovalAction(
+    ids: number[],
+    action: 'APPROVED' | 'REJECTED',
+    notes?: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: ids,
+          notes: notes ?? `Bulk ${action} Project Flock ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
+    }
+  }
+}
+
+export const ProjectFlockApi = new ProjectFlockService(
+  '/production/project-flocks'
+);
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
new file mode 100644
index 00000000..85b556e3
--- /dev/null
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -0,0 +1,209 @@
+import axios from 'axios';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse, GroupedApprovals } from '@/types/api/api-general';
+
+import {
+  CreateTransferToLayingPayload,
+  TransferToLaying,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { httpClient } from '@/services/http/client';
+import { ProjectFlockAvailableQuantity } from '@/types/api/production/project-flock';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+export class TransferToLayingService extends BaseApiService<
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  async approve(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<TransferToLaying> | undefined> {
+    try {
+      const approveRes = await httpClient<BaseApiResponse<TransferToLaying>>(
+        `${this.basePath}/approvals`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return approveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<TransferToLaying>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkApprove(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<TransferToLaying> | undefined> {
+    try {
+      const approveRes = await httpClient<BaseApiResponse<TransferToLaying>>(
+        `${this.basePath}/approvals`,
+        {
+          method: 'POST',
+          body: {
+            action: 'APPROVED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return approveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<TransferToLaying>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async reject(
+    id: number,
+    notes?: string
+  ): Promise<BaseApiResponse<TransferToLaying> | undefined> {
+    try {
+      const rejectRes = await httpClient<BaseApiResponse<TransferToLaying>>(
+        `${this.basePath}/approvals`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: [id],
+            notes: notes,
+          },
+        }
+      );
+
+      return rejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<TransferToLaying>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async bulkReject(
+    ids: number[],
+    notes?: string
+  ): Promise<BaseApiResponse<TransferToLaying> | undefined> {
+    try {
+      const rejectRes = await httpClient<BaseApiResponse<TransferToLaying>>(
+        `${this.basePath}/approvals`,
+        {
+          method: 'POST',
+          body: {
+            action: 'REJECTED',
+            approvable_ids: ids,
+            notes: notes,
+          },
+        }
+      );
+
+      return rejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<TransferToLaying>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async getAvailabelQty(projectFlockId: number) {
+    try {
+      const availableQtyRes = await httpClient<
+        BaseApiResponse<ProjectFlockAvailableQuantity>
+      >(`${this.basePath}/project-flocks/${projectFlockId}/available-qty`);
+
+      return availableQtyRes;
+    } catch (error) {
+      if (
+        axios.isAxiosError<BaseApiResponse<ProjectFlockAvailableQuantity>>(
+          error
+        )
+      ) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async getMappedFlockKandangsAvailability(projectFlockId: number) {
+    try {
+      const flockAvailableQty = await this.getAvailabelQty(projectFlockId);
+
+      const flockKandangsAvailableQty = isResponseSuccess(flockAvailableQty)
+        ? flockAvailableQty.data.kandangs
+        : [];
+
+      const mappedFlockKandangsAvailableQty: Record<
+        number,
+        (typeof flockKandangsAvailableQty)[0]
+      > = {};
+
+      flockKandangsAvailableQty.forEach((item) => {
+        if (!mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]) {
+          mappedFlockKandangsAvailableQty[item.project_flock_kandang_id] = item;
+        }
+      });
+
+      return mappedFlockKandangsAvailableQty;
+    } catch (error) {
+      return undefined;
+    }
+  }
+
+  async getApprovalHistory(
+    transferToLayingId: number,
+    group: boolean = true,
+    page: number = 1,
+    limit: number = 10
+  ) {
+    try {
+      const approvalHistoryRes = await httpClient<GroupedApprovals>(
+        '/approvals',
+        {
+          query: {
+            module_name: 'TRANSFER_TO_LAYINGS',
+            module_id: transferToLayingId,
+            group_step_number: group ? 'true' : 'false',
+            page,
+            limit,
+          },
+        }
+      );
+
+      return approvalHistoryRes;
+    } catch (error) {
+      if (axios.isAxiosError<GroupedApprovals>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+}
+
+export const TransferToLayingApi = new TransferToLayingService(
+  '/production/transfer_layings'
+);
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
new file mode 100644
index 00000000..d0438e88
--- /dev/null
+++ b/src/services/api/purchase.ts
@@ -0,0 +1,97 @@
+import {
+  CreatePurchaseRequestPayload,
+  Purchase,
+  UpdatePurchaseRequestPayload,
+  CreateStaffApprovalRequestPayload,
+  UpdateStaffApprovalRequestPayload,
+  CreateManagerApprovalRequestPayload,
+  CreateAcceptApprovalRequestPayload,
+  DeletePurchaseRequestItemPayload,
+} from '@/types/api/purchase/purchase';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+const basePurchaseApi = new BaseApiService<
+  Purchase,
+  CreatePurchaseRequestPayload,
+  UpdatePurchaseRequestPayload
+>('/purchases');
+
+export const PurchaseApi = {
+  basePath: basePurchaseApi.basePath,
+  header: basePurchaseApi.header,
+  getAllFetcher: basePurchaseApi.getAllFetcher.bind(basePurchaseApi),
+  getSingle: basePurchaseApi.getSingle.bind(basePurchaseApi),
+  create: basePurchaseApi.create.bind(basePurchaseApi),
+  update: basePurchaseApi.update.bind(basePurchaseApi),
+  delete: basePurchaseApi.delete.bind(basePurchaseApi),
+  customRequest: basePurchaseApi.customRequest.bind(basePurchaseApi),
+
+  staffApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateStaffApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/staff`, {
+        method: 'POST',
+        payload,
+      });
+    },
+
+    update: async (
+      purchaseRequestId: number,
+      payload: UpdateStaffApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/staff`, {
+        method: 'POST',
+        payload,
+      });
+    },
+  },
+
+  managerApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateManagerApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/manager`, {
+        method: 'POST',
+        payload,
+      });
+    },
+  },
+
+  acceptApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateAcceptApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/receipts`, {
+        method: 'POST',
+        payload,
+      });
+    },
+  },
+
+  items: {
+    delete: async (
+      purchaseRequestId: number,
+      payload: DeletePurchaseRequestItemPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/items`, {
+        method: 'DELETE',
+        payload,
+      });
+    },
+  },
+};
diff --git a/src/services/http/client.ts b/src/services/http/client.ts
index 9dd382ca..68b5282a 100644
--- a/src/services/http/client.ts
+++ b/src/services/http/client.ts
@@ -1,10 +1,23 @@
 import axios from 'axios';
-import type { AxiosRequestConfig } from 'axios';
+import type { AxiosError, AxiosRequestConfig } from 'axios';
 import { RequestOptions } from '@/services/http/base';
 
+import { redirectToSSO } from '@/lib/auth-helper';
+
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
 const axiosClient = axios.create({ baseURL: BASE_URL, timeout: 10_000 });
 
+axiosClient.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      redirectToSSO();
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export async function httpClient<T, B = unknown>(
   path: string,
   opts: RequestOptions<B> = {}
diff --git a/src/stores/ui/slices/drawer.slice.ts b/src/stores/ui/slices/drawer.slice.ts
new file mode 100644
index 00000000..b92b60c3
--- /dev/null
+++ b/src/stores/ui/slices/drawer.slice.ts
@@ -0,0 +1,40 @@
+import { DrawerUISlice } from '@/types/stores';
+import { StateCreator } from 'zustand';
+
+export const createDrawerUISlice: StateCreator<
+  DrawerUISlice,
+  [],
+  [],
+  DrawerUISlice
+> = (set, get, api) => ({
+  // event flag untuk memicu formik validate
+  triggerValidate: false,
+
+  // dibalik untuk memicu event
+  toggleValidate: () => {
+    const current = get().triggerValidate;
+    set({ triggerValidate: !current });
+  },
+
+  // sistem subscriber sederhana agar form bisa listen perubahan flag
+  subscribeValidate: (callback: () => void) => {
+    let prev = get().triggerValidate;
+
+    const unsub = api.subscribe((state) => {
+      if (state.triggerValidate !== prev) {
+        prev = state.triggerValidate;
+        callback();
+      }
+    });
+
+    return unsub;
+  },
+
+  isValid: false,
+  setIsValid: (isValid: boolean) => set({ isValid }),
+  subscribeIsValid: (callback: (isValid: boolean) => void) => {
+    return api.subscribe((state) => {
+      callback(Boolean(state.isValid));
+    });
+  },
+});
diff --git a/src/stores/ui/ui.store.ts b/src/stores/ui/ui.store.ts
index 49554bc9..cbc5785d 100644
--- a/src/stores/ui/ui.store.ts
+++ b/src/stores/ui/ui.store.ts
@@ -5,11 +5,13 @@ import { devtools } from 'zustand/middleware';
 
 import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
+import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
     (...args) => ({
       ...createMainUiSlice(...args),
+      ...createDrawerUISlice(...args),
     }),
     {
       name: 'UIStore',
diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
index dadaa2fa..8eca2c82 100644
--- a/src/styles/daisyui.css
+++ b/src/styles/daisyui.css
@@ -1,4 +1,9 @@
 @layer utilities {
+  .menu {
+    --menu-active-fg: var(--color-primary);
+    --menu-active-bg: transparent;
+  }
+
   .step.step-success::before {
     --step-bg: var(--color-success);
     --step-fg: var(--color-success-content);
@@ -9,6 +14,11 @@
     --step-fg: var(--color-error-content);
   }
 
+  .step.step-warning::before {
+    --step-bg: var(--color-warning);
+    --step-fg: var(--color-warning-content);
+  }
+
   .table :where(th, td) {
     vertical-align: top;
   }
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 2a720018..5b9f04e3 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -97,19 +97,22 @@ export type flags =
   | 'FINISHER'
   | 'OVK';
 
-export type ApprovalsLine = {
-  action_by?: string;
-  date?: string;
-  notes?: string;
-  role?: string;
-  status: 'approved' | 'rejected' | 'waiting';
-}[];
-
 export type BaseApproval = {
+  id?: number;
   step_number: number;
   step_name: string;
   action: string;
-  notes: string | null;
+  notes?: string | null;
   action_by: CreatedUser;
   action_at: string;
 };
+
+export type BaseGroupedApproval = {
+  step_number: number;
+  step_name: string;
+  approvals: BaseApproval[];
+};
+
+export type Approvals = BaseApiResponse<BaseApproval>;
+
+export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;
diff --git a/src/types/api/closing.d.ts b/src/types/api/closing.d.ts
new file mode 100644
index 00000000..baf4c7aa
--- /dev/null
+++ b/src/types/api/closing.d.ts
@@ -0,0 +1,144 @@
+import { Area } from '@/types/api/master-data/area';
+import { Fcr } from '@/types/api/master-data/fcr';
+import { Flock } from '@/types/api/master-data/flock';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Product } from '@type/api/master-data/product';
+import { Customer } from '@type/api/master-data/customer';
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseSales = {
+  id: number;
+  realization_date: string;
+  age: number;
+  do_number: string;
+  product: Product;
+  customer: Customer;
+  qty: number;
+  weight: number;
+  avg_weight: number;
+  price: number;
+  total_price: number;
+  kandang: Kandang;
+  payment_status: string;
+};
+
+export type BaseClosingSales = {
+  project_type: string;
+  flock_id: number;
+  period: number;
+  sales: BaseSales[];
+};
+
+export type BaseClosing = {
+  id: number;
+  location_id: number;
+  location_name: string;
+  project_category: 'GROWING' | 'LAYING';
+  period: number;
+  closing_date?: string;
+  shed_label: string;
+  shed_count: number;
+  sales_paid_amount: number;
+  sales_remaining_amount: number;
+  sales_payment_status: string;
+  project_status: 'Pengajuan' | 'Aktif' | 'Selesai';
+};
+
+export type Closing = BaseMetadata & BaseClosing;
+
+export type BaseClosingGeneralInformation = BaseClosing & {
+  flock_id: number;
+  period: number;
+  project_type: 'GROWING' | 'LAYING';
+  population: number;
+  active_house_count: number;
+  sales_payment_status: string;
+  project_status: 'Pengajuan' | 'Aktif' | 'Selesai';
+  closing_status: string;
+};
+
+export type ClosingGeneralInformation = BaseMetadata &
+  BaseClosingGeneralInformation;
+
+export type ClosingIncomingSapronak = {
+  id: number;
+  date: string;
+  reference_number: string;
+  transaction_type: string;
+  product_name: string;
+  product_category: string;
+  product_sub_category: string;
+  source_warehouse: string;
+  destination_warehouse: string;
+  quantity: number;
+  unit: string;
+  formatted_quantity: string;
+  notes: string;
+};
+
+export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
+
+// ====== PERHITUNGAN SAPRONAK ======
+
+export type RowSapronakCalculation = {
+  id: number;
+  tanggal: string;
+  no_referensi: string;
+  qty_masuk: number;
+  qty_keluar: number;
+  qty_pakai: number;
+  uraian: string;
+  kategori_produk: string;
+  harga_beli_per_qty: number;
+  total_harga: number;
+  keterangan: string;
+};
+
+export type TotalSapronakCalculation = {
+  label: string;
+  qty_masuk: number;
+  qty_keluar: number;
+  qty_pakai: number;
+  harga_beli_per_qty: number;
+  total_harga: number;
+};
+
+export type ClosingSapronakCalculationItem = {
+  rows: RowSapronakCalculation[];
+  total: TotalSapronakCalculation;
+};
+
+export type ClosingSapronakCalculation = {
+  doc_broiler: ClosingSapronakCalculationItem;
+  ovk: ClosingSapronakCalculationItem;
+  pakan: ClosingSapronakCalculationItem;
+};
+
+// ====== OVERHEAD ======
+export type ClosingOverhead = {
+  overheads: Overhead[];
+  total: OverheadTotal;
+};
+
+export type Overhead = {
+  item_name: string;
+  uom_name: string;
+  budget_quantity: number;
+  budget_unit_price: number;
+  budget_total_amount: number;
+  actual_date: string;
+  actual_quantity: number;
+  actual_unit_price: number;
+  actual_total_amount: number;
+  cost_per_bird: number;
+};
+
+export type OverheadTotal = {
+  budget_quantity: number;
+  budget_total_amount: number;
+  actual_quantity: number;
+  actual_total_amount: number;
+  cost_per_bird: number;
+};
+export type ClosingSales = BaseMetadata & BaseClosingSales;
diff --git a/src/types/api/expense.d.ts b/src/types/api/expense.d.ts
new file mode 100644
index 00000000..a62066ba
--- /dev/null
+++ b/src/types/api/expense.d.ts
@@ -0,0 +1,101 @@
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { BaseLocation, Location } from '@/types/api/master-data/location';
+import { BaseKandang, Kandang } from '@/types/api/master-data/kandang';
+import { BaseSupplier, Supplier } from '@/types/api/master-data/supplier';
+import { BaseNonstock, Nonstock } from '@/types/api/master-data/nonstock';
+import { BaseUser } from '@/types/api/user';
+
+export type BaseExpense = {
+  id: number;
+  reference_number: string;
+  po_number: string | null;
+  category: 'BOP' | 'NON-BOP';
+  documents?: {
+    id: number;
+    path: string;
+  }[];
+  realization_docs?: {
+    id: number;
+    path: string;
+  }[];
+  transaction_date: string;
+  realization_date?: string;
+  grand_total: number;
+  location: BaseLocation;
+  supplier: BaseSupplier;
+  kandangs: {
+    id: number;
+    kandang_id: number;
+    name: string;
+    pengajuans?: {
+      id: number;
+      expense_id: number;
+      kandang_id: number;
+      nonstock_id: number;
+      qty: number;
+      price: number;
+      note?: string;
+      nonstock: Pick<BaseNonstock, 'id' | 'name' | 'flags'>;
+      created_at: string;
+    }[];
+    realisasi?: {
+      id: number;
+      expense_nonstock_id: number;
+      qty: number;
+      price: number;
+      note?: string;
+      nonstock: Pick<BaseNonstock, 'id' | 'name' | 'flags'>;
+      created_at: string;
+    }[];
+  }[];
+  total_pengajuan: number;
+  total_realisasi: number;
+  latest_approval: BaseApproval;
+};
+
+export type Expense = BaseMetadata & BaseExpense;
+
+export type CreateExpensePayload = {
+  category: 'BOP' | 'NON-BOP';
+  transaction_date: string;
+  supplier_id: number;
+  documents: File[];
+  expense_nonstocks: {
+    kandang_id: number;
+    cost_items: {
+      nonstock_id: number;
+      quantity: number;
+      price: number;
+      notes: string;
+    }[];
+  }[];
+};
+
+export type UpdateExpensePayload = {
+  category: 'BOP' | 'NON-BOP';
+  transaction_date: string;
+  supplier_id: number;
+  documents: File[];
+  expense_nonstocks: {
+    kandang_id: number;
+    cost_items: {
+      nonstock_id: number;
+      quantity: number;
+      price: number;
+      notes: string;
+    }[];
+  }[];
+};
+
+export type CreateExpenseRealizationPayload = {
+  realization_date: string;
+  documents: File[];
+  realizations: {
+    expense_nonstock_id: number;
+    qty: number;
+    price: number;
+    notes: string;
+  }[];
+};
+
+export type UpdateExpenseRealizationPayload = CreateExpenseRealizationPayload;
diff --git a/src/types/api/inventory/adjustment.d.ts b/src/types/api/inventory/adjustment.d.ts
index 4cb4dab4..d6c0e078 100644
--- a/src/types/api/inventory/adjustment.d.ts
+++ b/src/types/api/inventory/adjustment.d.ts
@@ -1,6 +1,6 @@
 import { Product } from '@/types/api/master-data/product';
-import { BaseMetadata } from '../base-metadata';
 import { Warehouse } from '@/types/api/master-data/warehouse';
+import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseInventoryAdjustment = {
   id: number;
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 87a03f95..53dfa61d 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -71,5 +71,3 @@ export type CreateMovementPayload = {
     }[];
   }[];
 };
-
-export type UpdateMovementPayload = CreateMovementPayload;
diff --git a/src/types/api/inventory/product.d.ts b/src/types/api/inventory/product.d.ts
new file mode 100644
index 00000000..cb8f98a1
--- /dev/null
+++ b/src/types/api/inventory/product.d.ts
@@ -0,0 +1,48 @@
+import { BaseMetadata, CreatedUser } from '@/types/api/api-general';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Uom } from '@/types/api/master-data/uom';
+import { Location } from '@/types/api/master-data/location';
+
+export type BaseInventoryProduct = {
+  id: number;
+  name: string;
+  brand: string;
+  sku: string;
+  product_price: number;
+  selling_price?: number;
+  tax?: number;
+  expiry_period?: number;
+  uom: Uom;
+  product_category: ProductCategory;
+  suppliers: Supplier[];
+  flags: string[];
+  product_warehouses?: ProductWarehouseStock[];
+  total_stock?: number;
+};
+
+export type ProductWarehouseStock = {
+  id: number;
+  product_id: number;
+  warehouse_id: number;
+  warehouse_name: string;
+  location: Location | null;
+  current_stock: number;
+  stock_logs: StockLog[];
+};
+
+export type StockLog = {
+  id: number;
+  increase: number;
+  decrease: number;
+  loggable_type: string;
+  loggable_id: number;
+  notes: string;
+  product_warehouse_id: number;
+  created_by: number;
+  created_user: CreatedUser;
+  created_at: string;
+};
+
+export type InventoryProduct = BaseInventoryProduct & BaseMetadata;
diff --git a/src/types/api/marketing/marketing.d.ts b/src/types/api/marketing/marketing.d.ts
new file mode 100644
index 00000000..931184f9
--- /dev/null
+++ b/src/types/api/marketing/marketing.d.ts
@@ -0,0 +1,140 @@
+import { Customer } from '@/types/api/master-data/customer';
+import {
+  BaseApproval,
+  BaseMetadata,
+  CreatedUser,
+} from '@/types/api/api-general';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { id } from 'react-day-picker/locale';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+
+/**
+ * Base Data Response
+ */
+export type BaseMarketing = {
+  id: number;
+  status?: string;
+  so_number: string;
+  so_date: string;
+  customer: Customer;
+  sales_person: CreatedUser;
+  notes: string;
+  latest_approval: BaseApproval;
+  sales_order: BaseSalesOrder[];
+  delivery_order: BaseDeliveryOrder[];
+};
+
+export type BaseSalesOrder = {
+  id: number;
+  marketing_id: number;
+  product_warehouse_id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+  vehicle_number: string;
+};
+
+export type BaseDeliveryOrder = {
+  id: number;
+  marketing_id: number;
+  do_number: string;
+  delivery_date: string;
+  warehouse: Warehouse;
+  deliveries: BaseDelivery[];
+};
+
+export type BaseDelivery = {
+  product_warehouse: ProductWarehouse;
+  qty: number;
+  unit_price: number;
+  total_weight: number;
+  avg_weight: number;
+  total_price: number;
+  vehicle_number: string;
+};
+
+export type MarketingProduct = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+  delivery_product?: MarketingDeliveryProducts;
+};
+
+export type MarketingDeliveryProducts = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  delivery_date: string | null;
+  vehicle_number: string;
+  do_number?: string | undefined; // Uncertain
+};
+
+export type Marketing = BaseMetadata & BaseMarketing;
+
+/**
+ * Base Data Payload
+ */
+export type BaseCreateMarketingPayload = {
+  customer_id: number;
+  sales_person_id: number;
+  date: string;
+  notes: string;
+};
+
+export type BaseCreateMarketingProductPayload = {
+  vehicle_number: string;
+  kandang_id: string | number | undefined;
+  product_warehouse_id: string | number | undefined;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+};
+
+/**
+ * Payload Data Types Sales Order
+ */
+
+export type CreateSalesOrderPayload = BaseCreateMarketingPayload & {
+  marketing_products: CreateSalesOrderProductPayload[];
+};
+
+export type CreateSalesOrderProductPayload =
+  BaseCreateMarketingProductPayload & {
+    id?: number;
+    kandang?: Kandang | undefined;
+    product_warehouse?: ProductWarehouse | undefined;
+  };
+
+export type CreateDeliveryOrderPayload = {
+  marketing_id?: number;
+  delivery_products: CreateDeliveryOrderProductPayload[];
+};
+
+export type CreateDeliveryOrderProductPayload =
+  BaseCreateMarketingProductPayload & {
+    id?: number;
+    marketing_product_id: number;
+    delivery_date: string;
+  };
+
+export type UpdateSalesOrderProductPayload = CreateSalesOrderProductPayload;
+
+export type UpdateDeliveryOrderProductPayload =
+  CreateDeliveryOrderProductPayload;
+
+export type UpdateSalesOrderPayload = CreateSalesOrderPayload;
+
+export type UpdateDeliveryOrderPayload = CreateDeliveryOrderPayload;
diff --git a/src/types/api/master-data/customer.d.ts b/src/types/api/master-data/customer.d.ts
index fa133cab..bdb45b05 100644
--- a/src/types/api/master-data/customer.d.ts
+++ b/src/types/api/master-data/customer.d.ts
@@ -1,27 +1,27 @@
-import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+import { BaseMetadata, CreatedUser } from '@/types/api/api-general';
 
 export type BaseCustomer = {
-    id: number;
-    name: string;
-    pic_id: number;
-    pic: CreatedUser;
-    type: string;
-    address: string;
-    phone: string;
-    email: string;
-    account_number: string;
-}
+  id: number;
+  name: string;
+  pic_id: number;
+  pic: CreatedUser;
+  type: string;
+  address: string;
+  phone: string;
+  email: string;
+  account_number: string;
+};
 
 export type Customer = BaseMetadata & BaseCustomer;
 
 export type CreateCustomerPayload = {
-    name: string;
-    pic_id: number;
-    type: string;
-    address: string;
-    phone: string;
-    email: string;
-    account_number: string;
-}
+  name: string;
+  pic_id: number;
+  type: string;
+  address: string;
+  phone: string;
+  email: string;
+  account_number: string;
+};
 
-export type UpdateCustomerPayload = CreateCustomerPayload;
\ No newline at end of file
+export type UpdateCustomerPayload = CreateCustomerPayload;
diff --git a/src/types/api/master-data/kandang.d.ts b/src/types/api/master-data/kandang.d.ts
index 17cbbee7..c9c14882 100644
--- a/src/types/api/master-data/kandang.d.ts
+++ b/src/types/api/master-data/kandang.d.ts
@@ -7,7 +7,10 @@ export type BaseKandang = {
   name: string;
   status: string;
   location: BaseLocation;
+  capacity: number;
   pic: BaseUser;
+  project_flock_kandang_id?: number;
+  capacity: number;
 };
 
 export type Kandang = BaseMetadata & BaseKandang;
@@ -15,6 +18,7 @@ export type Kandang = BaseMetadata & BaseKandang;
 export type CreateKandangPayload = {
   name: string;
   location_id: number;
+  capacity: number;
   pic_id: number;
 };
 
diff --git a/src/types/api/master-data/product.d.ts b/src/types/api/master-data/product.d.ts
index d4039750..e82f857e 100644
--- a/src/types/api/master-data/product.d.ts
+++ b/src/types/api/master-data/product.d.ts
@@ -34,4 +34,4 @@ export type CreateProductPayload = {
   flags: string[];
 };
 
-export type UpdateProductPayload = CreateProductPayload;
\ No newline at end of file
+export type UpdateProductPayload = CreateProductPayload;
diff --git a/src/types/api/master-data/supplier.d.ts b/src/types/api/master-data/supplier.d.ts
index e6998a25..81d41771 100644
--- a/src/types/api/master-data/supplier.d.ts
+++ b/src/types/api/master-data/supplier.d.ts
@@ -1,38 +1,50 @@
 import { BaseMetadata } from '@/types/api/api-general';
+import { Uom } from '@/types/api/master-data/uom';
 
 export type BaseSupplier = {
-    id: number;
-    name: string;
-    alias: string;
-    pic: string;
-    type: string;
-    category: string;
-    hatchery: string;
-    phone: string;
-    email: string;
-    address: string;
-    npwp: string;
-    account_number: string;
-    due_date: number;
-    balance?: number;
-}
+  id: number;
+  name: string;
+  alias: string;
+  pic: string;
+  type: string;
+  category: string;
+  hatchery: string;
+  phone: string;
+  email: string;
+  address: string;
+  npwp: string;
+  account_number: string;
+  due_date: number;
+  balance?: number;
+};
 
 export type Supplier = BaseMetadata & BaseSupplier;
 
-export type CreateSupplierPayload = {
+export type SupplierProducts = Supplier & {
+  products?: Array<{
+    id: number;
     name: string;
-    alias: string;
-    pic: string;
-    type: string;
-    category: string;
-    hatchery: string;
-    phone: string;
-    email: string;
-    address: string;
-    npwp: string;
-    account_number: string;
-    due_date: number;
-    balance?: number;
-}
+    ProductPrice: number;
+    SellingPrice?: number;
+    uom: Uom;
+    flags: string[];
+  }>;
+};
 
-export type UpdateSupplierPayload = CreateSupplierPayload;
\ No newline at end of file
+export type CreateSupplierPayload = {
+  name: string;
+  alias: string;
+  pic: string;
+  type: string;
+  category: string;
+  hatchery: string;
+  phone: string;
+  email: string;
+  address: string;
+  npwp: string;
+  account_number: string;
+  due_date: number;
+  balance?: number;
+};
+
+export type UpdateSupplierPayload = CreateSupplierPayload;
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index 99d24922..8b1dcb67 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -1,5 +1,5 @@
-import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
-import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 export type BaseChickin = {
   id?: number;
@@ -8,16 +8,18 @@ export type BaseChickin = {
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
   approval: BaseApproval;
-}
+};
 
 export type Chickin = BaseMetadata & BaseChickin;
 
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
-  chick_in_date: string;
-  note: string;
-  quantity?: number;
-}
+  chickin_requests: {
+    chick_in_date: string;
+    note?: string;
+    product_warehouse_id: number;
+  }[];
+};
 
 export type UpdateChickinPayload = CreateChickinPayload & {
   id: number;
@@ -26,4 +28,4 @@ export type UpdateChickinPayload = CreateChickinPayload & {
 export type ChickinApprovalPayload = {
   action: 'APPROVED' | 'REJECTED';
   approvable_ids: number[];
-};
\ No newline at end of file
+};
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 83a1c18f..3a98a6e8 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -1,5 +1,8 @@
-import { Kandang } from "@/type/master-data/kandang";
-import { ProjectFlock } from "@/types/api/production/project-flock";
+import { Kandang } from '@/type/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { BaseApproval } from '@/types/api/api-general';
 
 export type BaseProjectFlockKandang = {
   id: number;
@@ -7,12 +10,72 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
-  available_quantity?: number;
-}
+  available_qtys?: AvailableQty[];
+  chickins?: Chickin[];
+  approval: BaseApproval;
+};
+
+export type AvailableQty = {
+  chick_in_date?: string;
+  available_qty: number;
+  product_warehouse: ProductWarehouse;
+  note?: string;
+};
+
+export type Chickin = {
+  id: number;
+  project_flock_kandang_id: number;
+  chick_in_date: string;
+  product_warehouse_id: number;
+  product_warehouse: ProductWarehouse;
+  usage_qty: number;
+  pending_usage_qty: number;
+  note: string;
+};
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;
 
 export type LookupProjectFlockKandangPayload = {
   project_flock_id: number;
   kandang_id: number;
-}
\ No newline at end of file
+};
+
+export type ClosingProjectFlockKandangPayload = {
+  action: 'close' | 'unclose';
+  closed_date?: string; // YYYY-MM-DD, DD-MM-YYYY, or RFC3339
+};
+
+export type ClosingExpense = {
+  id: number;
+  po_number: string;
+  category: string;
+  total: number;
+  status: string;
+  step_name: string;
+  step: number;
+  reference_number: string;
+};
+
+// "flag_name": "PAKAN",
+//                 "product_warehouse_id": 14,
+//                 "product_id": 8,
+//                 "product_name": "281 SPECIAL STARTER",
+//                 "product_category": "Bahan Baku",
+//                 "uom": "Kilogram",
+//                 "quantity": 1100
+
+export type StockItem = {
+  flag_name: string;
+  product_warehouse_id: number;
+  product_id: number;
+  product_name: string;
+  product_category: string;
+  uom: string;
+  quantity: number;
+};
+
+export type CheckClosingResponse = {
+  unfinished_expenses: number;
+  stock_remaining: StockItem[];
+  expenses: ClosingExpense[];
+};
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index be14302d..35c42c38 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -4,13 +4,13 @@ import { Flock } from '@/types/api/master-data/flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { Location } from '@/types/api/master-data/location';
 import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { Nonstock } from '@/types/api/master-data/nonstock';
 
 export type BaseProjectFlock = {
   id: number;
-  name: string;
+  name?: string;
+  flock_name?: string;
   status: string;
-  flock: Flock;
-  flock_id: number;
   area: Area;
   area_id: number;
   category: string;
@@ -20,7 +20,10 @@ export type BaseProjectFlock = {
   location_id: number;
   period: number;
   kandang_ids: number[];
-  kandangs: Kandang[];
+  kandangs: (Kandang & {
+    project_flock_kandang_id: number;
+  })[];
+  project_budgets?: ProjectFlockBudget[];
   approval: BaseApproval;
 };
 
@@ -29,16 +32,25 @@ export type PeriodFlock = {
   next_period: number;
 };
 
+export type ProjectFlockBudget = {
+  id?: number;
+  project_flock_id?: number;
+  nonstock_id: number;
+  nonstock?: Nonstock;
+  qty: number;
+  price: number;
+};
+
 export type ProjectFlock = BaseMetadata & BaseProjectFlock;
 
 export type CreateProjectFlockPayload = {
-  flock_id: number;
+  flock_name: string;
   area_id: number;
   category: string;
   fcr_id: number;
   location_id: number;
-  period: number;
   kandang_ids: number[];
+  project_budgets?: ProjectFlockBudget[];
 };
 
 export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
@@ -47,3 +59,29 @@ export type ProjectFlockApprovalPayload = {
   action: 'APPROVED' | 'REJECTED';
   approvable_ids: number[];
 };
+
+export type ProjectFlockKandangLookup = {
+  id: number;
+  project_flock_kandang_id: number;
+  project_flock_id: number;
+  kandang_id: number;
+  kandang: Kandang;
+  project_flock: ProjectFlock;
+  quantity: number;
+};
+
+export type ProjectFlockAvailableQuantity = {
+  project_flock_id: number;
+  flock_name: string;
+  category: 'LAYING' | 'GROWING';
+  kandangs: {
+    project_flock_kandang_id: number;
+    available_qty: number;
+  }[];
+};
+
+export type ProjectFlockPeriods = {
+  id: number;
+  name: string;
+  period: number;
+}[];
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index 6fac0bc8..9bed7685 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -1,61 +1,111 @@
-import { BaseMetadata } from '@/types/api/api-general';
-import { Location } from '@/types/api/master-data/location';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Flock } from '@/types/api/master-data/flock';
+import { BaseApproval, BaseMetadata, User } from '@/types/api/api-general';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+
+export type ProductionMetrics = {
+  total_depletion_qty: number;
+  cum_depletion_rate: number;
+  daily_gain: number;
+  avg_daily_gain: number;
+  cum_intake: number;
+  fcr_value: number;
+  total_chick_qty: number;
+  cum_depletion: number;
+};
 
 export type BaseRecording = {
   id: number;
-  flock: Flock;
-  recording_date: string;
-  location: Location;
-  coop: Kandang;
-  feed_data: {
-    feed_name: string;
-    feed_qty: number;
-    feed_stock: number;
-  }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
-  }[];
-  vaccination: {
-    vaccine_name: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
-    condition: string;
-    count: number;
+  project_flock_kandang_id: number;
+  record_datetime: string;
+  day: number;
+  project_flock_category?: 'GROWING' | 'LAYING';
+} & ProductionMetrics;
+
+export type RecordingBW = {
+  avg_weight: number;
+  qty: number;
+  total_weight: number;
+};
+
+export type RecordingDepletion = {
+  product_warehouse_id: number;
+  qty: number;
+  product_warehouse: ProductWarehouse;
+};
+
+export type RecordingStock = {
+  product_warehouse_id: number;
+  usage_amount?: number;
+  pending_qty: number;
+  product_warehouse: ProductWarehouse;
+};
+
+export type RecordingEgg = {
+  id: number;
+  product_warehouse_id: number;
+  qty: number;
+  weight: number;
+  product_warehouse: ProductWarehouse;
+  gradings?: {
+    grade: string;
+    qty: number;
   }[];
 };
 
-export type Recording = BaseMetadata & BaseRecording;
+export type GradingEgg = {
+  id: number;
+  recording_egg_id: number;
+  qty: number;
+  grade: string;
+  created_by: User;
+};
 
-export type CreateRecordingPayload = {
-  flock_id: number;
-  recording_date: string;
-  location_id: number;
-  coop_id: number;
-  feed_data: {
-    feed_id: string;
-    feed_qty: number;
-    feed_stock: number;
+export type Recording = BaseMetadata &
+  BaseRecording & {
+    approval?: BaseApproval;
+    created_user: User;
+    body_weights?: RecordingBW[];
+    depletions?: RecordingDepletion[];
+    stocks?: RecordingStock[];
+    eggs?: RecordingEgg[];
+    grading_eggs?: GradingEgg[];
+  };
+
+export type NextDayRecording = {
+  project_flock_kandang_id: number;
+  next_day: number;
+};
+
+export type CreateGrowingRecordingPayload = {
+  project_flock_kandang_id: number;
+  body_weights: {
+    avg_weight: number;
+    qty: number;
   }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
+  stocks?: {
+    product_warehouse_id: number;
+    qty: number;
   }[];
-  vaccination: {
-    vaccine_id: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
-    condition: string;
-    count: number;
+  depletions?: {
+    product_warehouse_id: number;
+    qty: number;
   }[];
 };
 
+export type CreateEggPayload = {
+  product_warehouse_id: number;
+  qty: number;
+  weight: number;
+};
+
+export type CreateLayingRecordingPayload = CreateGrowingRecordingPayload & {
+  eggs?: CreateEggPayload[];
+};
+
+export type CreateRecordingPayload =
+  | CreateGrowingRecordingPayload
+  | CreateLayingRecordingPayload;
+
+export type UpdateGrowingRecordingPayload = CreateGrowingRecordingPayload;
+export type UpdateLayingRecordingPayload = CreateLayingRecordingPayload;
+
 export type UpdateRecordingPayload = CreateRecordingPayload;
diff --git a/src/types/api/production/transfer-to-laying.d.ts b/src/types/api/production/transfer-to-laying.d.ts
new file mode 100644
index 00000000..deafda8a
--- /dev/null
+++ b/src/types/api/production/transfer-to-laying.d.ts
@@ -0,0 +1,91 @@
+import {
+  BaseApiResponse,
+  BaseMetadata,
+  CreatedUser,
+  flags,
+} from '@/types/api/api-general';
+import { BaseKandang, Kandang } from '@/types/api/master-data/kandang';
+import { WarehouseType } from '@/types/api/master-data/warehouse';
+
+export type BaseTransferToLaying = {
+  id: number;
+  transfer_number: string;
+  transfer_date: string;
+  notes: string;
+  from_project_flock: {
+    id: number;
+    flock_name: string;
+    category: 'GROWING' | 'LAYING';
+  };
+  to_project_flock: {
+    id: number;
+    flock_name: string;
+    category: 'GROWING' | 'LAYING';
+  };
+  pending_usage_qty: number | null;
+  usage_qty: number | null;
+
+  sources: {
+    source_project_flock_kandang: {
+      id: number;
+      kandang: Omit<BaseKandang, 'status' | 'location' | 'pic'>;
+    };
+    qty: number;
+    product_warehouse: {
+      product: {
+        id: number;
+        name: string;
+      };
+      warehouse: {
+        id: number;
+        name: string;
+        type: WarehouseType;
+      };
+    };
+  }[];
+
+  targets: {
+    target_project_flock_kandang: {
+      id: number;
+      kandang: Omit<BaseKandang, 'status' | 'location' | 'pic'>;
+    };
+    qty: number;
+    product_warehouse: {
+      product: {
+        id: number;
+        name: string;
+      };
+      warehouse: {
+        id: number;
+        name: string;
+        type: WarehouseType;
+      };
+    };
+  }[];
+
+  created_by: number;
+  created_user: CreatedUser;
+  created_at: string;
+
+  approval: BaseApproval;
+};
+
+export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
+
+export type CreateTransferToLayingPayload = {
+  transfer_date: string;
+  source_project_flock_id: number;
+  target_project_flock_id: number;
+  totalQuantity: number;
+  source_kandangs: {
+    project_flock_kandang_id: number;
+    quantity: number;
+  }[];
+  target_kandangs: {
+    project_flock_kandang_id: number;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
new file mode 100644
index 00000000..e4de565b
--- /dev/null
+++ b/src/types/api/purchase/purchase.d.ts
@@ -0,0 +1,127 @@
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Product } from '@/types/api/master-data/product';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Area } from '@/types/api/master-data/area';
+import { Location } from '@/types/api/master-data/location';
+
+export type PurchaseItemProduct = {
+  id: number;
+  name: string;
+  flags?: string[];
+  uom?: {
+    name: string;
+  };
+  product_category?:
+    | {
+        name: string;
+      }
+    | string;
+};
+
+export type PurchaseItem = {
+  id: number;
+  product_id: number;
+  warehouse: Warehouse;
+  product: PurchaseItemProduct | Product;
+  product_warehouse: ProductWarehouse;
+  quantity: number;
+  qty: number;
+  sub_qty: number;
+  total_qty: number;
+  total_used: number;
+  price: number;
+  total_price: number;
+  received_date?: string | null;
+  travel_number?: string | null;
+  travel_number_docs?: string | null;
+  travel_document_path?: string | null;
+  vehicle_number?: string | null;
+  expedition_vendor_id?: number | null;
+  expedition_vendor_name?: string | null;
+  received_qty?: number | null;
+  transport_per_item?: number | null;
+};
+
+export type BasePurchase = {
+  id: number;
+  pr_number: string;
+  po_number: string;
+  po_document_path?: string | null;
+  po_date: string;
+  supplier: Supplier;
+  credit_term?: number;
+  due_date: string;
+  notes?: string | null;
+  deleted_at?: string | null;
+  created_by: number;
+  area?: Area;
+  location?: Location;
+  warehouse?: Warehouse;
+  items?: PurchaseItem[];
+  latest_approval?: BaseApproval;
+};
+
+export type Purchase = BaseMetadata & BasePurchase;
+
+export type CreatePurchaseRequestPayload = {
+  supplier_id: number;
+  credit_term: number;
+  notes?: string | null;
+  items?: {
+    warehouse_id: number;
+    product_id: number;
+    qty: number;
+  }[];
+};
+
+export type CreateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  notes?: string | null;
+  items?: {
+    purchase_item_id: number;
+    qty: number;
+    price: number;
+    total_price: number;
+  }[];
+};
+
+export type UpdateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  notes?: string | null;
+  items?: Array<{
+    purchase_item_id?: number;
+    product_id?: number;
+    warehouse_id?: number;
+    qty: number;
+    price: number;
+    total_price: number;
+  }>;
+};
+
+export type CreateManagerApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  notes?: string | null;
+};
+
+export type CreateAcceptApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  notes?: string | null;
+  items?: {
+    purchase_item_id: number;
+    received_date: string;
+    travel_number: string;
+    travel_document_path: string;
+    vehicle_number: string;
+    expedition_vendor_id: number;
+    received_qty: number;
+    transport_per_item: number;
+  }[];
+};
+
+export type DeletePurchaseRequestItemPayload = {
+  item_ids: number[];
+};
+
+export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;
diff --git a/src/types/config/constant.d.ts b/src/types/config/constant.d.ts
new file mode 100644
index 00000000..3e4371be
--- /dev/null
+++ b/src/types/config/constant.d.ts
@@ -0,0 +1,4 @@
+export type ApprovalLine = {
+  step_number: number;
+  step_name: string;
+}[];
diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts
index 1a3046ae..37b252fe 100644
--- a/src/types/stores.d.ts
+++ b/src/types/stores.d.ts
@@ -3,4 +3,13 @@ type MainUiSlice = {
   setMainDrawerOpen: (open: boolean) => void;
 };
 
-export type UIStore = MainUiSlice;
+type DrawerUISlice = {
+  triggerValidate: boolean;
+  toggleValidate: () => void;
+  subscribeValidate: (callback: () => void) => void;
+  isValid: boolean;
+  setIsValid: (v: boolean) => void;
+  subscribeIsValid: (callback: (isValid: boolean) => void) => () => void;
+};
+
+export type UIStore = MainUiSlice & DrawerUISlice;
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index f83750e4..dcd9e13f 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -1,4 +1,4 @@
-type Color =
+export type Color =
   | 'primary'
   | 'secondary'
   | 'accent'
@@ -9,4 +9,4 @@ type Color =
   | 'error'
   | 'none';
 
-export { Color };
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';