feat(FE-331): add /report route to ROUTE_PERMISSIONS

feat(FE-331): implement permission guard in inventory
chore(FE-331): fix inventory route path
2026-05-20 13:32:00 +00:00 · 2025-12-24 09:24:16 +07:00 · 2025-12-23 16:40:32 +07:00 · 2025-12-23 16:39:08 +07:00 · 2025-12-23 15:55:50 +07:00 · 2025-12-23 15:53:05 +07:00
218 changed files with 27843 additions and 6970 deletions
@@ -42,3 +42,6 @@ next-env.d.ts

 # idea
 .idea
+
+# claude
+.claude
@@ -15,8 +15,24 @@ stages:
  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:
@@ -57,8 +73,8 @@ stages:

      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
        ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-PROD"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
      else
        ENVIRONMENT_NAME="UNKNOWN"
      fi
@@ -106,8 +122,10 @@ build:dev:
  environment:
    name: development
  variables:
-    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
+    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
@@ -121,6 +139,32 @@ deploy:dev:
  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
@@ -142,5 +186,4 @@ deploy:dev:
 #     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
 #   environment:
 #     name: production
-# url: https://royalgoldcapital.com

@@ -1,3 +1,3 @@
 npm run format
 npm run lint
-npm run build
+npm run build
@@ -3,6 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
  output: 'export',
  images: { unoptimized: true },
+  trailingSlash: true,
 };

 export default nextConfig;
@@ -14,8 +14,10 @@
        "axios": "^1.12.2",
        "clsx": "^2.1.1",
        "formik": "^2.4.6",
+        "jspdf": "^3.0.4",
+        "jspdf-autotable": "^5.0.2",
        "moment": "^2.30.1",
-        "next": "15.5.3",
+        "next": "15.5.9",
        "react": "19.1.0",
        "react-day-picker": "^9.11.1",
        "react-dom": "19.1.0",
@@ -26,6 +28,7 @@
        "swr": "^2.3.6",
        "tailwind-merge": "^3.3.1",
        "use-debounce": "^10.0.6",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
        "yup": "^1.7.0",
        "zustand": "^5.0.8"
      },
@@ -36,9 +39,9 @@
        "@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",
@@ -1082,15 +1085,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.9",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
+      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
      "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": {
@@ -1098,9 +1101,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"
      ],
@@ -1114,9 +1117,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"
      ],
@@ -1130,9 +1133,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"
      ],
@@ -1146,9 +1149,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"
      ],
@@ -1162,9 +1165,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"
      ],
@@ -1178,9 +1181,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"
      ],
@@ -1194,9 +1197,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"
      ],
@@ -1210,9 +1213,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"
      ],
@@ -1844,17 +1847,31 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
    "node_modules/@types/parse-json": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
      "license": "MIT"
    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/react": {
      "version": "19.2.2",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -1878,6 +1895,13 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.46.2",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
@@ -1924,6 +1948,7 @@
      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.2",
        "@typescript-eslint/types": "8.46.2",
@@ -2447,6 +2472,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2775,6 +2801,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2924,6 +2960,26 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3019,6 +3075,18 @@
      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
      "license": "MIT"
    },
+    "node_modules/core-js": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/cosmiconfig": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3056,16 +3124,27 @@
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
      "license": "MIT"
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "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": {
@@ -3275,6 +3354,16 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3516,6 +3605,7 @@
      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3571,13 +3661,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",
@@ -3689,6 +3779,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -3994,6 +4085,23 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fast-png/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/fastq": {
      "version": "1.19.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -4004,6 +4112,12 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/file-entry-cache": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4491,6 +4605,20 @@
      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
      "license": "ISC"
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/husky": {
      "version": "9.1.7",
      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -4570,6 +4698,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5105,6 +5239,33 @@
        "json5": "lib/cli.js"
      }
    },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5654,12 +5815,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.9",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
+      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
      "license": "MIT",
      "dependencies": {
-        "@next/env": "15.5.3",
+        "@next/env": "15.5.9",
        "@swc/helpers": "0.5.15",
        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
@@ -5672,14 +5833,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": {
@@ -6009,6 +6170,13 @@
        "node": ">=8"
      }
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -6162,11 +6330,22 @@
      ],
      "license": "MIT"
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "node_modules/react": {
      "version": "19.1.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -6197,6 +6376,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.26.0"
      },
@@ -6320,6 +6500,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -6412,6 +6599,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6761,6 +6958,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6980,6 +7187,16 @@
      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
      "license": "ISC"
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/swr": {
      "version": "2.3.6",
      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
@@ -7024,6 +7241,16 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/tiny-case": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -7083,6 +7310,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -7250,6 +7478,7 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -7396,6 +7625,16 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "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",
@@ -7525,6 +7764,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/xlsx": {
+      "version": "0.20.3",
+      "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+      "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/yaml": {
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -17,8 +17,10 @@
    "axios": "^1.12.2",
    "clsx": "^2.1.1",
    "formik": "^2.4.6",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
    "moment": "^2.30.1",
-    "next": "15.5.3",
+    "next": "15.5.9",
    "react": "19.1.0",
    "react-day-picker": "^9.11.1",
    "react-dom": "19.1.0",
@@ -29,6 +31,7 @@
    "swr": "^2.3.6",
    "tailwind-merge": "^3.3.1",
    "use-debounce": "^10.0.6",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
    "yup": "^1.7.0",
    "zustand": "^5.0.8"
  },
@@ -39,9 +42,9 @@
    "@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",
@@ -0,0 +1,69 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ClosingDetailPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const closingId = searchParams.get('closingId');
+
+  const { data: closing, isLoading: isLoadingClosing } = useSWR(
+    closingId,
+    (id: number) => ClosingApi.getGeneralInfo(id)
+  );
+
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+    closingId ? `sales-${closingId}` : null,
+    () => ClosingApi.getPenjualan(Number(closingId))
+  );
+
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
+  if (!closingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingClosing && (!closing || isResponseError(closing))) {
+    router.replace('/404');
+    return;
+  }
+
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+
+      {!isLoading && isResponseSuccess(closing) && (
+        <ClosingDetail
+          id={Number(closingId)}
+          initialValue={closing.data}
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default ClosingDetailPage;
@@ -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;
@@ -34,13 +34,15 @@ const ExpenseEditPage = () => {
    return;
  }

-  const isExpenseRejectedOrApproved =
+  const isExpenseCanBeEdited =
    !isLoadingExpense &&
    isResponseSuccess(expense) &&
-    (expense.data.approval.action === 'REJECTED' ||
-      expense.data.approval.step_number === 5);
+    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 (isExpenseRejectedOrApproved) {
+  if (!isLoadingExpense && !isExpenseCanBeEdited) {
    router.back();
    return;
  }
@@ -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;
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -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;
@@ -7,26 +7,39 @@
  default: false;
  prefersdark: false;
  color-scheme: 'light';
-  --color-base-100: oklch(98% 0.001 106.423);
-  --color-base-200: oklch(97% 0.001 106.424);
-  --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);
+
+  /* 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;
@@ -43,6 +56,12 @@

@theme {
  --font-inter: var(--font-inter);
+
+  --container-sm: 40rem;
+  --container-md: 48rem;
+  --container-lg: 64rem;
+  --container-xl: 80rem;
+  --container-2xl: 96rem;
 }

 html {
@@ -12,8 +12,6 @@ const DetailInventoryAdjustment = () => {

  // Ambil data dari router state
  useEffect(() => {
-    console.log('Router State');
-    console.log(window.history.state);
    const state = window.history.state?.usr as
      | { inventoryAdjustment?: InventoryAdjustment }
      | undefined;
@@ -26,9 +24,6 @@ const DetailInventoryAdjustment = () => {

  const finalData = inventoryAdjustment;

-  console.log('Final Data');
-  console.log(finalData);
-
  if (!finalData) {
    return (
      <div className='w-full flex flex-row justify-center items-center p-4'>
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -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;
@@ -0,0 +1,11 @@
+import InventoryProductTable from '@/components/pages/inventory/product/InventoryProductTable';
+
+const InventoryProductPage = () => {
+  return (
+    <div className='size-full'>
+      <InventoryProductTable />
+    </div>
+  );
+};
+
+export default InventoryProductPage;
@@ -7,4 +7,5 @@ const Marketing = () => {
    </div>
  );
 };
+
 export default Marketing;
@@ -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...</>;
 }
@@ -1,10 +1,18 @@
 'use client';

 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import React, { useImperativeHandle } from 'react';
+import toast from 'react-hot-toast';

 const AddProjectFlock = () => {
+  // useImperativeHandle(ref, () => ({
+  //   validate() {
+  //     toast.success('Validating');
+  //     return false;
+  //   },
+  // }));
  return (
-    <section className='w-full p-4 flex flex-row justify-center'>
+    <section className='w-full flex flex-row justify-center'>
      <ProjectFlockForm formType='add' />
    </section>
  );
@@ -44,7 +44,7 @@ export default function AddChickinKandang() {

  return (
    <>
-      <section className='w-full p-4'>
+      <section className='size-full'>
        {isLoading && <span className='loading loading-spinner loading-xl' />}
        {!isLoading &&
          isResponseSuccess(projectFlockKandang) &&
@@ -10,7 +10,7 @@ const AddChickin = () => {

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

 const Chickin = () => {
  return (
-    <section className='w-full p-4'>
+    <section className='w-full'>
      <ChickinTable />
    </section>
  );
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -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;
@@ -37,7 +37,7 @@ const ProjectFlockEdit = () => {
  }

  return (
-    <div className='w-full p-4 flex flex-col justify-center'>
+    <div className='w-full flex flex-col justify-center'>
      {isLoadingProjectFlock && (
        <span className='loading loading-spinner loading-xl' />
      )}
@@ -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/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';

-const ProjectFlockDetail = () => {
+const ProjectFlockDetailPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@@ -37,19 +38,17 @@ const ProjectFlockDetail = () => {
  }

  return (
-    <div className='w-full p-4 flex flex-col justify-center'>
+    <div className='w-full h-full flex flex-col justify-center'>
      {isLoadingProjectFlock && (
        <span className='loading loading-spinner loading-xl' />
      )}
      {isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm
-          formType='detail'
-          initialValues={projectFlock.data}
-          refreshProjectFlocks={refreshProjectFlock}
-        />
+        <ProjectFlockDetail projectFlock={projectFlock.data} />
      )}
    </div>
  );
 };

-export default ProjectFlockDetail;
+export default ProjectFlockDetailPage;
+ProjectFlockDetail;
+ProjectFlockDetail;
@@ -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>}
+      />
+    </>
+  );
+}
@@ -2,7 +2,7 @@ import ProjectFlockTable from '@/components/pages/production/project-flock/Proje

 const ProjectFlock = () => {
  return (
-    <section className='w-full p-4'>
+    <section className='size-full p-4'>
      <ProjectFlockTable />
    </section>
  );
@@ -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) {
@@ -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) {
@@ -1,49 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const AddGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const recordingId = searchParams.get('recording_id');
-
-  const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingId && recordingId !== 'new' ? [recordingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (
-    recordingId &&
-    recordingId !== 'new' &&
-    !isLoadingRecording &&
-    (!recording || !isResponseSuccess(recording))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {recordingId && recordingId !== 'new' && isLoadingRecording && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {(!recordingId ||
-        recordingId === 'new' ||
-        (!isLoadingRecording && recording && isResponseSuccess(recording))) && (
-        <GradingForm
-          type='add'
-          initialValues={
-            isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-export default AddGrading;
@@ -1,53 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const EditGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const recordingId = searchParams.get('recordingId');
-  const gradingId = searchParams.get('gradingId');
-
-  const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingId ? [recordingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (!recordingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingRecording && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingRecording && recording && isResponseSuccess(recording) && (
-        <GradingForm
-          type='edit'
-          initialValues={recording.data.eggs?.find(
-            (egg) => egg.id === parseInt(gradingId || '0')
-          )}
-        />
-      )}
-    </div>
-  );
-};
-
-export default EditGrading;
@@ -1,52 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const DetailGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const gradingId = searchParams.get('gradingId');
-
-  const { data: grading, isLoading: isLoadingGrading } = useSWR(
-    gradingId ? [gradingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (!gradingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingGrading && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingGrading && grading && isResponseSuccess(grading) && (
-        <GradingForm
-          type='detail'
-          initialValues={grading.data.eggs?.find(
-            (egg) => egg.id === parseInt(gradingId)
-          )}
-        />
-      )}
-    </div>
-  );
-};
-
-export default DetailGrading;
@@ -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;
@@ -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;
@@ -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;
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -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;
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;
@@ -0,0 +1,13 @@
+'use client';
+
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+
+const ReportExpense = () => {
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable />
+    </div>
+  );
+};
+
+export default ReportExpense;
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -0,0 +1,7 @@
+import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
+
+const LogisticStock = () => {
+  return <LogisticStockTabs />;
+};
+
+export default LogisticStock;
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
@@ -0,0 +1,11 @@
+import MarketingReportContent from '@/components/pages/report/MarketingReportContent';
+
+const MarketingReportPage = () => {
+  return (
+    <section className='w-full p-4'>
+      <MarketingReportContent />
+    </section>
+  );
+};
+
+export default MarketingReportPage;
@@ -1,9 +1,11 @@
 'use client';

-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, useState } from 'react';

 import { cn } from '@/lib/helper';
 import Image from 'next/image';
+import Collapse from '@/components/Collapse';
+import { Icon } from '@iconify/react';

 export interface CardProps
  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
@@ -11,8 +13,13 @@ export interface CardProps
  subtitle?: string;
  image?: string;
  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
  actions?: ReactNode;
  footer?: ReactNode;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
  className?: {
    wrapper?: string;
    image?: string;
@@ -21,6 +28,7 @@ export interface CardProps
    subtitle?: string;
    actions?: string;
    footer?: string;
+    collapsible?: string;
  };
  variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
  size?: 'sm' | 'md' | 'lg';
@@ -31,14 +39,27 @@ const Card = ({
  subtitle,
  image,
  imageAlt,
+  imageWidth,
+  imageHeight,
  actions,
  footer,
+  collapsible,
+  defaultCollapsed = false,
+  onCollapsedChange,
  className,
  variant = 'default',
  size = 'md',
  children,
  ...props
 }: CardProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const handleCollapsedChange = (open: boolean) => {
+    const collapsed = !open;
+    setIsCollapsed(collapsed);
+    onCollapsedChange?.(collapsed);
+  };
+
  const getCardClasses = () => {
    const baseClasses = 'card bg-base-100';

@@ -64,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 = () => {
@@ -103,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>
-          <Image
-            src={image}
-            alt={imageAlt || title || 'Card image'}
-            className={getImageClasses()}
-          />
-        </figure>
-        <div className={getBodyClasses()}>
-          {title && <h2 className={getTitleClasses()}>{title}</h2>}
-          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
-          {children}
-          {actions && <div className={getActionsClasses()}>{actions}</div>}
-        </div>
-        {footer && <div className={getFooterClasses()}>{footer}</div>}
+        {renderCardContent()}
      </div>
    );
  }

  return (
    <div className={getCardClasses()} {...props}>
-      {image && (
-        <figure>
-          <Image
-            src={image}
-            alt={imageAlt || title || 'Card image'}
-            className={getImageClasses()}
-          />
-        </figure>
-      )}
-      <div className={getBodyClasses()}>
-        {title && <h2 className={getTitleClasses()}>{title}</h2>}
-        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
-        {children}
-        {actions && <div className={getActionsClasses()}>{actions}</div>}
-      </div>
-      {footer && <div className={getFooterClasses()}>{footer}</div>}
+      {renderCardContent()}
    </div>
  );
 };
@@ -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
  );

@@ -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>
@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
@@ -0,0 +1,143 @@
+'use client';
+
+import Button from '@/components/Button';
+import Tooltip from '@/components/Tooltip';
+import { cn } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+
+type FloatingActionsButtonProps = {
+  actions: {
+    action: 'DETAIL' | 'EDIT' | 'DELETE';
+    icon: string;
+    label?: string;
+    onClick?: () => void;
+    hidden?: boolean;
+    disabled?: boolean;
+  }[];
+  approvals: {
+    action: 'APPROVED' | 'REJECTED';
+    icon: string;
+    label?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+  }[];
+  selectedRowIds: number[];
+  onClose: () => void;
+};
+
+const FloatingActionsButton = ({
+  actions,
+  approvals,
+  selectedRowIds,
+  onClose,
+}: FloatingActionsButtonProps) => {
+  // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
+  const positionStyles =
+    selectedRowIds.length > 0
+      ? 'bottom-[10%] opacity-100'
+      : 'bottom-[-10%] opacity-0';
+
+  // Helper untuk menentukan gaya warna tombol approval
+  const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
+    if (action === 'APPROVED') return 'success';
+    if (action === 'REJECTED') return 'error';
+    return 'primary';
+  };
+
+  const getActionColor = (action: 'DETAIL' | 'EDIT' | 'DELETE') => {
+    if (action === 'DETAIL') return 'white';
+    if (action === 'EDIT') return 'warning';
+    if (action === 'DELETE') return 'error';
+    return 'primary';
+  };
+
+  return (
+    // Container utama FAB
+    <div
+      className={cn(
+        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
+        'bg-slate-950 backdrop-blur-md'
+      )}
+    >
+      <div className='flex flex-col gap-3'>
+        {/* === BARIS ATAS: Status Seleksi dan Actions (Termasuk Close) === */}
+        <div className='flex justify-between items-center text-white'>
+          <h4 className='text-base font-semibold'>
+            {selectedRowIds.length} Selected
+          </h4>
+
+          <div className='flex flex-row gap-1 items-stretch'>
+            <div className='flex gap-4 items-center'>
+              {/* Render Aksi dari props.actions */}
+              {actions
+                .filter((action) => !action.hidden)
+                .map((action, index) => {
+                  return (
+                    <Button
+                      key={index}
+                      onClick={action.onClick}
+                      className='text-white hover:text-gray-400 tooltip tooltip-bottom p-0'
+                      variant='link'
+                      disabled={action.disabled}
+                    >
+                      <Tooltip content={action.label || action.action}>
+                        <Icon
+                          icon={action.icon}
+                          width={20}
+                          height={20}
+                          className={`text-${getActionColor(action.action)} font-thin`}
+                        />
+                      </Tooltip>
+                    </Button>
+                  );
+                })}
+
+              <div className='border-[0.5px] border-white/30 h-full'></div>
+
+              {/* Tombol Close */}
+              <Button
+                onClick={onClose}
+                className='text-white hover:text-gray-400 p-0'
+                variant='link'
+              >
+                <Tooltip content='Close'>
+                  <Icon icon='mdi:close' width={20} height={20} />
+                </Tooltip>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
+        <div className={`grid grid-cols-${approvals.length} gap-3`}>
+          {approvals.map((approval, index) => (
+            <Button
+              key={index}
+              onClick={approval.onClick}
+              className={cn(
+                'btn btn-lg w-full',
+                'bg-white/20 border-white/30',
+                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                approval.disabled
+                  ? 'cursor-not-allowed'
+                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
+              )}
+              disabled={approval.disabled}
+            >
+              <Icon
+                icon={approval.icon}
+                width={20}
+                height={20}
+                className={`text-${getApprovalColor(approval.action)}`}
+              />
+              {approval.label || approval.action}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FloatingActionsButton;
@@ -1,161 +1,24 @@
 '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 PermissionNotFound from '@/components/helper/PermissionNotFound';

 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';
+import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+import { useAuth } from '@/services/hooks/useAuth';

 const MainDrawerContent = () => {
+  const pathname = usePathname();
  const { setMainDrawerOpen } = useUiStore();

  const closeMainDrawerHandler = () => {
@@ -191,7 +54,7 @@ const MainDrawerContent = () => {
        </div>
      </div>

-      <MainDrawerMenu />
+      <SidebarMenu menu={MAIN_DRAWER_LINKS} activeLink={pathname} />
    </div>
  );
 };
@@ -202,6 +65,11 @@ const MainDrawer = ({
 }>) => {
  const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
  const pathname = usePathname();
+  const { permissionCheck } = useAuth();
+
+  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+    permissionCheck(permission)
+  );

  const getPageTitle = useCallback(() => {
    let title = '';
@@ -216,9 +84,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;
@@ -241,6 +109,10 @@ const MainDrawer = ({
    setMainDrawerOpen(!mainDrawerOpen);
  };

+  if (!isPermitted) {
+    return <PermissionNotFound />;
+  }
+
  return (
    <Drawer
      open={mainDrawerOpen}
@@ -10,15 +10,19 @@ import {
 } 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;
-    ref.current.show();
+    if (isNestingModal) {
+      ref.current.showModal();
+    } else {
+      ref.current.show();
+    }
    setOpen(true);
-  }, []);
+  }, [isNestingModal]);

  const closeModal = useCallback(() => {
    if (!ref.current) return;
@@ -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';
+
+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,24 @@ 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
+          align='end'
+          direction='bottom'
+          trigger={
+            <div className='btn btn-ghost btn-circle avatar'>
+              <div className='w-10 rounded-full border flex justify-center items-center'>
+                <Icon icon='uil:user' width={40} height={40} />
+              </div>
            </div>
-          </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='#' />
+          }
+          className={{
+            content: 'w-52 mt-3',
+          }}
+        >
+          <Menu>
+            <MenuItem title='Logout' onClick={logoutClickHandler} />
          </Menu>
-        </div>
+        </Dropdown>
      </div>
    </div>
  );
@@ -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>
  );
@@ -14,6 +14,7 @@ import {
  SortingState,
  OnChangeFn,
  Row,
+  HeaderContext,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -31,6 +32,9 @@ interface TableClassNames {
  tableBodyClassName?: string;
  bodyRowClassName?: string;
  bodyColumnClassName?: string;
+  tableFooterClassName?: string;
+  footerRowClassName?: string;
+  footerColumnClassName?: string;
  paginationClassName?: string;
 }

@@ -38,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;
@@ -52,6 +57,15 @@ export interface TableProps<TData extends object> {
  rowSelection?: Record<string, boolean>;
  setRowSelection?: OnChangeFn<Record<string, boolean>>;
  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  renderFooter?: boolean;
+  withCheckbox?: boolean;
+  rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }

 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -64,28 +78,36 @@ 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,
@@ -93,12 +115,21 @@ const Table = <TData extends object>({
  rowSelection,
  setRowSelection,
  enableRowSelection,
+  renderFooter = false,
+  withCheckbox = false,
+  rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
 }: TableProps<TData>) => {
  const isServerSideTable =
    totalItems !== undefined &&
    page !== undefined &&
    onPageChange !== undefined;

+  const tableClassNames = {
+    ...TABLE_DEFAULT_STYLING,
+    ...className,
+  };
+
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: pageSize,
@@ -191,77 +222,148 @@ 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}>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={className.bodyRowClassName}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className={className.bodyColumnClassName}>
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+          <tbody className={tableClassNames.tableBodyClassName}>
+            {table.getRowModel().rows.map((row) => {
+              const customRowContent = renderCustomRow?.(row);

-                    {isLoading && <div className='skeleton w-full h-4' />}
+              if (customRowContent) {
+                return renderCustomRow?.(row);
+              }
+
+              return (
+                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={cn(
+                        { 'first:w-9 first:pr-0': withCheckbox },
+                        tableClassNames.bodyColumnClassName
+                      )}
+                    >
+                      {!isLoading &&
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+
+                      {isLoading && <div className='skeleton w-full h-4' />}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
+            {renderFooter && (
+              <tr className={cn(tableClassNames.footerRowClassName)}>
+                {table.getAllLeafColumns().map((column) => (
+                  <td
+                    key={column.id}
+                    className={cn(
+                      { 'first:w-9 first:pr-0': withCheckbox },
+                      tableClassNames.footerColumnClassName
+                    )}
+                  >
+                    {column.columnDef.footer &&
+                      flexRender(column.columnDef.footer, {
+                        column,
+                        header: column.columnDef,
+                        table,
+                      } as HeaderContext<TData, unknown>)}
                  </td>
                ))}
              </tr>
-            ))}
-          </tbody>
+            )}
+          </tfoot>
        </table>
      </div>

@@ -270,7 +372,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}
@@ -282,6 +384,8 @@ const Table = <TData extends object>({
            onPrevPage={prevPageClickHandler}
            onNextPage={nextPageClickHandler}
            onPageChange={pageChangeHandler}
+            rowOptions={rowOptions}
+            onRowChange={onPageSizeChange}
          />
        </div>
      )}
@@ -21,6 +21,7 @@ export interface TabsProps
  className?:
    | string
    | {
+        container?: string;
        wrapper?: string;
        tab?: string;
        content?: string;
@@ -53,10 +54,14 @@ const Tabs = ({
    onTabChange?.(tabId);
  };

-  const { wrapper: wrapperClassName, tab: tabClassName } =
-    typeof className === 'object'
-      ? className
-      : { wrapper: className, tab: undefined };
+  const {
+    container: containerClassName,
+    wrapper: wrapperClassName,
+    tab: tabClassName,
+    content: contentClassName,
+  } = typeof className === 'object'
+    ? className
+    : { wrapper: className, tab: undefined };

  const getTabsClasses = () => {
    const variantClasses: Record<string, string> = {
@@ -104,7 +109,7 @@ const Tabs = ({
      {...props}
      className={cn(
        'w-full',
-        typeof className === 'string' ? className : undefined
+        typeof className === 'string' ? className : containerClassName
      )}
    >
      <div role='tablist' className={getTabsClasses()}>
@@ -121,7 +126,9 @@ const Tabs = ({
        ))}
      </div>

-      {activeContent && <div className='mt-4'>{activeContent}</div>}
+      {activeContent && (
+        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
+      )}
    </div>
  );
 };
@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+  return (
+    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <p className='text-gray-600 text-center'>
+        You do not have permission to access this page.
+      </p>
+    </div>
+  );
+};
+
+export default PermissionNotFound;
@@ -1,197 +1,90 @@
 '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/sso/userinfo',
-      httpClientFetcher,
-      {
-        shouldRetryOnError: false,
-        revalidateOnFocus: false,
-        revalidateOnReconnect: false,
-        refreshInterval: 0,
-      }
-    );
+  const {
+    data: userResponse,
+    isLoading: isLoadingUserResponse,
+    error: userErrorResponse,
+  } = useSWR<
+    GetMeResponse & { ok?: boolean },
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >('/sso/userinfo', httpClientFetcher, {
+    shouldRetryOnError: false,

-  useEffect(() => {
-    setIsLoadingUser(isLoadingUserResponse);
-  }, [isLoadingUserResponse, setIsLoadingUser]);
+    // refresh every 13 minutes
+    refreshInterval: 13 * 60 * 1000,
+  });

  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;
@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+  children: React.ReactNode;
+  permissions: string | string[];
+}
+
+const RequirePermission = ({
+  children,
+  permissions,
+}: RequirePermissionProps) => {
+  const { permissionCheck } = useAuth();
+
+  const isPermitted =
+    typeof permissions === 'string'
+      ? permissionCheck(permissions)
+      : permissions.some((permission) => permissionCheck(permission));
+
+  if (!isPermitted) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequirePermission;
@@ -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;
@@ -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,
@@ -7,11 +7,11 @@ import {
  useState,
 } from 'react';
 import { cn, formatDate } from '@/lib/helper';
-import Modal, { useModal } from '@/components/Modal';
 import { DateRange, DayPicker, Matcher } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
+import Modal, { useModal } from '@/components/Modal';
+import Button from '@/components/Button';

 export interface DateInputProps {
  label?: string;
@@ -34,6 +34,7 @@ export interface DateInputProps {
  required?: boolean;
  isLoading?: boolean;
  isRange?: boolean;
+  isNestedModal?: boolean; // New prop to indicate if used inside another modal
  errorMessage?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  onBlur?: FocusEventHandler<HTMLInputElement>;
@@ -58,6 +59,7 @@ const DateInput = ({
  readOnly = false,
  isLoading = false,
  isRange = false,
+  isNestedModal = false,
 }: DateInputProps) => {
  const [internalError, setInternalError] = useState<string | null>(null);
  const [selected, setSelected] = useState<Date | undefined>();
@@ -74,7 +76,7 @@ const DateInput = ({
    ? new Date(max.split('/').reverse().join('-'))
    : undefined;

-  const calendarModal = useModal();
+  const calendarModal = useModal(isNestedModal);

  // --- Sync value props ---
  useEffect(() => {
@@ -264,7 +266,7 @@ const DateInput = ({
        ref={calendarModal.ref}
        className={{
          modal: 'rounded',
-          modalBox: `w-fit min-h-${isRange ? '124' : '110'} flex flex-col`,
+          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
        }}
        closeOnBackdrop
      >
@@ -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;
@@ -24,6 +24,11 @@ const DebouncedTextInput = (props: DebouncedTextInputProps) => {
    setInternalChangeEvent(e);
  };

+  // Sync internal value with external value prop changes (e.g., from reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
  useEffect(() => {
    if (debouncedChangeEvent) {
      onChange?.(debouncedChangeEvent);
@@ -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>
+  );
+};
@@ -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;
@@ -8,6 +8,7 @@ interface MenuItemProps {
  href?: string;
  icon?: string;
  active?: boolean;
+  isLoading?: boolean;
  onClick?: () => void;
  className?: string;
 }
@@ -17,6 +18,7 @@ const MenuItem = ({
  href,
  icon,
  active = false,
+  isLoading = false,
  className,
  onClick,
 }: MenuItemProps) => {
@@ -50,17 +52,28 @@ const MenuItem = ({

  return (
    <li>
-      {href && (
+      {!isLoading && href && (
        <Link href={href} className={menuItemBaseClassName}>
          {menuItemContent}
        </Link>
      )}

-      {!href && (
+      {!isLoading && !href && (
        <button className={menuItemBaseClassName} onClick={onClick}>
          {menuItemContent}
        </button>
      )}
+
+      {isLoading && (
+        <button className={menuItemBaseClassName}>
+          <span
+            className={cn('loading loading-dots loading-md mx-auto', {
+              'text-gray-400': !active,
+              'text-black': active,
+            })}
+          />
+        </button>
+      )}
    </li>
  );
 };
@@ -0,0 +1,105 @@
+import Link from 'next/link';
+import Menu from '@/components/menu/Menu';
+import { Icon } from '@iconify/react';
+import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
+
+export interface SidebarMenuItem {
+  type?: 'item' | 'title';
+  text: string;
+  link: string;
+  icon?: string;
+  submenu?: SidebarMenuItem[];
+  permission?: string[];
+}
+
+interface SidebarMenuItemProps {
+  item: SidebarMenuItem;
+  activeLink: string;
+}
+
+interface SidebarMenuProps {
+  menu: SidebarMenuItem[];
+  activeLink: string;
+}
+
+const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
+  const isItemActive = isPathActive(activeLink, item.link);
+
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
+  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) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
+    </Menu>
+  );
+};
+
+export default SidebarMenu;
@@ -18,6 +18,7 @@ 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;
@@ -65,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
                position='right'
                className={{
                  wrapper: 'md:tooltip-bottom',
+                  content: 'p-0 rounded overflow-hidden',
                }}
                content={
                  <>
                    {approval.logs && approval.logs.length > 0 && (
-                      <div className='flex flex-col gap-2'>
-                        {approval.logs?.map((approvalLog, logIdx) => (
-                          <div
-                            key={logIdx}
-                            className='flex flex-col text-base text-start'
-                          >
-                            {approvalLog.date && (
-                              <span>
-                                {formatDate(
-                                  approvalLog.date,
-                                  'YYYY-MM-DD, HH:mm:ss'
-                                )}
-                              </span>
-                            )}
-                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
-                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
-                          </div>
-                        ))}
+                      <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>
                    )}
                  </>
@@ -116,31 +144,45 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {

 export const formatGroupedApprovalsToApprovalSteps = (
  approvalLine: ApprovalLine,
-  groupedApprovals: BaseGroupedApproval[],
-  latestApproval: BaseApproval
+  groupedApprovals: BaseGroupedApproval[] | undefined,
+  latestApproval: BaseApproval | undefined
 ): ApprovalStepsProps['approvals'] => {
  const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
    approvalLine.map((approvalLineItem) => {
-      const approvalGroup = groupedApprovals.find(
+      const approvalGroup = groupedApprovals?.find(
        (approvalGroupItem) =>
          approvalGroupItem.step_number === approvalLineItem.step_number
      );

      const currentStepNumber = approvalLineItem.step_number;
      const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1]?.step_number;
+        groupedApprovals?.[groupedApprovals.length - 1]?.step_number;

-      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
-        throw new Error(
-          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
-        );
+      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) {
-        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+        // Check if this step is waiting (only if we have latestApproval)
+        const isWaiting =
+          latestApproval?.step_number !== undefined &&
+          currentStepNumber === latestApproval.step_number + 1;
+
+        // Check if previous approval was rejected
        const isPreviousApprovalRejected =
-          groupedApprovals[groupedApprovals.length - 1].approvals[0].action ===
-          'REJECTED';
+          groupedApprovals &&
+          groupedApprovals.length > 0 &&
+          groupedApprovals[groupedApprovals.length - 1]?.approvals?.[0]
+            ?.action === 'REJECTED';

        return {
          name: approvalLineItem.step_name,
@@ -154,7 +196,11 @@ export const formatGroupedApprovalsToApprovalSteps = (

      let approvalStatus: ApprovalStepStatus = 'IDLE';

-      if (approvalGroup.step_number <= latestApproval.step_number) {
+      // 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':
@@ -172,7 +218,11 @@ export const formatGroupedApprovalsToApprovalSteps = (
              break;
          }
        }
-      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+      } else if (
+        latestApproval?.step_number !== undefined &&
+        approvalGroup.step_number === latestApproval.step_number + 1 &&
+        !isLatestApprovalRejected
+      ) {
        approvalStatus = 'WAITING';
      } else {
        approvalStatus = 'IDLE';
@@ -183,6 +233,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
            action_by: approval.action_by.name,
            date: approval.action_at,
            notes: approval.notes,
+            action: approval.action,
          }))
        : [];

@@ -319,14 +370,33 @@ const useApprovalSteps = ({

  // Formatting Akhir
  const approvals = useMemo(() => {
-    if (isLoading || !approvalLines.length || !latestApproval) {
+    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,
-        latestApproval
+        effectiveLatestApproval
      );
    } catch (error) {
      console.warn('Gagal memformat approval steps:', error);
@@ -0,0 +1,112 @@
+'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 ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
+import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
+
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+  ClosingHppExpedition,
+} from '@/types/api/closing';
+import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
+import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
+import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
+
+interface ClosingDetailProps {
+  id: number;
+  initialValue?: ClosingGeneralInformation;
+  salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
+}
+
+const ClosingDetail: React.FC<ClosingDetailProps> = ({
+  id,
+  initialValue,
+  salesData,
+  hppExpeditionData,
+}) => {
+  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: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
+      },
+      {
+        id: 'dataProduksi',
+        label: 'Data Produksi',
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'keuangan',
+        label: 'Keuangan',
+        content: <ClosingFinanceTabContent projectFlockId={id} />,
+      },
+    ];
+
+    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;
@@ -0,0 +1,17 @@
+import ClosingFinanceTable from '@/components/pages/closing/ClosingFinanceTable';
+
+const ClosingFinanceTabContent = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <ClosingFinanceTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default ClosingFinanceTabContent;
@@ -0,0 +1,495 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import {
+  DataSummarySubTotal,
+  HppPurchaseData,
+  ProfitLossDataAmount,
+} from '@/types/api/closing';
+import useSWR from 'swr';
+
+type HppTableRow =
+  | (HppPurchaseData & {
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      budgeting?: never;
+      realization?: never;
+    };
+
+type ProfitLossTableRow =
+  | (DataSummarySubTotal & {
+      type: string;
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      rp_per_bird?: never;
+      rp_per_kg?: never;
+      amount?: never;
+    };
+
+const ClosingFinanceTable = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  const { data: finance, isLoading } = useSWR(
+    `/closing/finance/${projectFlockId}`,
+    () => ClosingApi.getFinance(projectFlockId)
+  );
+
+  const hppTableData: HppTableRow[] = isResponseSuccess(finance)
+    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
+        // Group header row
+        {
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          isGroupHeader: true as const,
+        },
+        // Data rows
+        ...hpp.data.map((item) => ({
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          type: item.type,
+          budgeting: item.budgeting,
+          realization: item.realization,
+          isGroupHeader: false as const,
+        })),
+      ])
+    : [];
+
+  const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
+    ? [
+        // Pembelian group
+        ...finance.data.profit_loss.data.pembelian.map((item) => ({
+          label: 'Pembelian',
+          group_name: 'Pembelian',
+          group_index: 1,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.gross_profit.label,
+          group_name: 'Penjualan',
+          group_index: 0,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.gross_profit.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
+          rp_per_kg:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
+        },
+        // Penjualan group
+        ...finance.data.profit_loss.data.penjualan.map((item) => ({
+          label: 'Penjualan',
+          group_name: 'Penjualan',
+          group_index: 0,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.sub_total.label,
+          group_name: 'Pembelian',
+          group_index: 1,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.sub_total.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.sub_total.rp_per_bird,
+          rp_per_kg: finance.data.profit_loss.data.summary.sub_total.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.sub_total.amount,
+        },
+      ]
+    : [];
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-6'>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.gross_profit
+                        .label || '-'
+                    )
+                  : 'Laba Rugi Brutto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.gross_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.net_profit.label ||
+                        '-'
+                    )
+                  : 'Laba Rugi Netto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.net_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.hpp_purchases.title
+              : 'HPP Purchases'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<HppTableRow>
+              data={hppTableData}
+              columns={[
+                {
+                  header: 'No.',
+                  enableSorting: false,
+                  accessorFn: (item, index) => {
+                    if (item.isGroupHeader) return '-';
+                    const dataRowsBefore = hppTableData
+                      .slice(0, index)
+                      .filter((row) => !row.isGroupHeader).length;
+                    return dataRowsBefore + 1;
+                  },
+                  footer: (props) => {
+                    return 'HPP';
+                  },
+                },
+                {
+                  header: 'Type',
+                  enableSorting: false,
+                  accessorFn: (item) => formatTitleCase(item.type || '-'),
+                },
+                {
+                  header: 'Budgeting',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'budgeting_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'budgeting_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'budgeting_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+                {
+                  header: 'Realization',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'realization_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'realization_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'realization_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      ></td>
+                      <td
+                        colSpan={7}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.profit_loss.title
+              : 'Profit/Loss'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<ProfitLossTableRow>
+              data={profitLossTableData}
+              columns={[
+                {
+                  header: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => item.type,
+                  cell: (item) => (
+                    <div className=''>
+                      {formatTitleCase(item.row.original.type || '-')}
+                    </div>
+                  ),
+                  footer: (item) => (
+                    <div className='font-bold uppercase'>
+                      {isResponseSuccess(finance)
+                        ? formatTitleCase(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .label || '-'
+                          )
+                        : '-'}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Ekor',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_bird || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Kg',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_kg || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Jumlah (Rp)',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.amount || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .amount || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  if (rowData.amount) {
+                    return (
+                      <tr
+                        key={row.id}
+                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
+                      >
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold ps-6 uppercase'>
+                            {formatTitleCase(rowData.label ?? '-')}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_bird ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_kg ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.amount ?? 0)}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  }
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        colSpan={4}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              className={{
+                paginationClassName: 'hidden',
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+      </>
+    </div>
+  );
+};
+
+export default ClosingFinanceTable;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -0,0 +1,235 @@
+'use client';
+
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+
+interface ClosingProductionDataTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingProductionDataTabContent = ({
+  projectFlockId,
+}: ClosingProductionDataTabContentProps) => {
+  const { data: productionData, isLoading } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
+    () => ClosingApi.getProductionData(projectFlockId)
+  );
+
+  if (isLoading) {
+    return (
+      <div className='w-full flex justify-center py-8'>
+        <span className='loading loading-spinner loading-lg' />
+      </div>
+    );
+  }
+
+  if (!productionData || !isResponseSuccess(productionData)) {
+    return (
+      <div className='w-full text-center py-8 text-gray-500'>
+        Gagal memuat data produksi.
+      </div>
+    );
+  }
+
+  const { purchase, sales, performance } = productionData.data;
+
+  // Helper for consistent row styling
+  const DataRow = ({
+    label,
+    value,
+    unit = '',
+    valueClassName = 'font-bold text-gray-800',
+    unitClassName = 'text-gray-500 w-12 text-right',
+  }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    valueClassName?: string;
+    unitClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <span className={valueClassName}>{value}</span>
+        {unit && <span className={unitClassName}>{unit}</span>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className='w-full rounded-xl p-8 shadow-sm'>
+      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+        {/* Left Column */}
+        <div className='space-y-10'>
+          {/* Purchase Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Pembelian
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Populasi Awal'
+                value={formatNumber(purchase.initial_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Claim Culling'
+                value={formatNumber(purchase.claim_culling)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Populasi Akhir'
+                value={formatNumber(purchase.final_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Pakan Masuk'
+                value={formatNumber(purchase.feed_in)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai'
+                value={formatNumber(purchase.feed_used)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai per Ekor'
+                value={formatNumber(purchase.feed_used_per_head)}
+                unit='Kg'
+              />
+            </div>
+          </section>
+
+          {/* Sales Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Penjualan
+            </h3>
+            <div className='space-y-4'>
+              {/* Chicken Sales */}
+              <div className='space-y-1'>
+                <DataRow
+                  label='Penjualan (Ekor)'
+                  value={formatNumber(sales.chicken.sales_population)}
+                  unit='Ekor'
+                />
+                <DataRow
+                  label='Penjualan (Kg)'
+                  value={formatNumber(sales.chicken.sales_weight)}
+                  unit='Kg'
+                />
+                <DataRow
+                  label='Bobot Rata-Rata'
+                  value={formatNumber(sales.chicken.average_weight)}
+                  unit='Kg/Ekor'
+                />
+                <DataRow
+                  label='Harga Jual Rata-Rata'
+                  value={formatNumber(
+                    sales.chicken.chicken_average_selling_price
+                  )}
+                  unit='Rupiah'
+                />
+              </div>
+
+              {/* Egg Sales (if available) */}
+              {sales.egg && (
+                <>
+                  <div className='h-px bg-gray-100 my-2' />
+                  <div className='space-y-1'>
+                    <DataRow
+                      label='Telur (Butir)'
+                      value={formatNumber(sales.egg.egg_pieces)}
+                      unit='Butir'
+                    />
+                    <DataRow
+                      label='Telur (Kg)'
+                      value={formatNumber(sales.egg.egg_mass_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Berat Telur Rata-Rata'
+                      value={formatNumber(sales.egg.average_egg_weight_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Harga Jual Telur Rata-Rata'
+                      value={formatNumber(sales.egg.egg_average_selling_price)}
+                      unit='Rupiah'
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </section>
+        </div>
+
+        {/* Divider Line (Absolute centered) */}
+        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+
+        {/* Right Column */}
+        <div className='space-y-10 flex flex-col h-full'>
+          {/* Performance Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Performance
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Deplesi'
+                value={formatNumber(performance.depletion)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Umur'
+                value={formatNumber(performance.age_day)}
+                unit='Hari'
+              />
+              <DataRow
+                label='Mortalitas Std'
+                value={formatNumber(performance.mortality_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Mortalitas Act'
+                value={formatNumber(performance.mortality_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF Mortalitas'
+                value={formatNumber(performance.deff_mortality)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Std'
+                value={formatNumber(performance.fcr_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Act'
+                value={formatNumber(performance.fcr_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF FCR'
+                value={formatNumber(performance.deff_fcr)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='AWG'
+                value={formatNumber(performance.awg)}
+                unit='Gr/Hari'
+              />
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingProductionDataTabContent;
@@ -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;
@@ -0,0 +1,229 @@
+'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'>
+      <Card
+        title='DOC Broiler'
+        collapsible
+        defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.doc_broiler.rows ?? [])
+              : []
+          }
+          columns={docBroilerColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
+
+      <Card
+        title='OVK'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.ovk.rows ?? [])
+              : []
+          }
+          columns={ovkColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
+
+      <Card
+        title='Pakan'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.pakan.rows ?? [])
+              : []
+          }
+          columns={pakanColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
+    </div>
+  );
+};
+
+export default ClosingSapronakCalculationTable;
@@ -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;
@@ -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;
@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          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.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 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 HppExpeditionReportTable;
@@ -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;
@@ -1,157 +1,45 @@
 'use client';

-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
-import { useFormik } from 'formik';
+import { useMemo, useState } from 'react';

-import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
-import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
-import DropFileInput from '@/components/input/DropFileInput';
+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';
-import { formatCurrency, formatDate } from '@/lib/helper';
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { ACCEPTED_FILE_TYPE } from '@/config/constant';
-import {
-  UploadRequestDocumentsFormSchema,
-  UploadRequestDocumentsFormValues,
-} from '@/components/pages/expense/form/ExpenseRequestForm.schema';

 interface ExpenseDetailProps {
  initialValues?: Expense;
 }

 const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
-  const router = useRouter();
+  const [activeTab, setActiveTab] = useState<string>('request');

-  // Modal hooks
-  const deleteModal = useModal();
-  const approveModal = useModal();
-  const rejectModal = useModal();
+  const expenseDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'request',
+        label: 'Pengajuan',
+        content: <ExpenseRequestContent initialValues={initialValues} />,
+      },
+    ];

-  // Modal loading state
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isRejectLoading, setIsRejectLoading] = useState(false);
-
-  const isLatestApprovalRejectedOrDone =
-    initialValues?.approval &&
-    (initialValues.approval.action === 'REJECTED' ||
-      initialValues.approval.step_number === 5);
-
-  const formik = useFormik<UploadRequestDocumentsFormValues>({
-    initialValues: {
-      request_documents: [],
-    },
-    validationSchema: UploadRequestDocumentsFormSchema,
-    onSubmit: async (values) => {
-      const addRequestDocumentsRes = await ExpenseApi.uploadRequestDocuments(
-        initialValues?.id as number,
-        values.request_documents
-      );
-
-      if (isResponseSuccess(addRequestDocumentsRes)) {
-        toast.success(addRequestDocumentsRes.message);
-        window.location.reload();
-      } else {
-        toast.error(String(addRequestDocumentsRes?.message));
-      }
-    },
-  });
-
-  const deleteExpenseClickHandler = () => {
-    deleteModal.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 confirmationModalApproveClickHandler = async (notes: string) => {
-    setIsApproveLoading(true);
-
-    const approveResponse = await ExpenseApi.approve(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(approveResponse)) {
-      approveModal.closeModal();
-
-      toast.success('Berhasil approve pengajuan biaya operasional!');
-      router.push('/expense');
-    } else {
-      approveModal.closeModal();
-
-      toast.error('Gagal approve pengajuan biaya operasional!');
+    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} />,
+      });
    }

-    setIsApproveLoading(false);
-  };
-
-  const confirmationModalRejectClickHandler = async (notes: string) => {
-    setIsRejectLoading(true);
-
-    const rejectResponse = await ExpenseApi.reject(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(rejectResponse)) {
-      rejectModal.closeModal();
-
-      toast.success('Berhasil reject pengajuan biaya operasional!');
-      router.push('/expense');
-    } else {
-      rejectModal.closeModal();
-
-      toast.error('Gagal reject pengajuan biaya operasional!');
-    }
-
-    setIsRejectLoading(false);
-  };
-
-  const requestDocumentsChangeHandler = (val: File[]) => {
-    formik.setFieldTouched('request_documents', true);
-    formik.setFieldValue('request_documents', val);
-  };
-
-  const requestDocumentsDeleteHandler = (deletedFileIdx: number) => {
-    const newRequestDocuments = formik.values.request_documents;
-
-    newRequestDocuments?.splice(deletedFileIdx, 1);
-
-    formik.setFieldValue('request_documents', newRequestDocuments);
-  };
+    return validTabs;
+  }, [initialValues]);

  return (
    <>
@@ -171,335 +59,16 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
          </h1>
        </header>

-        <div className='w-full mt-4 flex flex-col gap-4'>
-          {/* TODO: apply RBAC */}
-          {!isLatestApprovalRejectedOrDone && (
-            <div className='w-full max-w-3xl mx-auto flex flex-row justify-end gap-2'>
-              <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>
-
-              <Button
-                type='button'
-                color='warning'
-                href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                className='px-4 ml-2'
-              >
-                <Icon icon='mdi:pencil-outline' width={24} height={24} />
-                Edit
-              </Button>
-
-              <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>
-            </div>
-          )}
-
-          {/* TODO: add and integrate ApprovalSteps component with API */}
-
-          <div className='overflow-x-auto w-full max-w-3xl mx-auto'>
-            <table className='table table-sm table-zebra'>
-              <tbody>
-                <tr>
-                  <th>Nomor PO</th>
-                  <th>:</th>
-                  <td>{initialValues?.po_number ?? '-'}</td>
-                </tr>
-                <tr>
-                  <th>Nomor Referensi</th>
-                  <th>:</th>
-                  <td>{initialValues?.reference_number}</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?.vendor.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?.nominal ?? 0)}</td>
-                </tr>
-                <tr>
-                  <th>Nominal Sudah Bayar</th>
-                  <th>:</th>
-                  <td>{formatCurrency(initialValues?.paid ?? 0)}</td>
-                </tr>
-                <tr>
-                  <th>Nominal Sisa Bayar</th>
-                  <th>:</th>
-                  <td>{formatCurrency(initialValues?.remaining_cost ?? 0)}</td>
-                </tr>
-                <tr>
-                  <th>Status Pencairan</th>
-                  <th>:</th>
-                  <td>
-                    <RealizationStatusBadge
-                      approval={initialValues?.approval}
-                    />
-                  </td>
-                </tr>
-                <tr>
-                  <th>Status Biaya</th>
-                  <th>:</th>
-                  <td>
-                    <ExpenseStatusBadge approval={initialValues?.approval} />
-                  </td>
-                </tr>
-                <tr>
-                  <th>Dokumen Pengajuan</th>
-                  <th>:</th>
-                  <td>
-                    <div>
-                      {initialValues?.request_documents.length === 0 && '-'}
-
-                      {initialValues?.request_documents &&
-                        initialValues?.request_documents.length > 0 && (
-                          <ul className='list-disc'>
-                            {initialValues?.request_documents.map(
-                              (requestDocument, requestDocumentIdx) => (
-                                <li key={requestDocumentIdx}>
-                                  <Link
-                                    href={requestDocument.url}
-                                    target='_blank'
-                                    rel='noopener noreferrer'
-                                    className='text-blue-500 underline'
-                                  >
-                                    {requestDocument.name}{' '}
-                                    <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='request_documents'
-                        values={formik.values.request_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.request_documents &&
-                        formik.values.request_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?.kandang_expenses.map(
-              (kandangExpense, kandangExpenseIdx) => {
-                let expenseGrandTotal = 0;
-
-                kandangExpense.expenses.forEach(
-                  (item) => (expenseGrandTotal += item.total_expense)
-                );
-
-                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.kandang.name}
-                          </th>
-                        </tr>
-                        <tr>
-                          <th>Nonstock</th>
-                          <th>Total Kuantitas</th>
-                          <th>Total Biaya</th>
-                          <th>Catatan</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {kandangExpense.expenses.map(
-                          (expenseItem, expenseIdx) => (
-                            <tr key={expenseIdx}>
-                              <td>{expenseItem.nonstock.name}</td>
-                              <td>{expenseItem.total_quantity}</td>
-                              <td>
-                                {formatCurrency(expenseItem.total_expense)}
-                              </td>
-                              <td className='w-xs'>
-                                {expenseItem.notes ?? '-'}
-                              </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>
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={expenseDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'max-w-5xl mx-auto mt-4',
+          }}
+        />
      </section>
-
-      <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?'
-        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,
-        }}
-      />
    </>
  );
 };
@@ -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;
@@ -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;
@@ -1,6 +1,6 @@
 'use client';

-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
  CellContext,
@@ -31,13 +31,14 @@ import DateInput from '@/components/input/DateInput';

 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
-import { cn, formatCurrency } from '@/lib/helper';
+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',
@@ -53,66 +54,57 @@ const RowOptionsMenu = ({
  deleteClickHandler: () => void;
 }) => {
  const showEditButton =
-    props.row.original.approval.action !== 'REJECTED' &&
-    props.row.original.approval.step_number !== 5 &&
-    props.row.original.approval.action !== 'APPROVED';
-
-  const showDeleteButton = 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 showApproveButton = showEditButton;
-  const showRejectButton = showEditButton;
+  const showRealizationButton =
+    props.row.original.latest_approval.action !== 'REJECTED' &&
+    props.row.original.latest_approval.step_number === 3;

  return (
    <RowOptionsMenuWrapper type={type}>
-      <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 && (
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
        <Button
-          href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+          href={`/expense/detail/?expenseId=${props.row.original.id}`}
          variant='ghost'
-          color='warning'
+          color='primary'
          className='justify-start text-sm'
        >
-          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-          Edit
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
        </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>
-      )}
+        {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>
+        )}

-      {showRejectButton && (
-        <Button
-          variant='ghost'
-          color='error'
-          onClick={rejectClickHandler}
-          className='justify-start text-sm'
-        >
-          <Icon icon='material-symbols:close' width={24} height={24} />
-          Reject
-        </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>
+        )}

-      {showDeleteButton && (
        <Button
          onClick={deleteClickHandler}
          variant='ghost'
@@ -127,7 +119,7 @@ const RowOptionsMenu = ({
          />
          Delete
        </Button>
-      )}
+      </div>
    </RowOptionsMenuWrapper>
  );
 };
@@ -178,6 +170,7 @@ const ExpensesTable = () => {
    undefined
  );
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isCompleteLoading, setIsCompleteLoading] = useState(false);
  const [isApproveLoading, setIsApproveLoading] = useState(false);
  const [isRejectLoading, setIsRejectLoading] = useState(false);

@@ -187,6 +180,57 @@ const ExpensesTable = () => {
    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',
@@ -202,7 +246,8 @@ const ExpensesTable = () => {
      ),
      cell: ({ row }) => {
        const isCheckboxDisabled =
-          !row.getCanSelect() || row.original.approval.action === 'REJECTED';
+          !row.getCanSelect() ||
+          row.original.latest_approval.action === 'REJECTED';

        return (
          <div>
@@ -220,59 +265,50 @@ const ExpensesTable = () => {
    {
      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.getValue() ?? '-',
+      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 ?? '-',
+      cell: (props) => props.row.original.location?.name ?? '-',
    },
    {
      accessorFn: (row) => row.created_user.name ?? '-',
      header: 'Nama Pengaju',
    },
    {
-      accessorFn: (row) => row.vendor.name ?? '-',
+      accessorFn: (row) => row.supplier.name ?? '-',
      header: 'Vendor',
    },
    {
-      accessorKey: 'nominal',
+      accessorKey: 'grand_total',
      header: 'Nominal',
      cell: (props) =>
-        props.row.original.nominal
-          ? `Rp${formatCurrency(props.row.original.nominal)}`
-          : '-',
-    },
-    {
-      accessorKey: 'paid',
-      header: 'Sudah Bayar',
-      cell: (props) =>
-        props.row.original.paid
-          ? `Rp${formatCurrency(props.row.original.paid)}`
-          : '-',
-    },
-    {
-      accessorKey: 'remaining_cost',
-      header: 'Sisa Bayar',
-      cell: (props) =>
-        props.row.original.remaining_cost
-          ? `Rp${formatCurrency(props.row.original.remaining_cost)}`
+        props.row.original.grand_total
+          ? formatCurrency(props.row.original.grand_total)
          : '-',
    },
    {
      header: 'Status Pencairan',
      cell: (props) => (
-        <RealizationStatusBadge approval={props.row.original.approval} />
+        <RealizationStatusBadge approval={props.row.original.latest_approval} />
      ),
    },
    {
      header: 'Status BOP',
      cell: (props) => (
-        <ExpenseStatusBadge approval={props.row.original.approval} />
+        <ExpenseStatusBadge approval={props.row.original.latest_approval} />
      ),
    },
    {
@@ -283,7 +319,7 @@ const ExpensesTable = () => {
        const currentRowRelativeIndex =
          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;

-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;

        const approveClickHandler = () => {
          setSelectedExpense(props.row.original);
@@ -314,7 +350,7 @@ const ExpensesTable = () => {

        return (
          <>
-            {currentPageSize > 2 && (
+            {currentPageSize > 3 && (
              <RowDropdownOptions isLast2Rows={isLast2Rows}>
                <RowOptionsMenu
                  type='dropdown'
@@ -326,10 +362,10 @@ const ExpensesTable = () => {
              </RowDropdownOptions>
            )}

-            {currentPageSize <= 2 && (
+            {currentPageSize <= 3 && (
              <RowCollapseOptions>
                <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                  props={props}
                  approveClickHandler={approveClickHandler}
                  rejectClickHandler={rejectClickHandler}
@@ -346,9 +382,20 @@ const ExpensesTable = () => {
  const tableEnableRowSelectionHandler: (row: Row<Expense>) => boolean = (
    row
  ) => {
-    return row.original.approval.action !== 'REJECTED';
+    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();
  };
@@ -371,17 +418,26 @@ const ExpensesTable = () => {
  const confirmationModalApproveClickHandler = async (notes: string) => {
    setIsApproveLoading(true);

-    const bulkApproveResponse = await ExpenseApi.bulkApprove(
-      selectedRowIds,
-      notes
-    );
+    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 transfer ke laying!`
+        `Berhasil approve ${selectedRowIds.length} data biaya operasional!`
      );

      setRowSelection({});
@@ -389,7 +445,7 @@ const ExpensesTable = () => {
      approveModal.closeModal();

      toast.error(
-        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+        `Gagal approve ${selectedRowIds.length} data biaya operasional!`
      );
    }

@@ -399,24 +455,33 @@ const ExpensesTable = () => {
  const confirmationModalRejectClickHandler = async (notes: string) => {
    setIsRejectLoading(true);

-    const bulkRejectResponse = await ExpenseApi.bulkReject(
-      selectedRowIds,
-      notes
-    );
+    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 transfer ke laying!`
+        `Berhasil reject ${selectedRowIds.length} data biaya operasional!`
      );
      setRowSelection({});
    } else {
      rejectModal.closeModal();

      toast.error(
-        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+        `Gagal reject ${selectedRowIds.length} data biaya operasional!`
      );
    }

@@ -506,27 +571,36 @@ const ExpensesTable = () => {

                {selectedRowIds.length > 0 && (
                  <>
-                    {/* TODO: apply RBAC */}
+                    <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={selectedRowIds.length === 0}
+                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
                      className='w-full sm:w-fit'
                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
+                      <Icon icon='tdesign:money' width={24} height={24} />
+                      Approve Finance
                    </Button>

                    <Button
                      variant='outline'
                      color='error'
                      onClick={bulkRejectClickHandler}
-                      disabled={selectedRowIds.length === 0}
+                      disabled={
+                        !isAllSelectedRowLatestApprovalOnManager &&
+                        !isAllSelectedRowLatestApprovalOnFinance
+                      }
                      className='w-full sm:w-fit'
                    >
                      <Icon
@@ -666,7 +740,7 @@ const ExpensesTable = () => {
      <ConfirmationModalWithNotes
        ref={approveModal.ref}
        type='success'
-        text={`Apakah anda yakin ingin approve data biaya operasional ini (${selectedRowIds.length} data)?`}
+        text='Apakah anda yakin ingin approve data biaya operasional ini?'
        secondaryButton={{
          text: 'Tidak',
        }}
@@ -681,7 +755,7 @@ const ExpensesTable = () => {
      <ConfirmationModalWithNotes
        ref={rejectModal.ref}
        type='error'
-        text={`Apakah anda yakin ingin reject data biaya operasional ini (${selectedRowIds.length} data)?`}
+        text='Apakah anda yakin ingin reject data biaya operasional ini?'
        secondaryButton={{
          text: 'Tidak',
        }}
@@ -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,
+          };
+        })
+      : [],
+  };
+};
@@ -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;
@@ -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;
@@ -3,27 +3,32 @@ 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 }[];
-  vendor?: {
+  supplier?: {
    value: number;
    label: string;
  };
-  existing_documents?: { name: string; url: string }[];
-  request_documents?: File[];
-  kandangExpenses: {
-    kandangId: number;
-    expenses: {
+  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;
      };
-      totalQuantity?: number;
-      totalExpense?: number;
+      quantity?: number;
+      price?: number;
      notes?: string;
    }[];
  }[];
@@ -31,6 +36,11 @@ type ExpenseFormSchemaType = {

 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(),
@@ -47,35 +57,36 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
      .min(1, 'Kandang wajib dipilih!')
      .required('Kandang wajib dipilih!'),

-    vendor: Yup.object({
+    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(),
      })
    ),

-    request_documents: Yup.array().of(Yup.mixed<File>().required()).optional(),
+    deleted_documents: Yup.array().of(Yup.number().required()).optional(),

-    kandangExpenses: Yup.array()
+    documents: Yup.array().of(Yup.mixed<File>().required()).optional(),
+
+    expense_nonstocks: Yup.array()
      .of(
        Yup.object({
-          kandangId: Yup.number().min(1, 'Wajib memilih kandang!').required(),
-          expenses: Yup.array()
+          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!'),
-                totalQuantity: Yup.number().required(
-                  'Total kuantitas wajib diisi!'
-                ),
-                totalExpense: Yup.number().required('Total biaya wajib diisi!'),
+                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
                notes: Yup.string(),
              })
            )
@@ -90,7 +101,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
 export const UpdateExpenseRequestFormSchema = ExpenseRequestFormSchema;

 export const UploadRequestDocumentsFormSchema = Yup.object({
-  request_documents: Yup.array().of(Yup.mixed<File>().required()).required(),
+  documents: Yup.array().of(Yup.mixed<File>().required()).required(),
 });

 export type ExpenseRequestFormValues = Yup.InferType<
@@ -105,6 +116,12 @@ export const getExpenseFormInitialValues = (
  initialValues?: Expense
 ): ExpenseRequestFormValues => {
  return {
+    category: initialValues?.category
+      ? {
+          value: initialValues.category,
+          label: initialValues.category,
+        }
+      : undefined,
    location: initialValues?.location
      ? {
          value: initialValues.location.id,
@@ -115,29 +132,36 @@ export const getExpenseFormInitialValues = (
      ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
      : undefined,
    kandangs: initialValues?.kandangs.map((kandang) => ({
-      id: kandang.id,
+      id: kandang.kandang_id,
      name: kandang.name,
    })),
-    vendor: initialValues?.vendor
+    supplier: initialValues?.supplier
      ? {
-          value: initialValues.vendor.id,
-          label: initialValues.vendor.name,
+          value: initialValues.supplier.id,
+          label: initialValues.supplier.name,
        }
      : undefined,
-    existing_documents: initialValues?.request_documents,
-    request_documents: [],
-    kandangExpenses: initialValues?.kandang_expenses
-      ? initialValues.kandang_expenses.map((kandangExpense) => ({
-          kandangId: kandangExpense.kandang.id,
-          expenses: kandangExpense.expenses.map((expenseItem) => ({
-            nonstock: {
-              value: expenseItem.nonstock.id,
-              label: expenseItem.nonstock.name,
-            },
-            totalQuantity: expenseItem.total_quantity,
-            totalExpense: expenseItem.total_expense,
-            notes: expenseItem.notes,
-          })),
+    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,
+              }))
+            : [],
        }))
      : [],
  };
@@ -42,7 +42,6 @@ interface ExpenseFormProps {
  initialValues?: Expense;
 }

-// TODO: integrate this with real API
 const ExpenseRequestForm = ({
  type = 'add',
  initialValues,
@@ -59,7 +58,7 @@ const ExpenseRequestForm = ({
  const createExpenseHandler = useCallback(
    async (payload: CreateExpensePayload) => {
      const createExpenseRes = await ExpenseApi.create(
-        ExpenseApi.convertPayloadToFormData(payload)
+        ExpenseApi.convertExpenseRequestPayloadToFormData(payload)
      );

      if (isResponseError(createExpenseRes)) {
@@ -74,10 +73,15 @@ const ExpenseRequestForm = ({
  );

  const updateExpenseHandler = useCallback(
-    async (expenseId: number, payload: UpdateExpensePayload) => {
+    async (
+      expenseId: number,
+      payload: UpdateExpensePayload,
+      deletedDocumentIds: number[]
+    ) => {
      const updateExpenseRes = await ExpenseApi.update(
        expenseId,
-        ExpenseApi.convertPayloadToFormData(payload)
+        ExpenseApi.convertExpenseRequestUpdatePayloadToFormData(payload),
+        deletedDocumentIds
      );

      if (updateExpenseRes?.status === 'error') {
@@ -102,20 +106,17 @@ const ExpenseRequestForm = ({
      setExpenseFormErrorMessage('');

      const expensePayload: CreateExpensePayload = {
-        locationId: values.location?.value as number,
-        kandangIds: values.kandangs
-          ? values.kandangs.map((item) => item.id)
-          : [],
-        transaction_date: values.transaction_date as string,
-        vendorId: values.vendor?.value as number,
-        request_documents: values.request_documents as File[],
-        kandang_expenses: values.kandangExpenses.map((kandangExpense) => ({
-          kandangId: kandangExpense.kandangId,
-          expenses: kandangExpense.expenses.map((expenseItem) => ({
-            nonstockId: expenseItem.nonstock?.value as number,
-            total_quantity: expenseItem.totalQuantity as number,
-            total_expense: expenseItem.totalExpense as number,
-            notes: expenseItem.notes,
+        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 ?? '',
          })),
        })),
      };
@@ -126,9 +127,28 @@ const ExpenseRequestForm = ({
          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,
-            expensePayload
+            expenseUpdatePayload,
+            formik.values.deleted_documents ?? []
          );
          break;
      }
@@ -145,72 +165,104 @@ const ExpenseRequestForm = ({

  const {
    setInputValue: setVendorInputValue,
-    options: vendorOptions,
+    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('kandangExpenses', []);
+    formik.setFieldValue('expense_nonstocks', []);
  };

  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
    formik.setFieldTouched('kandangs', true);
    formik.setFieldValue('kandangs', kandangs);

-    const newKandangExpenses = [...(formik.values.kandangExpenses ?? [])];
+    const newExpenseNonstocks = [...(formik.values.expense_nonstocks ?? [])];

-    // add new kandangExpenses
+    // add new expense_nonstocks
    kandangs.forEach((kandangItem) => {
-      const isKandangExistInKandangExpense = newKandangExpenses.find(
-        (kandangExpenseItem) => kandangExpenseItem.kandangId === kandangItem.id
+      const isKandangExistInExpenseNonstocks = newExpenseNonstocks.find(
+        (expenseNonstockItem) =>
+          expenseNonstockItem.kandang_id === kandangItem.id
      );

-      if (isKandangExistInKandangExpense) return;
+      if (isKandangExistInExpenseNonstocks) return;

-      newKandangExpenses.push({
-        kandangId: kandangItem.id,
-        expenses: [
+      newExpenseNonstocks.push({
+        kandang_id: kandangItem.id,
+        cost_items: [
          {
            nonstock: undefined,
-            totalExpense: undefined,
-            totalQuantity: undefined,
+            quantity: undefined,
+            price: undefined,
            notes: '',
          },
        ],
      });
    });

-    // prune kandangExpenses
+    // prune expense_nonstocks
    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
-    const deletedKandangExpensesIdx: number[] = [];
+    const deletedExpenseNonstocksIdx: number[] = [];

-    newKandangExpenses.forEach((kandangExpense, idx) => {
-      const isKandangExpenseValid = kandangIds.has(kandangExpense.kandangId);
+    newExpenseNonstocks.forEach((expenseNonstock, idx) => {
+      const isExpenseNonstockValid = kandangIds.has(expenseNonstock.kandang_id);

-      if (!isKandangExpenseValid) {
-        deletedKandangExpensesIdx.push(idx);
+      if (!isExpenseNonstockValid) {
+        deletedExpenseNonstocksIdx.push(idx);
      }
    });

-    deletedKandangExpensesIdx.forEach((deletedKandangExpenseIdx) => {
-      newKandangExpenses.splice(deletedKandangExpenseIdx, 1);
+    deletedExpenseNonstocksIdx.forEach((deletedExpenseNonstockIdx) => {
+      newExpenseNonstocks.splice(deletedExpenseNonstockIdx, 1);
    });

-    formik.setFieldValue('kandangExpenses', newKandangExpenses);
+    formik.setFieldValue('expense_nonstocks', newExpenseNonstocks);
  };

-  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('vendor', true);
-    formik.setFieldValue('vendor', val);
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('supplier', true);
+    formik.setFieldValue('supplier', val);
  };

  const requestDocumentsChangeHandler = (val: File[]) => {
-    formik.setFieldTouched('request_documents', true);
-    formik.setFieldValue('request_documents', val);
+    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 = () => {
@@ -269,6 +321,25 @@ const ExpenseRequestForm = ({
          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
@@ -278,7 +349,7 @@ const ExpenseRequestForm = ({
              options={locationOptions}
              isLoading={isLoadingLocationOptions}
              onInputChange={setLocationInputValue}
-              className={{ wrapper: 'col-span-12 sm:col-span-6' }}
+              className={{ wrapper: 'col-span-12 sm:col-span-4' }}
            />

            <DateInput
@@ -288,7 +359,7 @@ const ExpenseRequestForm = ({
              value={formik.values.transaction_date}
              onChange={formik.handleChange}
              className={{
-                wrapper: 'col-span-12 sm:col-span-6',
+                wrapper: 'col-span-12 sm:col-span-4',
              }}
            />

@@ -306,9 +377,9 @@ const ExpenseRequestForm = ({
              label='Vendor'
              required
              placeholder='Pilih Vendor'
-              value={formik.values.vendor}
-              onChange={vendorChangeHandler}
-              options={vendorOptions}
+              value={formik.values.supplier}
+              onChange={supplierChangeHandler}
+              options={supplierOptions}
              isLoading={isLoadingVendorOptions}
              onInputChange={setVendorInputValue}
              className={{ wrapper: 'col-span-12' }}
@@ -316,9 +387,10 @@ const ExpenseRequestForm = ({

            <DropFileInput
              label='Dokumen Pengajuan'
-              name='request_documents'
-              values={formik.values.request_documents}
+              name='documents'
+              values={formik.values.documents}
              onChange={requestDocumentsChangeHandler}
+              onDelete={requestDocumentsDeleteHandler}
              accept={{
                ...ACCEPTED_FILE_TYPE.PDF,
                ...ACCEPTED_FILE_TYPE.IMAGE,
@@ -336,20 +408,41 @@ const ExpenseRequestForm = ({
                    {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>
+                          <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>
                      )
                    )}
@@ -402,6 +495,17 @@ const ExpenseRequestForm = ({
              </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', {
@@ -424,17 +528,6 @@ const ExpenseRequestForm = ({
              </div>
            )}
          </div>
-
-          {expenseFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{expenseFormErrorMessage}</span>
-            </div>
-          )}
        </form>
      </section>

@@ -41,28 +41,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
    val: OptionType | OptionType[] | null
  ) => {
    formik.setFieldTouched(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
      true
    );
    formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
      val
    );
  };

  const addExpenseItemHandler = (kandangExpenseIdx: number) => {
    const newExpensesValue = [
-      ...formik.values.kandangExpenses[kandangExpenseIdx].expenses,
+      ...formik.values.expense_nonstocks[kandangExpenseIdx].cost_items,
      {
        nonstock: undefined,
-        totalExpense: undefined,
-        totalQuantity: undefined,
+        price: undefined,
+        quantity: undefined,
        notes: '',
      },
    ];

    formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items`,
      newExpensesValue
    );
  };
@@ -71,27 +71,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
    kandangExpenseIdx: number,
    expenseIdx: number
  ) => {
-    const path = `kandangExpenses[${kandangExpenseIdx}].expenses`;
+    const path = `expense_nonstocks[${kandangExpenseIdx}].cost_items`;

    // trims values, errors, and touched at expenseIdx
    removeArrayItemAndSync(formik, path, expenseIdx);
  };

  const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'totalQuantity' | 'totalExpense' | 'notes',
+    column: 'nonstock' | 'quantity' | 'price' | 'notes',
    kandangExpenseIdx: number,
    expenseIdx: number
  ) => {
    return (
-      formik.touched.kandangExpenses?.[kandangExpenseIdx]?.expenses?.[
+      formik.touched.expense_nonstocks?.[kandangExpenseIdx]?.cost_items?.[
        expenseIdx
      ]?.[column] &&
      Boolean(
-        formik.errors.kandangExpenses?.[kandangExpenseIdx] instanceof Object &&
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+        formik.errors.expense_nonstocks?.[kandangExpenseIdx] instanceof
+          Object &&
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
            expenseIdx
          ] instanceof Object &&
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
            expenseIdx
          ]?.[column]
      )
@@ -112,7 +113,8 @@ const ExpenseRequestKandangDetailExpense: React.FC<
      </div>

      <div className='w-full flex flex-col gap-6'>
-        {formik.values.kandangExpenses.length === 0 && (
+        {(formik.values.expense_nonstocks.length === 0 ||
+          !formik.values.supplier?.value) && (
          <div>
            <p className='text-sm text-gray-400 text-center'>
              Pilih kandang terlebih dahulu!
@@ -120,168 +122,170 @@ const ExpenseRequestKandangDetailExpense: React.FC<
          </div>
        )}

-        {formik.values.kandangExpenses.map(
-          (kandangExpense, kandangExpenseIdx) => {
-            const kandangName = formik.values.kandangs?.find(
-              (kandang) => kandang.id === kandangExpense.kandangId
-            );
+        {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>
+              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>Total Biaya</th>
-                            <th>Catatan</th>
-                            {type !== 'detail' && <th>Aksi</th>}
-                          </tr>
-                        </thead>
+                      <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.expenses.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={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalQuantity`}
-                                    placeholder='Masukkan Total Kuantitas'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[expenseIdx].totalQuantity ?? ''
-                                    }
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    isError={isExpenseRepeaterInputError(
-                                      'totalQuantity',
-                                      kandangExpenseIdx,
-                                      expenseIdx
-                                    )}
-                                    className={{ wrapper: 'min-w-24' }}
-                                  />
-                                </td>
-
-                                <td className='p-2'>
-                                  <NumberInput
-                                    name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalExpense`}
-                                    placeholder='Masukkan Total Biaya'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[expenseIdx].totalExpense ?? ''
-                                    }
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    isError={isExpenseRepeaterInputError(
-                                      'totalExpense',
-                                      kandangExpenseIdx,
-                                      expenseIdx
-                                    )}
-                                    inputPrefix={
-                                      <span className='text-gray-600 font-medium'>
-                                        Rp
-                                      </span>
-                                    }
-                                    className={{ wrapper: 'min-w-24' }}
-                                  />
-                                </td>
-
-                                <td className='p-2'>
-                                  <TextInput
-                                    name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].notes`}
-                                    placeholder='Tuliskan catatan'
-                                    value={
-                                      formik.values.kandangExpenses[
-                                        kandangExpenseIdx
-                                      ].expenses[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(
+                          <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
-                                        )
-                                      }
-                                    >
-                                      <Icon
-                                        icon='material-symbols:delete-outline-rounded'
-                                        width={24}
-                                        height={24}
-                                      />
-                                    </Button>
+                                          expenseIdx,
+                                          val
+                                        );
+                                      }}
+                                      options={nonstockOptions}
+                                      isLoading={isLoadingNonstockOptions}
+                                      onInputChange={setNonstockInputValue}
+                                      className={{ wrapper: 'min-w-48' }}
+                                    />
                                  </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>
-              )
-            );
-          }
-        )}
+                                  <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>
  );
@@ -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;
@@ -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;
--- a/Show More
+++ b/Show More