fix: update next.js version

[FEAT/FE][US#164] Expense Realization

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

.gitignore

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

.gitlab-ci.yml

@@ -1,76 +1,166 @@
-stages: [notify]
+stages:
+  - build
+  - deploy
 
-# --- Notify when MR is opened/updated ---
+.build_template: &build_template
-notify_discord_mr:
+  stage: build
-  stage: notify
+  image: node:20-alpine
-  image: alpine:3.20
+  cache:
-  rules:
+    key: npm-cache
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+    paths:
+      - node_modules/
   variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
+    NPM_CONFIG_PRODUCTION: 'false'
-  before_script:
+    NODE_ENV: ''
-    - apk add --no-cache curl jq
+  script:
-  script: |
+    - echo "Installing dependencies..."
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    - npm ci --no-audit --no-fund
+    - echo "Build env used:"
+    - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
+    - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
+    - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
+    - echo "Building Next.js static export..."
+    - npx next build
+    - |
+      mkdir -p out
+      cat <<EOF > out/build-info.json
+      {
+        "commit": "$CI_COMMIT_SHORT_SHA",
+        "pipeline": "$CI_PIPELINE_ID",
+        "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
+        "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
+        "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
+        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
+      }
+      EOF
+  artifacts:
+    name: 'out-$CI_COMMIT_SHORT_SHA'
+    paths:
+      - out/
+    expire_in: 1 week
 
-    jq -n \
+.deploy_template: &deploy_template
-      --arg repo "$CI_PROJECT_PATH" \
+  stage: deploy
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
+  image:
-      --arg url "$MR_URL" \
+    name: amazon/aws-cli:latest
-      --arg requestor "${GITLAB_USER_LOGIN:-$GITLAB_USER_NAME}" \
+    entrypoint: ['/bin/sh', '-c']
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
+  script:
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
+    - set -e
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
+    - aws --version
-      '{
+    - echo "Cleaning up newline characters in AWS credentials..."
-        username: "CI Bot - FE",
+    - export AWS_ACCESS_KEY_ID=$(echo $AWS_ACCESS_KEY_ID | tr -d '\r\n')
-        embeds: [{
+    - export AWS_SECRET_ACCESS_KEY=$(echo $AWS_SECRET_ACCESS_KEY | tr -d '\r\n')
-          title: "📣 [LTI WEB CLIENT] Merge Request Opened/Updated",
+    - echo "Deploying to s3://$S3_BUCKET in region $AWS_REGION"
-          description: ($mr + " in " + $repo),
+    - aws s3api head-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" || aws s3api create-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" --create-bucket-configuration LocationConstraint="$AWS_REGION"
-          url: $url,
+    - aws s3 sync ./out "s3://$S3_BUCKET" --delete --region "$AWS_REGION" --endpoint-url "https://s3.ap-southeast-3.amazonaws.com"
-          color: 3447003,
-          fields: [
-            {name: "Author", value: $requestor, inline: true},
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
-            {name: "Title", value: $title}
-          ]
-        }]
-      }' \
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
 
-# --- Notify when MR is merged ---
+    # CloudFront invalidation
-notify_discord_merge:
+    - |
-  stage: notify
+      STATUS="success"
-  image: alpine:3.20
+      if [ -n "$CLOUDFRONT_DISTRIBUTION_ID" ]; then
+        echo "Invalidating CloudFront cache..."
+        if ! aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID" --paths "/*"; then
+          echo "CloudFront invalidation failed."
+          STATUS="failed"
+        fi
+      else
+        echo "No CloudFront distribution specified — skipping invalidation"
+      fi
+
+    # Notifikasi Discord
+    - |
+      RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
+
+      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-DEV"
+      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-PROD"
+      else
+        ENVIRONMENT_NAME="UNKNOWN"
+      fi
+
+      if [ "$STATUS" = "success" ]; then
+        COLOR=3066993
+        TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
+        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` completed successfully."
+      else
+        COLOR=15158332
+        TITLE="❌ Deployment ${ENVIRONMENT_NAME} Failed"
+        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
+      fi
+
+      jq -n \
+        --arg title "$TITLE" \
+        --arg desc "$DESC" \
+        --arg color "$COLOR" \
+        --arg repo "$CI_PROJECT_PATH" \
+        --arg actor "$GITLAB_USER_LOGIN" \
+        --arg commit "$CI_COMMIT_SHA" \
+        --arg run_url "$RUN_URL" \
+        '{
+          username: "CI Bot - LTI WEB",
+          embeds: [{
+            title: $title,
+            description: $desc,
+            color: ($color|tonumber),
+            fields: [
+              {name: "Repository", value: $repo, inline: true},
+              {name: "Actor", value: $actor, inline: true},
+              {name: "Commit", value: $commit, inline: false},
+              {name: "Pipeline", value: ("[Open run](" + $run_url + ")"), inline: false}
+            ]
+          }]
+        }' > payload.json
+
+      curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
+
+# ====== DEVELOPMENT (Branch development) ======
+build:dev:
+  <<: *build_template
   rules:
-    # Only run for merge request pipelines that are in merged state
+    - if: '$CI_COMMIT_BRANCH == "development"'
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" && $CI_MERGE_REQUEST_STATE == "merged"'
+  environment:
+    name: development
   variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
+    # NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-  before_script:
+    # NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
-    - apk add --no-cache curl jq
+    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
-  script: |
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
+
+deploy:dev:
+  <<: *deploy_template
+  needs: ['build:dev']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "development"'
+  variables:
+    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
+  environment:
+    name: development
+    url: https://dev-lti-erp.mbugroup.id
+    
+# ====== PRODUCTION ======
+# build:production:
+#   <<: *build_template
+#   rules:
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
+#   environment:
+#     name: production
+
+# deploy:production:
+#   <<: *deploy_template
+#   needs: ["build:production"]
+#   rules:
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
+#   variables:
+#     S3_BUCKET: "lti-erp.mbugroup.id"
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
+#   environment:
+#     name: production
+
 
-    jq -n \
-      --arg repo "$CI_PROJECT_PATH" \
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
-      --arg url "$MR_URL" \
-      --arg requestor "${CI_MERGE_REQUEST_AUTHOR}" \
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
-      '{
-        username: "CI Bot - FE",
-        embeds: [{
-          title: "✅ [LTI WEB CLIENT] Merge Request Merged",
-          description: ($mr + " has been merged into " + $repo),
-          url: $url,
-          color: 3066993,
-          fields: [
-            {name: "Author", value: $requestor, inline: true},
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
-            {name: "Title", value: $title}
-          ]
-        }]
-      }' \
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"

.husky/pre-commit

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

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20-alpine
+
+RUN apk add --no-cache git bash build-base curl
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+# Buat config agar Next tahu output: export
+RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+
+# Build project (Next.js 15 otomatis static export)
+RUN NEXT_DISABLE_TURBOPACK=1 npx next build
+
+# Copy static assets dan hasil build agar bisa diakses
+RUN mkdir -p .next/server/app/_next && \
+    cp -r .next/static .next/server/app/_next/static && \
+    cp -r public/* .next/server/app/
+
+EXPOSE 3000
+
+CMD ["npx", "serve", ".next/server/app", "-l", "3000"]

docker-compose.yaml

@@ -0,0 +1,39 @@
+version: '3.9'
+
+services:
+  dev-web-lti:
+    container_name: dev-web-lti
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3002:3000'
+    env_file:
+      - .env
+    environment:
+      NODE_ENV: production
+      APP_ENV: production
+    networks:
+      - dev-lti-network
+    restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: '3.0'
+          memory: 3G
+        reservations:
+          cpus: '1.0'
+          memory: 512M
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    # Optional: aktifkan healthcheck jika punya endpoint
+    # healthcheck:
+    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
+    #   interval: 10s
+    #   timeout: 3s
+    #   retries: 10
+    #   start_period: 15s
+
+networks:
+  dev-lti-network:
+    external: true

package-lock.json

@@ -8,14 +8,14 @@
       "name": "lti-web-client",
       "version": "0.1.0",
       "dependencies": {
+        "@react-pdf/renderer": "^4.3.1",
         "@tanstack/match-sorter-utils": "^8.19.4",
         "@tanstack/react-table": "^8.21.3",
         "axios": "^1.12.2",
         "clsx": "^2.1.1",
         "formik": "^2.4.6",
-        "inputmask": "^5.0.9",
         "moment": "^2.30.1",
-        "next": "15.5.3",
+        "next": "15.5.7",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
@@ -33,7 +33,6 @@
         "@eslint/eslintrc": "^3",
         "@iconify/react": "^6.0.2",
         "@tailwindcss/postcss": "^4",
-        "@types/inputmask": "^5.0.7",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1083,9 +1082,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
-      "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
+      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1099,9 +1098,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
-      "integrity": "sha512-nzbHQo69+au9wJkGKTU9lP7PXv0d1J5ljFpvb+LnEomLtSbJkbZyEs6sbF3plQmiOB2l9OBtN2tNSvCH1nQ9Jg==",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
       "cpu": [
         "arm64"
       ],
@@ -1115,9 +1114,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
-      "integrity": "sha512-w83w4SkOOhekJOcA5HBvHyGzgV1W/XvOfpkrxIse4uPWhYTTRwtGEM4v/jiXwNSJvfRvah0H8/uTLBKRXlef8g==",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
       "cpu": [
         "x64"
       ],
@@ -1131,9 +1130,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
-      "integrity": "sha512-+m7pfIs0/yvgVu26ieaKrifV8C8yiLe7jVp9SpcIzg7XmyyNE7toC1fy5IOQozmr6kWl/JONC51osih2RyoXRw==",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
       "cpu": [
         "arm64"
       ],
@@ -1147,9 +1146,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
-      "integrity": "sha512-u3PEIzuguSenoZviZJahNLgCexGFhso5mxWCrrIMdvpZn6lkME5vc/ADZG8UUk5K1uWRy4hqSFECrON6UKQBbQ==",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
       "cpu": [
         "arm64"
       ],
@@ -1163,9 +1162,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
-      "integrity": "sha512-lDtOOScYDZxI2BENN9m0pfVPJDSuUkAD1YXSvlJF0DKwZt0WlA7T7o3wrcEr4Q+iHYGzEaVuZcsIbCps4K27sA==",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
       "cpu": [
         "x64"
       ],
@@ -1179,9 +1178,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
-      "integrity": "sha512-9vWVUnsx9PrY2NwdVRJ4dUURAQ8Su0sLRPqcCCxtX5zIQUBES12eRVHq6b70bbfaVaxIDGJN2afHui0eDm+cLg==",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
       "cpu": [
         "x64"
       ],
@@ -1195,9 +1194,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
-      "integrity": "sha512-1CU20FZzY9LFQigRi6jM45oJMU3KziA5/sSG+dXeVaTm661snQP6xu3ykGxxwU5sLG3sh14teO/IOEPVsQMRfA==",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
       "cpu": [
         "arm64"
       ],
@@ -1211,9 +1210,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
-      "integrity": "sha512-JMoLAq3n3y5tKXPQwCK5c+6tmwkuFDa2XAxz8Wm4+IVthdBZdZGh+lmiLUHg9f9IDwIQpUjp+ysd6OkYTyZRZw==",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
       "cpu": [
         "x64"
       ],
@@ -1274,6 +1273,180 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.2.tgz",
+      "integrity": "sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.0.3.tgz",
+      "integrity": "sha512-N1qQDZr6phXYQOp033Hvm2nkUkx2LkszjGPbmRavs9VOYzi4sp31MaccMKptL24ii6UhBh/z9yPUhnuNe/qHwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/types": "^2.9.1",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.3.tgz",
+      "integrity": "sha512-lvP5ryzYM3wpbO9bvqLZYwEr5XBDX9jcaRICvtnoRqdJOo7PRrMnmB4MMScyb+Xw10mGeIubZAAomNAG5ONQZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/png-js": "^3.0.0",
+        "jay-peg": "^1.1.1"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.4.1.tgz",
+      "integrity": "sha512-GVzdlWoZWldRDzlWj3SttRXmVDxg7YfraAohwy+o9gb9hrbDJaaAV6jV3pc630Evd3K46OAzk8EFu8EgPDuVuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/image": "^3.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/pdfkit": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-4.0.4.tgz",
+      "integrity": "sha512-/nITLggsPlB66bVLnm0X7MNdKQxXelLGZG6zB5acF5cCgkFwmXHnLNyxYOUD4GMOMg1HOPShXDKWrwk2ZeHsvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/png-js": "^3.0.0",
+        "browserify-zlib": "^0.2.0",
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.2",
+        "jay-peg": "^1.1.1",
+        "linebreak": "^1.1.0",
+        "vite-compatible-readable-stream": "^3.6.1"
+      }
+    },
+    "node_modules/@react-pdf/png-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-3.0.0.tgz",
+      "integrity": "sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.1.1.tgz",
+      "integrity": "sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-1.1.4.tgz",
+      "integrity": "sha512-oTQDiR/t4Z/Guxac88IavpU2UgN7eR0RMI9DRKvKnvPz2DUasGjXfChAdMqDNmJJxxV26mMy9xQOUV2UU5/okg==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.3.1.tgz",
+      "integrity": "sha512-v1WAaAhQShQZGcBxfjkEThGCHVH9CSuitrZ1bIOLvB5iBKM14abYK5D6djKhWCwF6FTzYeT2WRjRMVgze/ND2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^1.9.1",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.3.1.tgz",
+      "integrity": "sha512-dPKHiwGTaOsKqNWCHPYYrx8CDfAGsUnV4tvRsEu0VPGxuot1AOq/M+YgfN/Pb+MeXCTe2/lv6NvA8haUtj3tsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/layout": "^4.4.1",
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/reconciler": "^1.1.4",
+        "@react-pdf/render": "^4.3.1",
+        "@react-pdf/types": "^2.9.1",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.1.1.tgz",
+      "integrity": "sha512-Iyw0A3wRIeQLN4EkaKf8yF9MvdMxiZ8JjoyzLzDHSxnKYoOA4UGu84veCb8dT9N8MxY5x7a0BUv/avTe586Plg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/types": "^2.9.1",
+        "color-string": "^1.9.1",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^1.0.3",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-6.0.0.tgz",
+      "integrity": "sha512-fDt19KWaJRK/n2AaFoVm31hgGmpygmTV7LsHGJNGZkgzXcFyLsx+XUl63DTDPH3iqxj3xUX128t104GtOz8tTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "bidi-js": "^1.0.2",
+        "hyphen": "^1.6.4",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.9.1.tgz",
+      "integrity": "sha512-5GoCgG0G5NMgpPuHbKG2xcVRQt7+E5pg3IyzVIIozKG3nLcnsXW4zy25vG1ZBQA0jmo39q34au/sOnL/0d1A4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1647,13 +1820,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/inputmask": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@types/inputmask/-/inputmask-5.0.7.tgz",
-      "integrity": "sha512-uojbVPWzBQ/n/0jc/d16fLqmGasFIptbrLD2WrCPWArlk+5PgblOqH4EDkI3AoobXLAlOK5yF01V8jMmvMG5qg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2269,6 +2435,12 @@
         "win32"
       ]
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2603,6 +2775,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2627,6 +2828,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2728,6 +2947,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2754,9 +2982,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2813,6 +3050,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3003,6 +3246,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3047,6 +3296,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -3680,11 +3935,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -3843,6 +4106,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4196,6 +4476,21 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -4212,6 +4507,12 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.6.tgz",
+      "integrity": "sha512-fXHXcGFTXOvZTSkPJuGOQf5Lv5T/R2itiiCVPg9LxAje5D00O0pP83yJShFq5V89Ly//Gt6acj7z8pbBr34stw==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4248,11 +4549,11 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inputmask": {
+    "node_modules/inherits": {
-      "version": "5.0.9",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "MIT"
+      "license": "ISC"
     },
     "node_modules/internal-slot": {
       "version": "1.1.0",
@@ -4630,6 +4931,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -4708,6 +5015,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -4725,9 +5041,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5110,6 +5426,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5182,6 +5517,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-engine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
+      "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==",
+      "license": "MIT"
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -5313,12 +5654,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.3",
+      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
-      "integrity": "sha512-r/liNAx16SQj4D+XH/oI1dlpv9tdKJ6cONYPwwcCC46f2NjpaRWY+EKCzULfgQYV6YKXjHBchff2IZBSlZmJNw==",
+      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.3",
+        "@next/env": "15.5.7",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -5331,14 +5672,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.3",
+        "@next/swc-darwin-arm64": "15.5.7",
-        "@next/swc-darwin-x64": "15.5.3",
+        "@next/swc-darwin-x64": "15.5.7",
-        "@next/swc-linux-arm64-gnu": "15.5.3",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
-        "@next/swc-linux-arm64-musl": "15.5.3",
+        "@next/swc-linux-arm64-musl": "15.5.7",
-        "@next/swc-linux-x64-gnu": "15.5.3",
+        "@next/swc-linux-x64-gnu": "15.5.7",
-        "@next/swc-linux-x64-musl": "15.5.3",
+        "@next/swc-linux-x64-musl": "15.5.7",
-        "@next/swc-win32-arm64-msvc": "15.5.3",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
-        "@next/swc-win32-x64-msvc": "15.5.3",
+        "@next/swc-win32-x64-msvc": "15.5.7",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {
@@ -5392,6 +5733,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5582,6 +5932,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5612,6 +5968,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5705,6 +6067,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5764,6 +6132,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5970,6 +6347,15 @@
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
       "license": "MIT"
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -6009,6 +6395,12 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6064,6 +6456,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6309,6 +6721,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6348,6 +6775,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6538,6 +6974,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/swr": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
@@ -6588,6 +7030,12 @@
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
       "license": "MIT"
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -6836,6 +7284,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -6916,6 +7390,26 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vite-compatible-readable-stream": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
+      "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7053,6 +7547,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
     "node_modules/yup": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",

package.json

@@ -11,14 +11,14 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@react-pdf/renderer": "^4.3.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
-    "inputmask": "^5.0.9",
     "moment": "^2.30.1",
-    "next": "15.5.3",
+    "next": "15.5.7",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
@@ -36,7 +36,6 @@
     "@eslint/eslintrc": "^3",
     "@iconify/react": "^6.0.2",
     "@tailwindcss/postcss": "^4",
-    "@types/inputmask": "^5.0.7",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

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

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

src/app/expense/detail/page.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ExpenseDetail from '@/components/pages/expense/ExpenseDetail';
+
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ExpenseDetailPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const expenseId = searchParams.get('expenseId');
+
+  const { data: expense, isLoading: isLoadingExpense } = useSWR(
+    expenseId,
+    (id: number) => ExpenseApi.getSingle(id)
+  );
+
+  if (!expenseId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingExpense && (!expense || isResponseError(expense))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingExpense && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingExpense && isResponseSuccess(expense) && (
+        <ExpenseDetail initialValues={expense.data} />
+      )}
+    </div>
+  );
+};
+
+export default ExpenseDetailPage;

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

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

src/app/expense/realization/page.tsx

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

src/app/globals.css

@@ -48,3 +48,8 @@
 html {
   scrollbar-gutter: initial;
 }
+
+.react-select__menu-portal {
+  position: relative;
+  z-index: 99999 !important;
+}

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

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

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

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

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

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

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

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

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

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

src/app/marketing/detail/layout.tsx

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

src/app/marketing/detail/page.tsx

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

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

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

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

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

src/app/marketing/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -37,11 +37,11 @@ const ProjectFlockDetail = () => {
   }
 
   return (
-    <div className='w-full p-4 flex flex-row justify-center'>
+    <div className='w-full p-4 flex flex-col justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+      {isResponseSuccess(projectFlock) && (
         <ProjectFlockForm
           formType='detail'
           initialValues={projectFlock.data}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/purchase/add/page.tsx

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

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

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

src/app/purchase/detail/page.tsx

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

src/app/purchase/layout.tsx

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

src/app/purchase/page.tsx

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

src/components/Card.tsx

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

src/components/Collapse.tsx

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

src/components/Modal.tsx

@@ -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.showModal();
+    if (isNestingModal) {
+      ref.current.showModal();
+    } else {
+      ref.current.show();
+    }
     setOpen(true);
-  }, []);
+  }, [isNestingModal]);
 
   const closeModal = useCallback(() => {
     if (!ref.current) return;
@@ -30,7 +34,6 @@ export const useModal = () => {
     open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  // Gunakan useEffect agar event listener tidak didaftarkan berulang kali
   useEffect(() => {
     const dialog = ref.current;
     if (!dialog) return;

src/components/Navbar.tsx

@@ -1,16 +1,38 @@
 '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 { useAuth } from '@/services/hooks/useAuth';
+import { AuthApi } from '@/services/api/auth';
+import { isResponseError } from '@/lib/api-helper';
+
 interface NavbarProps {
   title: string;
   toggleSidebar?: () => void;
 }
 
 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'>
@@ -42,8 +64,7 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
           </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' onClick={logoutClickHandler} />
-            <MenuItem title='Logout' href='#' />
           </Menu>
         </div>
       </div>

src/components/Table.tsx

@@ -13,6 +13,7 @@ import {
   FilterFn,
   SortingState,
   OnChangeFn,
+  Row,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -50,6 +51,7 @@ export interface TableProps<TData extends object> {
   manualSorting?: boolean;
   rowSelection?: Record<string, boolean>;
   setRowSelection?: OnChangeFn<Record<string, boolean>>;
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -90,6 +92,7 @@ const Table = <TData extends object>({
   manualSorting = false,
   rowSelection,
   setRowSelection,
+  enableRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -150,6 +153,10 @@ const Table = <TData extends object>({
     tableOptions.getRowId = (row) => (row as { id: string }).id;
   }
 
+  if (enableRowSelection !== undefined) {
+    tableOptions.enableRowSelection = enableRowSelection;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 

src/components/Tabs.tsx

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

src/components/helper/RequireAuth.tsx

@@ -6,147 +6,9 @@ import useSWRImmutable from 'swr/immutable';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { GetMeResponse } from '@/types/api/api-general';
+import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
-
+import { AxiosError } from 'axios';
-// TODO: delete this later, DONT HARDCODE USER DATA
-const DUMMY_USER = {
-  id: 1,
-  email: 'admin@mbugroup.id',
-  npk: '0001',
-  name: 'Super Admin',
-  image: null,
-  created_at: '2025-09-30T03:24:20.899229Z',
-  updated_at: '2025-09-30T03:24:20.899229Z',
-  roles: [
-    {
-      id: 1,
-      key: 'mbu.super_admin',
-      name: 'MBU Administrator',
-      client: {
-        id: 1,
-        name: 'PT Mitra Berlian Unggas',
-        alias: 'MBU',
-      },
-      permissions: [
-        {
-          id: 1,
-          name: 'mbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 2,
-          name: 'mbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-        {
-          id: 3,
-          name: 'mbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 1,
-            name: 'PT Mitra Berlian Unggas',
-            alias: 'MBU',
-          },
-        },
-      ],
-    },
-    {
-      id: 2,
-      key: 'lti.super_admin',
-      name: 'LTI Administrator',
-      client: {
-        id: 2,
-        name: 'PT Lumbung Telur Indonesia',
-        alias: 'LTI',
-      },
-      permissions: [
-        {
-          id: 4,
-          name: 'lti:purchase:read',
-          action: 'read',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 5,
-          name: 'lti:purchase:create',
-          action: 'create',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-        {
-          id: 6,
-          name: 'lti:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 2,
-            name: 'PT Lumbung Telur Indonesia',
-            alias: 'LTI',
-          },
-        },
-      ],
-    },
-    {
-      id: 3,
-      key: 'manbu.super_admin',
-      name: 'MANBU Administrator',
-      client: {
-        id: 3,
-        name: 'PT Mandiri Berlian Unggas',
-        alias: 'MANBU',
-      },
-      permissions: [
-        {
-          id: 7,
-          name: 'manbu:purchase:read',
-          action: 'read',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 8,
-          name: 'manbu:purchase:create',
-          action: 'create',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-        {
-          id: 9,
-          name: 'manbu:purchase:approve',
-          action: 'approve',
-          client: {
-            id: 3,
-            name: 'PT Mandiri Berlian Unggas',
-            alias: 'MANBU',
-          },
-        },
-      ],
-    },
-  ],
-};
 
 interface RequireAuthProps {
   children?: ReactNode;
@@ -156,17 +18,20 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   const router = useRouter();
   const { setUser, setIsLoadingUser } = useAuth();
 
-  const { data: userResponse, isLoading: isLoadingUserResponse } =
+  const {
-    useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
+    data: userResponse,
-      '/auth/sso/userinfo',
+    isLoading: isLoadingUserResponse,
-      httpClientFetcher,
+    error: userErrorResponse,
-      {
+  } = useSWRImmutable<
-        shouldRetryOnError: false,
+    GetMeResponse & { ok?: boolean },
-        revalidateOnFocus: false,
+    AxiosError<BaseApiResponse>,
-        revalidateOnReconnect: false,
+    SWRHttpKey
-        refreshInterval: 0,
+  >('/sso/userinfo', httpClientFetcher, {
-      }
+    shouldRetryOnError: false,
-    );
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshInterval: 0,
+  });
 
   useEffect(() => {
     setIsLoadingUser(isLoadingUserResponse);
@@ -175,23 +40,25 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   useEffect(() => {
     if (isResponseSuccess(userResponse)) {
       setUser(userResponse.data);
-    } else {
+    } else if (
-      // router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      isResponseError(userErrorResponse?.response?.data) &&
-      // TODO: remove this later, DONT HARDCODE USER DATA
+      typeof window !== 'undefined'
-      setUser(DUMMY_USER);
+    ) {
+      router.replace(
+        `${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`
+      );
     }
-  }, [userResponse, setIsLoadingUser, setUser]);
+  }, [userResponse, userErrorResponse, setIsLoadingUser, setUser]);
 
-  // TODO: uncomment this later
+  if (isLoadingUserResponse && !userResponse && !userErrorResponse) {
-  // if (isLoadingUserResponse && !userResponse) {
+    return (
-  //   return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
-  //     <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
-  //       <span className='loading loading-spinner loading-xl' />
+      </div>
-  //     </div>
+    );
-  //   );
+  }
-  // }
 
-  return <>{children}</>;
+  return <>{isResponseSuccess(userResponse) && children}</>;
 };
 
 export default RequireAuth;

src/components/helper/form/FormActions.tsx

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

src/components/helper/form/FormHeader.tsx

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

src/components/input/DateInput.tsx

@@ -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,11 +76,14 @@ const DateInput = ({
     ? new Date(max.split('/').reverse().join('-'))
     : undefined;
 
-  const calendarModal = useModal();
+  const calendarModal = useModal(isNestedModal);
 
   // --- Sync value props ---
   useEffect(() => {
-    if (!value) return;
+    if (!value) {
+      setDisplayValue('');
+      return;
+    }
     if (isRange && typeof value === 'object') {
       const from = value.from ? new Date(value.from) : undefined;
       const to = value.to ? new Date(value.to) : undefined;
@@ -210,7 +215,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
+          'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
           {
             'border-error': finalIsError,
             'border-success': externalValid && !finalIsError,
@@ -261,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
       >

src/components/input/DebouncedTextArea.tsx

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

src/components/input/NumberInput.tsx

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

src/components/input/PatternInput.tsx

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

src/components/input/SelectInput.tsx

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

src/components/input/TextArea.tsx

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

src/components/input/TextInput.tsx

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

src/components/modal/ConfirmationModal.tsx

@@ -8,7 +8,7 @@ import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
-interface ConfirmationModalProps {
+export interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
@@ -23,6 +23,7 @@ interface ConfirmationModalProps {
     modal?: string;
     modalBox?: string;
   };
+  children?: React.ReactNode;
 }
 
 const ConfirmationModal = ({
@@ -33,6 +34,7 @@ const ConfirmationModal = ({
   primaryButton,
   secondaryButton,
   className,
+  children,
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
 
@@ -95,6 +97,8 @@ const ConfirmationModal = ({
           {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
         </p>
 
+        {children && <div className='w-full'>{children}</div>}
+
         <div className='w-full flex flex-row gap-2'>
           {secondaryButton && secondaryButton.text && (
             <Button

src/components/modal/ConfirmationModalWithNotes.tsx

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

src/components/pages/ApprovalSteps.tsx

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

src/components/pages/expense/ExpenseDetail.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ExpenseRequestContent from '@/components/pages/expense/ExpenseRequestContent';
+import ExpenseRealizationContent from '@/components/pages/expense/ExpenseRealizationContent';
+
+import { Expense } from '@/types/api/expense';
+
+interface ExpenseDetailProps {
+  initialValues?: Expense;
+}
+
+const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
+  const [activeTab, setActiveTab] = useState<string>('request');
+
+  const expenseDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'request',
+        label: 'Pengajuan',
+        content: <ExpenseRequestContent initialValues={initialValues} />,
+      },
+    ];
+
+    if (
+      initialValues?.latest_approval &&
+      initialValues?.latest_approval.step_number >= 4 &&
+      initialValues.latest_approval.action !== 'REJECTED'
+    ) {
+      validTabs.push({
+        id: 'realization',
+        label: 'Realisasi',
+        content: <ExpenseRealizationContent initialValues={initialValues} />,
+      });
+    }
+
+    return validTabs;
+  }, [initialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-7xl pb-16'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/expense'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            Detail Biaya Operasional
+          </h1>
+        </header>
+
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={expenseDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'max-w-5xl mx-auto mt-4',
+          }}
+        />
+      </section>
+    </>
+  );
+};
+
+export default ExpenseDetail;

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -0,0 +1,327 @@
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import DropFileInput from '@/components/input/DropFileInput';
+
+import { Expense } from '@/types/api/expense';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import {
+  UploadRequestDocumentsFormSchema,
+  UploadRequestDocumentsFormValues,
+} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+
+interface ExpenseRealizationContentProps {
+  initialValues?: Expense;
+}
+
+const ExpenseRealizationContent = ({
+  initialValues,
+}: ExpenseRealizationContentProps) => {
+  const formik = useFormik<UploadRequestDocumentsFormValues>({
+    initialValues: {
+      documents: [],
+    },
+    validationSchema: UploadRequestDocumentsFormSchema,
+    onSubmit: async (values) => {
+      const addRealizationDocumentsRes =
+        await ExpenseApi.uploadRealizationDocuments(
+          initialValues?.id as number,
+          values.documents
+        );
+
+      if (isResponseSuccess(addRealizationDocumentsRes)) {
+        toast.success(addRealizationDocumentsRes.message);
+        window.location.reload();
+      } else {
+        toast.error(String(addRealizationDocumentsRes?.message));
+      }
+    },
+  });
+
+  const realizationDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const realizationDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRealizationDocuments = formik.values.documents;
+
+    newRealizationDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRealizationDocuments);
+  };
+
+  return (
+    <div>
+      <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
+        <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
+          {/* TODO: apply RBAC */}
+          <Button
+            type='button'
+            color='warning'
+            href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
+            className='px-4 grow sm:grow-0'
+          >
+            <Icon icon='mdi:pencil-outline' width={24} height={24} />
+            Edit Realisasi
+          </Button>
+        </div>
+      </div>
+
+      <div className='overflow-x-auto w-full max-w-5xl mx-auto'>
+        <table className='table table-sm table-zebra'>
+          <tbody>
+            <tr>
+              <th>Tanggal Realisasi</th>
+              <th>:</th>
+              <td>
+                {initialValues?.realization_date
+                  ? formatDate(initialValues?.realization_date, 'DD MMMM YYYY')
+                  : '-'}
+              </td>
+            </tr>
+            <tr>
+              <th>Dokumen Realisasi</th>
+              <th>:</th>
+              <td>
+                <div>
+                  {!initialValues?.realization_docs ||
+                    (initialValues?.realization_docs &&
+                      initialValues?.realization_docs.length === 0 &&
+                      '-')}
+
+                  {initialValues?.realization_docs &&
+                    initialValues?.realization_docs.length > 0 && (
+                      <ul className='list-disc'>
+                        {initialValues?.realization_docs.map(
+                          (realizationDocument, realizationDocumentIdx) => (
+                            <li key={realizationDocumentIdx}>
+                              <Link
+                                href={realizationDocument.path}
+                                target='_blank'
+                                rel='noopener noreferrer'
+                                className='text-blue-500 underline'
+                              >
+                                {realizationDocument.path}{' '}
+                                <Icon
+                                  icon='cuida:open-in-new-tab-outline'
+                                  width={12}
+                                  height={12}
+                                  className='inline'
+                                />
+                              </Link>
+                            </li>
+                          )
+                        )}
+                      </ul>
+                    )}
+                </div>
+
+                <div className='flex flex-col gap-2'>
+                  <DropFileInput
+                    name='documents'
+                    values={formik.values.documents}
+                    onChange={realizationDocumentsChangeHandler}
+                    onDelete={realizationDocumentsDeleteHandler}
+                    accept={{
+                      ...ACCEPTED_FILE_TYPE.PDF,
+                      ...ACCEPTED_FILE_TYPE.IMAGE,
+                    }}
+                    maxFiles={10}
+                    className={{
+                      wrapper: 'mt-2',
+                      inputWrapper: 'flex items-center',
+                    }}
+                  />
+
+                  {formik.values.documents &&
+                    formik.values.documents.length > 0 && (
+                      <Button
+                        onClick={formik.submitForm}
+                        disabled={formik.isSubmitting}
+                        isLoading={formik.isSubmitting}
+                        className='w-fit self-end'
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />
+                        Tambah
+                      </Button>
+                    )}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <div className='flex flex-row gap-4'>
+          <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
+            <div className='w-full flex flex-col gap-2'>
+              <h3 className='text-sm'>Nominal Pengajuan</h3>
+
+              <span className='text-xl'>
+                {formatCurrency(initialValues?.total_pengajuan as number)}
+              </span>
+
+              <span className='text-sm'>
+                Terbayar{' '}
+                {formatCurrency(initialValues?.total_realisasi as number)}
+              </span>
+            </div>
+          </Card>
+
+          <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
+            <div className='w-full flex flex-col gap-2'>
+              <h3 className='text-sm'>Nominal Realisasi</h3>
+
+              <span className='text-xl'>
+                {formatCurrency(initialValues?.total_realisasi as number)}
+              </span>
+
+              <span className='text-sm'>
+                Selisih{' '}
+                {formatCurrency(
+                  (initialValues?.total_realisasi as number) -
+                    (initialValues?.total_pengajuan as number)
+                )}
+              </span>
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <h2 className='font-bold text-xl text-center'>
+          Rincian Pengajuan Biaya Operasional
+        </h2>
+
+        <div className='w-full mt-2 flex flex-col gap-4'>
+          {initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseGrandTotal = 0;
+
+            kandangExpense.pengajuans?.forEach(
+              (item) => (expenseGrandTotal += item.total_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.total_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.total_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.total_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;

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -0,0 +1,655 @@
+'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?.expense_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.total_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.total_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;

src/components/pages/expense/ExpenseStatusBadge.tsx

@@ -0,0 +1,57 @@
+import PillBadge from '@/components/PillBadge';
+
+import { BaseApproval } from '@/types/api/api-general';
+
+interface ExpenseStatusBadgeProps {
+  approval?: BaseApproval;
+}
+
+const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
+  const isLatestApprovalRejected = approval?.action === 'REJECTED';
+
+  const latestApprovalStepNumber = approval?.step_number;
+
+  let expenseStatusPillBadgeColor:
+    | 'yellow'
+    | 'green'
+    | 'gray'
+    | 'red'
+    | 'purple'
+    | 'blue' = 'gray';
+
+  switch (latestApprovalStepNumber) {
+    case 1:
+      expenseStatusPillBadgeColor = 'yellow';
+      break;
+
+    case 2:
+      expenseStatusPillBadgeColor = 'purple';
+      break;
+
+    case 3:
+      expenseStatusPillBadgeColor = 'blue';
+      break;
+
+    case 4:
+      expenseStatusPillBadgeColor = 'red';
+      break;
+
+    case 5:
+      expenseStatusPillBadgeColor = 'green';
+      break;
+  }
+
+  if (isLatestApprovalRejected) {
+    expenseStatusPillBadgeColor = 'red';
+  }
+
+  return (
+    <PillBadge
+      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
+      color={expenseStatusPillBadgeColor}
+      className='text-xs'
+    />
+  );
+};
+
+export default ExpenseStatusBadge;

src/components/pages/expense/ExpensesTable.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
@@ -11,38 +16,57 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
+import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import DateInput from '@/components/input/DateInput';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
-import { cn } 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',
   props,
+  approveClickHandler,
+  rejectClickHandler,
   deleteClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
   props: CellContext<Expense, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
+  const showEditButton =
+    props.row.original.latest_approval.step_number !== 5 &&
+    (props.row.original.latest_approval.step_number === 1 ||
+      props.row.original.latest_approval.step_number === 2 ||
+      props.row.original.latest_approval.step_number === 3);
+
+  // TODO: apply RBAC
+  const showRealizationButton =
+    props.row.original.latest_approval.action !== 'REJECTED' &&
+    props.row.original.latest_approval.step_number === 3;
+
   return (
-    <div
+    <RowOptionsMenuWrapper type={type}>
-      tabIndex={type === 'dropdown' ? 0 : undefined}
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
-      <div className='flex flex-col gap-1'>
         <Button
           href={`/expense/detail/?expenseId=${props.row.original.id}`}
           variant='ghost'
@@ -53,21 +77,39 @@ const RowOptionsMenu = ({
           Detail
         </Button>
 
-        <Button
+        {showEditButton && (
-          href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+          <Button
-          variant='ghost'
+            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
-          color='warning'
+            variant='ghost'
-          className='justify-start text-sm'
+            color='warning'
-        >
+            className='justify-start text-sm'
-          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          >
-          Edit
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        </Button>
+            Edit
+          </Button>
+        )}
+
+        {showRealizationButton && (
+          <Button
+            href={`/expense/realization/?expenseId=${props.row.original.id}`}
+            variant='ghost'
+            color='info'
+            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+          >
+            <Icon
+              icon='material-symbols:money-bag-rounded'
+              width={16}
+              height={16}
+            />
+            Realisasi
+          </Button>
+        )}
 
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
           color='error'
-          className='text-error hover:text-inherit'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
         >
           <Icon
             icon='material-symbols:delete-outline-rounded'
@@ -78,7 +120,7 @@ const RowOptionsMenu = ({
           Delete
         </Button>
       </div>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -90,8 +132,25 @@ const ExpensesTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '' },
+    initial: {
-    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+      search: '',
+      nameSort: '',
+      transactionDate: '',
+      realizationDate: '',
+      locationId: '',
+      vendorId: '',
+      userId: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      transactionDate: 'transaction_date',
+      realizationDate: 'realization_date',
+      locationId: 'location_id',
+      vendorId: 'vendor_id',
+      userId: 'user_id',
+    },
   });
 
   const {
@@ -104,25 +163,153 @@ const ExpensesTable = () => {
   );
 
   const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
 
   const [selectedExpense, setSelectedExpense] = useState<Expense | undefined>(
     undefined
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isCompleteLoading, setIsCompleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
 
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const isAllSelectedRowLatestApprovalOnManager = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnManager =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 1;
+
+      return isCurrentApprovalOnManager;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const isAllSelectedRowLatestApprovalOnFinance = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnFinance =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 2;
+
+      return isCurrentApprovalOnFinance;
+    });
+  }, [expenses, selectedRowIds]);
+
+  const isAllSelectedRowLatestApprovalOnRealization = useMemo(() => {
+    return selectedRowIds.every((rowId) => {
+      if (!isResponseSuccess(expenses)) return false;
+
+      const expenseItem = expenses.data.find((item) => item.id === rowId);
+
+      const isLatestApprovalRejected =
+        expenseItem?.latest_approval.action === 'REJECTED';
+
+      const isCurrentApprovalOnRealization =
+        !isLatestApprovalRejected &&
+        expenseItem?.latest_approval.step_number === 4;
+
+      return isCurrentApprovalOnRealization;
+    });
+  }, [expenses, selectedRowIds]);
 
   const expensesColumns: ColumnDef<Expense>[] = [
     {
-      header: '#',
+      id: 'select',
-      cell: (props) =>
+      header: ({ table }) => (
-        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        <div className='w-full flex flex-row justify-center'>
-        props.row.index +
+          <CheckboxInput
-        1,
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        const isCheckboxDisabled =
+          !row.getCanSelect() ||
+          row.original.latest_approval.action === 'REJECTED';
+
+        return (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={isCheckboxDisabled}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        );
+      },
     },
     {
-      accessorKey: 'name',
+      accessorKey: 'expense_date',
-      header: 'Nama',
+      header: 'Tanggal Pengajuan',
+      cell: (props) =>
+        props.row.original.expense_date
+          ? formatDate(props.row.original.expense_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'realization_date',
+      header: 'Tanggal Realisasi',
+      cell: (props) =>
+        props.row.original.realization_date
+          ? formatDate(props.row.original.realization_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location?.name ?? '-',
+    },
+    {
+      accessorFn: (row) => row.created_user.name ?? '-',
+      header: 'Nama Pengaju',
+    },
+    {
+      accessorFn: (row) => row.supplier.name ?? '-',
+      header: 'Vendor',
+    },
+    {
+      accessorKey: 'grand_total',
+      header: 'Nominal',
+      cell: (props) =>
+        props.row.original.grand_total
+          ? formatCurrency(props.row.original.grand_total)
+          : '-',
+    },
+    {
+      header: 'Status Pencairan',
+      cell: (props) => (
+        <RealizationStatusBadge approval={props.row.original.latest_approval} />
+      ),
+    },
+    {
+      header: 'Status BOP',
+      cell: (props) => (
+        <ExpenseStatusBadge approval={props.row.original.latest_approval} />
+      ),
     },
     {
       header: 'Aksi',
@@ -132,7 +319,29 @@ 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);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedExpense(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
 
         const deleteClickHandler = () => {
           setSelectedExpense(props.row.original);
@@ -141,21 +350,25 @@ const ExpensesTable = () => {
 
         return (
           <>
-            {currentPageSize > 2 && (
+            {currentPageSize > 3 && (
               <RowDropdownOptions isLast2Rows={isLast2Rows}>
                 <RowOptionsMenu
                   type='dropdown'
                   props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
                   deleteClickHandler={deleteClickHandler}
                 />
               </RowDropdownOptions>
             )}
 
-            {currentPageSize <= 2 && (
+            {currentPageSize <= 3 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
                   deleteClickHandler={deleteClickHandler}
                 />
               </RowCollapseOptions>
@@ -166,6 +379,31 @@ const ExpensesTable = () => {
     },
   ];
 
+  const tableEnableRowSelectionHandler: (row: Row<Expense>) => boolean = (
+    row
+  ) => {
+    return (
+      row.original.latest_approval.action !== 'REJECTED' &&
+      row.original.latest_approval.step_number !== 5
+    );
+  };
+
+  // const bulkApproveClickHandler = () => {
+  //   approveModal.openModal();
+  // };
+
+  // const bulkRejectClickHandler = () => {
+  //   rejectModal.openModal();
+  // };
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -177,10 +415,126 @@ const ExpensesTable = () => {
     setIsDeleteLoading(false);
   };
 
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsApproveLoading(true);
+
+    let bulkApproveResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveManager(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnFinance) {
+      bulkApproveResponse = await ExpenseApi.bulkApproveFinance(
+        selectedRowIds,
+        notes
+      );
+    }
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshExpenses();
+      approveModal.closeModal();
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data biaya operasional!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data biaya operasional!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async (notes: string) => {
+    setIsRejectLoading(true);
+
+    let bulkRejectResponse: BaseApiResponse<Expense> | undefined = undefined;
+
+    if (isAllSelectedRowLatestApprovalOnManager) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectManager(
+        selectedRowIds,
+        notes
+      );
+    } else if (isAllSelectedRowLatestApprovalOnFinance) {
+      bulkRejectResponse = await ExpenseApi.bulkRejectFinance(
+        selectedRowIds,
+        notes
+      );
+    }
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshExpenses();
+      rejectModal.closeModal();
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data biaya operasional!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data biaya operasional!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'locationId',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const {
+    setInputValue: setVendorInputValue,
+    options: vendorOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const [selectedVendor, setSelectedVendor] = useState<OptionType | null>(null);
+
+  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedVendor(val as OptionType);
+    updateFilter('vendorId', val ? ((val as OptionType).value as string) : '');
+  };
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
 
+  const transactionDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transactionDate', e.target.value);
+  };
+
+  const realizationDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('realizationDate', e.target.value);
+  };
+
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
 
@@ -202,34 +556,137 @@ const ExpensesTable = () => {
     <>
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+          <div className='flex flex-col gap-2 mb-4'>
-            <div className='flex flex-row'>
+            <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
-              <Button href='/expense/add' color='primary'>
+              <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                <Button
-                Tambah Biaya Operasional
+                  href='/expense/add'
-              </Button>
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+
+                {selectedRowIds.length > 0 && (
+                  <>
+                    <Button
+                      variant='outline'
+                      color='info'
+                      onClick={bulkApproveClickHandler}
+                      disabled={!isAllSelectedRowLatestApprovalOnManager}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon icon='lucide-lab:farm' width={24} height={24} />
+                      Approve Manager
+                    </Button>
+
+                    <Button
+                      variant='outline'
+                      color='success'
+                      onClick={bulkApproveClickHandler}
+                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon icon='tdesign:money' width={24} height={24} />
+                      Approve Finance
+                    </Button>
+
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={bulkRejectClickHandler}
+                      disabled={
+                        !isAllSelectedRowLatestApprovalOnManager &&
+                        !isAllSelectedRowLatestApprovalOnFinance
+                      }
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
+                  </>
+                )}
+              </div>
+
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Biaya Operasional'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
             </div>
 
-            <DebouncedTextInput
+            <div className='grid grid-cols-12 justify-end gap-2'>
-              name='search'
+              <DateInput
-              placeholder='Cari Biaya Operasional'
+                required
-              value={tableFilterState.search}
+                label='Tanggal Transaksi'
-              onChange={searchChangeHandler}
+                name='transaction_date'
-              className={{ wrapper: 'sm:max-w-3xs' }}
+                placeholder='Masukkan tanggal transaksi'
-            />
+                value={tableFilterState.transactionDate}
-          </div>
+                onChange={transactionDateChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
 
-          <div className='flex flex-row justify-end'>
+              <DateInput
-            <SelectInput
+                required
-              label='Baris'
+                label='Tanggal Realisasi'
-              options={ROWS_OPTIONS}
+                name='realization_date'
-              value={{
+                placeholder='Masukkan tanggal realisasi'
-                label: String(tableFilterState.pageSize),
+                value={tableFilterState.realizationDate}
-                value: tableFilterState.pageSize,
+                onChange={realizationDateChangeHandler}
-              }}
+                className={{
-              onChange={pageSizeChangeHandler}
+                  wrapper: 'col-span-12 sm:col-span-3',
-              className={{ wrapper: 'max-w-28' }}
+                }}
-            />
+              />
+
+              <SelectInput
+                label='Lokasi'
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Vendor'
+                options={vendorOptions}
+                isLoading={isLoadingVendorOptions}
+                value={selectedVendor}
+                onChange={vendorChangeHandler}
+                onInputChange={setVendorInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 max-w-28 justify-self-end',
+                }}
+              />
+            </div>
           </div>
         </div>
 
@@ -245,6 +702,9 @@ const ExpensesTable = () => {
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={tableEnableRowSelectionHandler}
           className={{
             containerClassName: cn({
               'mb-20':
@@ -265,7 +725,7 @@ const ExpensesTable = () => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data biaya operasional ini (${selectedExpense?.name})?`}
+        text='Apakah anda yakin ingin menghapus data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -276,6 +736,36 @@ const ExpensesTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
+
+      <ConfirmationModalWithNotes
+        ref={approveModal.ref}
+        type='success'
+        text='Apakah anda yakin ingin approve data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type='error'
+        text='Apakah anda yakin ingin reject data biaya operasional ini?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
     </>
   );
 };

src/components/pages/expense/RealizationStatusBadge.tsx

@@ -0,0 +1,39 @@
+import PillBadge from '@/components/PillBadge';
+
+import { BaseApproval } from '@/types/api/api-general';
+
+interface RealizationStatusBadgeProps {
+  approval?: BaseApproval;
+}
+
+const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
+  const isLatestApprovalRejected = approval?.action === 'REJECTED';
+
+  const isExpenseRealized = approval?.step_number && approval.step_number >= 4;
+
+  const realizationStatus = isExpenseRealized
+    ? 'Sudah Realisasi'
+    : 'Belum Realisasi';
+
+  let realizationStatusPillBadgeColor:
+    | 'yellow'
+    | 'green'
+    | 'gray'
+    | 'red'
+    | 'purple'
+    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+
+  if (isLatestApprovalRejected) {
+    realizationStatusPillBadgeColor = 'red';
+  }
+
+  return (
+    <PillBadge
+      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      color={realizationStatusPillBadgeColor}
+      className='text-xs'
+    />
+  );
+};
+
+export default RealizationStatusBadge;

src/components/pages/expense/form/ExpenseKandangsTable.tsx

@@ -145,12 +145,19 @@ const ExpenseKandangsTable = ({
       );
 
       onChange(formattedSelectedKandangs);
+    } else {
+      onChange([]);
     }
   }, [rowSelection]);
 
   useEffect(() => {
-    setRowSelection({});
+    if (
-  }, [locationId]);
+      selectedKandangs.length === 0 &&
+      Object.keys(rowSelection).length !== 0
+    ) {
+      setRowSelection({});
+    }
+  }, [selectedKandangs]);
 
   // track sorting
   useEffect(() => {

src/components/pages/expense/form/ExpenseRealizationForm.schema.ts

@@ -0,0 +1,181 @@
+import * as Yup from 'yup';
+import { Expense } from '@/types/api/expense';
+import { formatDate } from '@/lib/helper';
+
+type ExpenseRealizationFormSchemaType = {
+  category?: {
+    value: 'BOP' | 'NON-BOP';
+    label: 'BOP' | 'NON-BOP';
+  };
+  location?: {
+    value: number;
+    label: string;
+  };
+  realization_date?: string;
+  kandangs?: { id: number; name: string }[];
+  supplier?: {
+    value: number;
+    label: string;
+  };
+  existing_documents?: { name: string; url: string }[];
+  documents?: File[];
+  realizations: {
+    kandang_id: number;
+    cost_items: {
+      nonstock?: {
+        value: number;
+        label: string;
+      };
+      quantity?: number;
+      total_cost?: 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!'),
+                total_cost: Yup.number().required('Total biaya 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,
+                  total_cost: realisasiItem.total_price,
+                  notes: realisasiItem.note,
+                };
+              })
+            : kandangExpense.pengajuans
+              ? kandangExpense.pengajuans.map((expenseItem) => ({
+                  nonstock: {
+                    value: expenseItem.id,
+                    label: expenseItem.nonstock.name,
+                  },
+                  quantity: expenseItem.qty,
+                  total_cost: expenseItem.total_price,
+                  notes: expenseItem.note,
+                }))
+              : [];
+
+          return {
+            kandang_id: kandangExpense.kandang_id,
+            cost_items: costItemsInitialValue,
+          };
+        })
+      : [],
+  };
+};

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -0,0 +1,410 @@
+'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 unitPrice =
+            parseFloat(String(costItem.total_cost)) /
+            parseFloat(String(costItem.quantity));
+
+          const realizationItem = {
+            expense_nonstock_id: costItem.nonstock?.value as number,
+            qty: parseFloat(String(costItem.quantity)) as number,
+            unit_price: unitPrice,
+            total_price: parseFloat(String(costItem.total_cost)) 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,
+            total_cost: 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;

src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { FormikContextType } from 'formik';
+
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import TextInput from '@/components/input/TextInput';
+
+import { ExpenseRealizationFormValues } from '@/components/pages/expense/form/ExpenseRealizationForm.schema';
+import { cn } from '@/lib/helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+
+interface ExpenseRealizationKandangDetailExpenseProps {
+  type?: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<ExpenseRealizationFormValues>;
+  className?: {
+    wrapper?: string;
+  };
+}
+
+const ExpenseRealizationKandangDetailExpense: React.FC<
+  ExpenseRealizationKandangDetailExpenseProps
+> = ({ type, formik, className }) => {
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+
+  const nonstockChangeHandler = (
+    kandangExpenseIdx: number,
+    costItemIdx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      true
+    );
+    formik.setFieldValue(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      val
+    );
+  };
+
+  const isExpenseRepeaterInputError = (
+    column: 'nonstock' | 'quantity' | 'total_cost' | '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>Total Biaya</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}].total_cost`}
+                                  placeholder='Masukkan Total Biaya'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].total_cost ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'total_cost',
+                                    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;

src/components/pages/expense/form/ExpenseRequestForm.schema.ts

@@ -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 }[];
+  existing_documents?: { id: number; name: string; url: string }[];
-  request_documents?: File[];
+  deleted_documents?: number[];
-  kandangExpenses: {
+  documents?: File[];
-    kandangId: number;
+  cost_per_kandangs: {
-    expenses: {
+    kandang_id: number;
+    cost_items: {
       nonstock?: {
         value: number;
         label: string;
       };
-      totalQuantity?: number;
+      quantity?: number;
-      totalExpense?: number;
+      total_cost?: 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(),
+
+    cost_per_kandangs: Yup.array()
       .of(
         Yup.object({
-          kandangId: Yup.number().min(1, 'Wajib memilih kandang!').required(),
+          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
-          expenses: Yup.array()
+          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(
+                quantity: Yup.number().required('Total kuantitas wajib diisi!'),
-                  'Total kuantitas wajib diisi!'
+                total_cost: Yup.number().required('Total biaya wajib diisi!'),
-                ),
-                totalExpense: Yup.number().required('Total biaya wajib diisi!'),
                 notes: Yup.string(),
               })
             )
@@ -89,47 +100,68 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
 
 export const UpdateExpenseRequestFormSchema = ExpenseRequestFormSchema;
 
+export const UploadRequestDocumentsFormSchema = Yup.object({
+  documents: Yup.array().of(Yup.mixed<File>().required()).required(),
+});
+
 export type ExpenseRequestFormValues = Yup.InferType<
   typeof ExpenseRequestFormSchema
 >;
 
+export type UploadRequestDocumentsFormValues = Yup.InferType<
+  typeof UploadRequestDocumentsFormSchema
+>;
+
 export const getExpenseFormInitialValues = (
   initialValues?: Expense
 ): ExpenseRequestFormValues => {
   return {
+    category: initialValues?.category
+      ? {
+          value: initialValues.category,
+          label: initialValues.category,
+        }
+      : undefined,
     location: initialValues?.location
       ? {
           value: initialValues.location.id,
           label: initialValues.location.name,
         }
       : undefined,
-    transaction_date: initialValues?.transaction_date
+    transaction_date: initialValues?.expense_date
-      ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
+      ? formatDate(initialValues.expense_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,
+          value: initialValues.supplier.id,
-          label: initialValues.vendor.name,
+          label: initialValues.supplier.name,
         }
       : undefined,
-    existing_documents: initialValues?.request_documents,
+    existing_documents: initialValues?.documents?.map((doc) => ({
-    request_documents: [],
+      id: doc.id,
-    kandangExpenses: initialValues?.kandang_expenses
+      name: doc.path,
-      ? initialValues.kandang_expenses.map((kandangExpense) => ({
+      url: doc.path,
-          kandangId: kandangExpense.kandang.id,
+    })),
-          expenses: kandangExpense.expenses.map((expenseItem) => ({
+    deleted_documents: [],
-            nonstock: {
+    documents: [],
-              value: expenseItem.nonstock.id,
+    cost_per_kandangs: initialValues?.kandangs
-              label: expenseItem.nonstock.name,
+      ? initialValues.kandangs.map((kandangExpense) => ({
-            },
+          kandang_id: kandangExpense.kandang_id,
-            totalQuantity: expenseItem.total_quantity,
+          cost_items: kandangExpense.pengajuans
-            totalExpense: expenseItem.total_expense,
+            ? kandangExpense.pengajuans.map((expenseItem) => ({
-            notes: expenseItem.notes,
+                nonstock: {
-          })),
+                  value: expenseItem.nonstock.id,
+                  label: expenseItem.nonstock.name,
+                },
+                quantity: expenseItem.qty,
+                total_cost: expenseItem.total_price,
+                notes: expenseItem.note,
+              }))
+            : [],
         }))
       : [],
   };

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -6,6 +6,7 @@ import { useFormik } from 'formik';
 import { toast } from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
+import Link from 'next/link';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -41,7 +42,6 @@ interface ExpenseFormProps {
   initialValues?: Expense;
 }
 
-// TODO: integrate this with real API
 const ExpenseRequestForm = ({
   type = 'add',
   initialValues,
@@ -58,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)) {
@@ -73,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') {
@@ -101,20 +106,17 @@ const ExpenseRequestForm = ({
       setExpenseFormErrorMessage('');
 
       const expensePayload: CreateExpensePayload = {
-        locationId: values.location?.value as number,
+        category: formik.values.category?.value as 'BOP' | 'NON-BOP',
-        kandangIds: values.kandangs
+        transaction_date: values?.transaction_date as string,
-          ? values.kandangs.map((item) => item.id)
+        supplier_id: values.supplier?.value as number,
-          : [],
+        documents: values.documents as File[],
-        transaction_date: values.transaction_date as string,
+        cost_per_kandangs: values.cost_per_kandangs.map((costPerKandang) => ({
-        vendorId: values.vendor?.value as number,
+          kandang_id: costPerKandang.kandang_id,
-        request_documents: values.request_documents as File[],
+          cost_items: costPerKandang.cost_items.map((costItem) => ({
-        kandang_expenses: values.kandangExpenses.map((kandangExpense) => ({
+            nonstock_id: costItem.nonstock?.value as number,
-          kandangId: kandangExpense.kandangId,
+            quantity: parseFloat(String(costItem.quantity)) as number,
-          expenses: kandangExpense.expenses.map((expenseItem) => ({
+            total_cost: parseFloat(String(costItem.total_cost)) as number,
-            nonstockId: expenseItem.nonstock?.value as number,
+            notes: costItem.notes ?? '',
-            total_quantity: expenseItem.totalQuantity as number,
-            total_expense: expenseItem.totalExpense as number,
-            notes: expenseItem.notes,
           })),
         })),
       };
@@ -125,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[],
+            cost_per_kandang: values.cost_per_kandangs.map(
+              (costPerKandang) => ({
+                kandang_id: costPerKandang.kandang_id,
+                cost_items: costPerKandang.cost_items.map((costItem) => ({
+                  nonstock_id: costItem.nonstock?.value as number,
+                  quantity: parseFloat(String(costItem.quantity)) as number,
+                  total_cost: parseFloat(String(costItem.total_cost)) as number,
+                  notes: costItem.notes ?? '',
+                })),
+              })
+            ),
+          };
+
           await updateExpenseHandler(
             initialValues?.id as number,
-            expensePayload
+            expenseUpdatePayload,
+            formik.values.deleted_documents ?? []
           );
           break;
       }
@@ -144,48 +165,103 @@ 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('cost_per_kandangs', []);
   };
 
   const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
     formik.setFieldTouched('kandangs', true);
     formik.setFieldValue('kandangs', kandangs);
 
+    const newCostPerKandangs = [...(formik.values.cost_per_kandangs ?? [])];
+
+    // add new cost_per_kandangs
     kandangs.forEach((kandangItem) => {
-      const isKandangExistInKandangExpense = formik.values.kandangExpenses.find(
+      const isKandangExistInCostPerKandangs = newCostPerKandangs.find(
-        (kandangExpenseItem) => kandangExpenseItem.kandangId === kandangItem.id
+        (costPerKandangItem) => costPerKandangItem.kandang_id === kandangItem.id
       );
 
-      if (isKandangExistInKandangExpense) return;
+      if (isKandangExistInCostPerKandangs) return;
 
-      formik.values.kandangExpenses.push({
+      newCostPerKandangs.push({
-        kandangId: kandangItem.id,
+        kandang_id: kandangItem.id,
-        expenses: [
+        cost_items: [
           {
             nonstock: undefined,
-            totalExpense: undefined,
+            quantity: undefined,
-            totalQuantity: undefined,
+            total_cost: undefined,
             notes: '',
           },
         ],
       });
     });
+
+    // prune cost_per_kandangs
+    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
+    const deletedCostPerKandangsIdx: number[] = [];
+
+    newCostPerKandangs.forEach((costPerKandang, idx) => {
+      const isCostPerKandangValid = kandangIds.has(costPerKandang.kandang_id);
+
+      if (!isCostPerKandangValid) {
+        deletedCostPerKandangsIdx.push(idx);
+      }
+    });
+
+    deletedCostPerKandangsIdx.forEach((deletedCostPerKandangIdx) => {
+      newCostPerKandangs.splice(deletedCostPerKandangIdx, 1);
+    });
+
+    formik.setFieldValue('cost_per_kandangs', newCostPerKandangs);
   };
 
-  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('vendor', true);
+    formik.setFieldTouched('supplier', true);
-    formik.setFieldValue('vendor', val);
+    formik.setFieldValue('supplier', val);
   };
 
   const requestDocumentsChangeHandler = (val: File[]) => {
-    formik.setFieldTouched('request_documents', true);
+    formik.setFieldTouched('documents', true);
-    formik.setFieldValue('request_documents', val);
+    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 = () => {
@@ -218,10 +294,6 @@ const ExpenseRequestForm = ({
     formikSetValues(getExpenseFormInitialValues(initialValues));
   }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
 
-  useEffect(() => {
-    formik.setFieldValue('kandangs', undefined);
-  }, [formik.values.location]);
-
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -248,6 +320,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
@@ -257,7 +348,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
@@ -267,7 +358,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',
               }}
             />
 
@@ -285,9 +376,9 @@ const ExpenseRequestForm = ({
               label='Vendor'
               required
               placeholder='Pilih Vendor'
-              value={formik.values.vendor}
+              value={formik.values.supplier}
-              onChange={vendorChangeHandler}
+              onChange={supplierChangeHandler}
-              options={vendorOptions}
+              options={supplierOptions}
               isLoading={isLoadingVendorOptions}
               onInputChange={setVendorInputValue}
               className={{ wrapper: 'col-span-12' }}
@@ -295,9 +386,10 @@ const ExpenseRequestForm = ({
 
             <DropFileInput
               label='Dokumen Pengajuan'
-              name='request_documents'
+              name='documents'
-              values={formik.values.request_documents}
+              values={formik.values.documents}
               onChange={requestDocumentsChangeHandler}
+              onDelete={requestDocumentsDeleteHandler}
               accept={{
                 ...ACCEPTED_FILE_TYPE.PDF,
                 ...ACCEPTED_FILE_TYPE.IMAGE,
@@ -308,6 +400,55 @@ const ExpenseRequestForm = ({
               }}
             />
 
+            {formik.values.existing_documents &&
+              formik.values.existing_documents.length > 0 && (
+                <div className='w-full col-span-12'>
+                  <ul className='pl-4 list-disc'>
+                    {formik.values.existing_documents.map(
+                      (existingDocument, existingDocumentIdx) => (
+                        <li key={existingDocumentIdx}>
+                          <div className='w-full flex flex-wrap justify-between'>
+                            <Link
+                              href={existingDocument.url}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-blue-500 underline'
+                            >
+                              {existingDocument.name}{' '}
+                              <Icon
+                                icon='cuida:open-in-new-tab-outline'
+                                width={12}
+                                height={12}
+                                className='inline'
+                              />
+                            </Link>
+
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              color='error'
+                              onClick={() => {
+                                deleteDocumentClickHandler(
+                                  existingDocumentIdx,
+                                  existingDocument.id
+                                );
+                              }}
+                              className='p-1 rounded-full text-error focus-visible:text-error-content hover:text-error-content'
+                            >
+                              <Icon
+                                icon='fluent:delete-12-regular'
+                                width={20}
+                                height={20}
+                              />
+                            </Button>
+                          </div>
+                        </li>
+                      )
+                    )}
+                  </ul>
+                </div>
+              )}
+
             <ExpenseRequestKandangDetailExpense
               formik={formik}
               className={{
@@ -353,6 +494,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', {
@@ -375,17 +527,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>
 

src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx

@@ -41,28 +41,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     val: OptionType | OptionType[] | null
   ) => {
     formik.setFieldTouched(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       true
     );
     formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       val
     );
   };
 
   const addExpenseItemHandler = (kandangExpenseIdx: number) => {
     const newExpensesValue = [
-      ...formik.values.kandangExpenses[kandangExpenseIdx].expenses,
+      ...formik.values.cost_per_kandangs[kandangExpenseIdx].cost_items,
       {
         nonstock: undefined,
-        totalExpense: undefined,
+        total_cost: undefined,
-        totalQuantity: undefined,
+        quantity: undefined,
         notes: '',
       },
     ];
 
     formik.setFieldValue(
-      `kandangExpenses[${kandangExpenseIdx}].expenses`,
+      `cost_per_kandangs[${kandangExpenseIdx}].cost_items`,
       newExpensesValue
     );
   };
@@ -71,27 +71,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
-    const path = `kandangExpenses[${kandangExpenseIdx}].expenses`;
+    const path = `cost_per_kandangs[${kandangExpenseIdx}].cost_items`;
 
     // trims values, errors, and touched at expenseIdx
     removeArrayItemAndSync(formik, path, expenseIdx);
   };
 
   const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'totalQuantity' | 'totalExpense' | 'notes',
+    column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
     return (
-      formik.touched.kandangExpenses?.[kandangExpenseIdx]?.expenses?.[
+      formik.touched.cost_per_kandangs?.[kandangExpenseIdx]?.cost_items?.[
         expenseIdx
       ]?.[column] &&
       Boolean(
-        formik.errors.kandangExpenses?.[kandangExpenseIdx] instanceof Object &&
+        formik.errors.cost_per_kandangs?.[kandangExpenseIdx] instanceof
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+          Object &&
+          formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ] instanceof Object &&
-          formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
+          formik.errors.cost_per_kandangs?.[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.cost_per_kandangs.length === 0 ||
+          !formik.values.supplier?.value) && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
               Pilih kandang terlebih dahulu!
@@ -120,163 +122,171 @@ const ExpenseRequestKandangDetailExpense: React.FC<
           </div>
         )}
 
-        {formik.values.kandangExpenses.map(
+        {formik.values.cost_per_kandangs.length > 0 &&
-          (kandangExpense, kandangExpenseIdx) => {
+          formik.values.supplier?.value &&
-            const kandangName = formik.values.kandangs?.find(
+          formik.values.cost_per_kandangs.map(
-              (kandang) => kandang.id === kandangExpense.kandangId
+            (kandangExpense, kandangExpenseIdx) => {
-            );
+              const kandangName = formik.values.kandangs?.find(
+                (kandang) => kandang.id === kandangExpense.kandang_id
+              );
 
-            return (
+              return (
-              kandangName?.name && (
+                kandangName?.name && (
-                <div
+                  <div
-                  key={`kandangExpense-${kandangExpenseIdx}`}
+                    key={`kandangExpense-${kandangExpenseIdx}`}
-                  className='w-full flex flex-col gap-4'
+                    className='w-full flex flex-col gap-4'
-                >
+                  >
-                  <div>
+                    <div>
-                    <h5 className='mb-2 text-lg font-bold text-center'>
+                      <h5 className='mb-2 text-lg font-bold text-center'>
-                      Biaya {kandangName?.name}
+                        Biaya {kandangName?.name}
-                    </h5>
+                      </h5>
 
-                    <div className='overflow-x-auto'>
+                      <div className='overflow-x-auto'>
-                      <table className='table'>
+                        <table className='table'>
-                        <thead>
+                          <thead>
-                          <tr>
+                            <tr>
-                            <th>Nonstock</th>
+                              <th>Nonstock</th>
-                            <th>Total Kuantitas</th>
+                              <th>Total Kuantitas</th>
-                            <th>Total Biaya</th>
+                              <th>Total Biaya</th>
-                            <th>Catatan</th>
+                              <th>Catatan</th>
-                            {type !== 'detail' && <th>Aksi</th>}
+                              {type !== 'detail' && <th>Aksi</th>}
-                          </tr>
+                            </tr>
-                        </thead>
+                          </thead>
 
-                        <tbody>
+                          <tbody>
-                          {kandangExpense.expenses.map(
+                            {kandangExpense.cost_items.map(
-                            (expenseItem, expenseIdx) => (
+                              (expenseItem, expenseIdx) => (
-                              <tr key={`expense-${expenseIdx}`}>
+                                <tr key={`expense-${expenseIdx}`}>
-                                <td className='p-2'>
+                                  <td className='p-2'>
-                                  <SelectInput
+                                    <SelectInput
-                                    placeholder='Pilih Nonstock'
+                                      placeholder='Pilih Nonstock'
-                                    value={expenseItem.nonstock}
+                                      value={expenseItem.nonstock}
-                                    onChange={(val) => {
+                                      onChange={(val) => {
-                                      nonstockChangeHandler(
+                                        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
-                                    )}
-                                    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(
                                           kandangExpenseIdx,
-                                          expenseIdx
+                                          expenseIdx,
-                                        )
+                                          val
-                                      }
+                                        );
-                                    >
+                                      }}
-                                      <Icon
+                                      options={nonstockOptions}
-                                        icon='material-symbols:delete-outline-rounded'
+                                      isLoading={isLoadingNonstockOptions}
-                                        width={24}
+                                      onInputChange={setNonstockInputValue}
-                                        height={24}
+                                      className={{ wrapper: 'min-w-48' }}
-                                      />
+                                    />
-                                    </Button>
                                   </td>
-                                )}
-                              </tr>
-                            )
-                          )}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
 
-                  {type !== 'detail' && (
+                                  <td className='p-2'>
-                    <Button
+                                    <NumberInput
-                      type='button'
+                                      required
-                      variant='outline'
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
-                      color='success'
+                                      placeholder='Masukkan Total Kuantitas'
-                      onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
+                                      value={
-                      className='w-fit mx-auto'
+                                        formik.values.cost_per_kandangs[
-                    >
+                                          kandangExpenseIdx
-                      <Icon icon='ic:round-plus' width={24} height={24} />{' '}
+                                        ].cost_items[expenseIdx].quantity ?? ''
-                      Tambah
+                                      }
-                    </Button>
+                                      onChange={formik.handleChange}
-                  )}
+                                      onBlur={formik.handleBlur}
-                </div>
+                                      isError={isExpenseRepeaterInputError(
-              )
+                                        'quantity',
-            );
+                                        kandangExpenseIdx,
-          }
+                                        expenseIdx
-        )}
+                                      )}
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <NumberInput
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
+                                      placeholder='Masukkan Total Biaya'
+                                      value={
+                                        formik.values.cost_per_kandangs[
+                                          kandangExpenseIdx
+                                        ].cost_items[expenseIdx].total_cost ??
+                                        ''
+                                      }
+                                      onChange={formik.handleChange}
+                                      onBlur={formik.handleBlur}
+                                      isError={isExpenseRepeaterInputError(
+                                        'total_cost',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      inputPrefix={
+                                        <span className='text-gray-600 font-medium'>
+                                          Rp
+                                        </span>
+                                      }
+                                      className={{ wrapper: 'min-w-24' }}
+                                    />
+                                  </td>
+
+                                  <td className='p-2'>
+                                    <TextInput
+                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                      placeholder='Tuliskan catatan'
+                                      value={
+                                        formik.values.cost_per_kandangs[
+                                          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>
   );

src/components/pages/expense/pdf/ExpensePDF.tsx

@@ -0,0 +1,651 @@
+'use client';
+
+import {
+  Document,
+  Image,
+  Link,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+
+import { Expense } from '@/types/api/expense';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+
+interface ExpensePDFProps {
+  expense?: Expense;
+}
+
+const ExpensePDFStyle = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 32,
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 12,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 16,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+
+    position: 'absolute',
+    fontSize: 10,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // wrapper
+  generalInfoTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+
+  generalInfoTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+
+  // columns
+  generalInfoTableColLabel: {
+    width: '30%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  generalInfoTableColSeparator: {
+    width: '3%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 6,
+  },
+  generalInfoTableColValue: {
+    width: '67%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  generalInfoTableLabelText: {
+    fontWeight: 'bold',
+  },
+  generalInfoTableValueText: {},
+
+  // expense detail table
+  expenseDetailContainer: {
+    width: '100%',
+    marginTop: 12,
+  },
+  expenseDetailTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseContainer: {
+    width: '100%',
+    marginTop: 8,
+  },
+  kandangExpenseTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+  kandangExpenseTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+  kandangExpenseTableColLabel: {
+    width: '20%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  kandangExpenseTableColLabelBorderRight: {
+    borderRight: '1px solid #000000',
+  },
+  kandangExpenseTableColNonstock: {
+    width: '20%',
+  },
+  kandangExpenseTableColNote: {
+    width: '40%',
+  },
+  kandangExpenseHeaderLabelText: {
+    fontWeight: 'bold',
+  },
+  kandangExpenseLabelText: {
+    fontSize: 10,
+  },
+  kandangExpenseTableFooterColTotalExpenseCaption: {
+    width: '40%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    textAlign: 'right',
+  },
+  kandangExpenseTableFooterColTotalExpenseValue: {
+    width: '60%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  // utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
+  },
+});
+
+const ExpensePDF = ({ expense }: ExpensePDFProps) => {
+  const isLatestApprovalRejected =
+    expense?.latest_approval?.action === 'REJECTED';
+  const isExpenseRealized =
+    expense?.latest_approval?.step_number &&
+    expense?.latest_approval.step_number >= 4;
+
+  const realizationStatus = isExpenseRealized
+    ? 'Sudah Realisasi'
+    : 'Belum Realisasi';
+
+  const rows = [
+    { label: 'Nomor PO', value: expense?.po_number },
+    { label: 'Nomor Referensi', value: expense?.reference_number },
+    {
+      label: 'Kategori',
+      value:
+        expense?.category === 'BOP'
+          ? 'Biaya Operasional'
+          : expense?.category === 'NON-BOP'
+            ? 'Non Biaya Operasional'
+            : '',
+    },
+    { label: 'Lokasi', value: expense?.location.name },
+    {
+      label: 'Kandang',
+      value: expense?.kandangs.map((item) => item.name).join(', '),
+    },
+    { label: 'Vendor', value: expense?.supplier.name },
+    {
+      label: 'Tanggal Transaksi',
+      value: formatDate(expense?.expense_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.total_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}
+                      >
+                        Total Biaya
+                      </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.total_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.total_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}
+                      >
+                        Total Biaya
+                      </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.total_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;

src/components/pages/expense/pdf/ExpensePDFButton.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { pdf } from '@react-pdf/renderer';
+
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import ExpensePDF from '@/components/pages/expense/pdf/ExpensePDF';
+
+import { Expense } from '@/types/api/expense';
+
+interface ExpensePDFPreviewButtonProps {
+  expense?: Expense;
+}
+
+const ExpensePDFPreviewButton = ({ expense }: ExpensePDFPreviewButtonProps) => {
+  const openPdf = async () => {
+    const expensePdfBlob = await pdf(<ExpensePDF expense={expense} />).toBlob();
+
+    const expensePdfUrl = URL.createObjectURL(expensePdfBlob);
+    window.open(expensePdfUrl, '_blank');
+  };
+
+  const downloadPdf = async () => {
+    const blob = await pdf(<ExpensePDF expense={expense} />).toBlob();
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${expense?.po_number}.pdf`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className='w-fit flex flex-col'>
+      <Button onClick={downloadPdf} className='text-xs'>
+        <Icon icon='bx:file' width={16} height={16} />
+        {expense?.po_number}
+      </Button>
+
+      <Button
+        onClick={openPdf}
+        variant='link'
+        className='p-0 mt-1 text-xs justify-start'
+      >
+        Lihat Dokumen
+      </Button>
+    </div>
+  );
+};
+
+export default ExpensePDFPreviewButton;

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -71,9 +71,8 @@ const InventoryAdjustmentForm = ({
     Partial<InventoryAdjustmentFormValues>
   >(() => {
     return {
-      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_id: initialValues?.product_warehouse?.product_id ?? 0,
-      product_id: initialValues?.product?.id ?? 0,
+      warehouse_id: initialValues?.product_warehouse?.warehouse_id ?? 0,
-      warehouse_id: initialValues?.warehouse?.id ?? 0,
       product_category: undefined,
       product: undefined,
       warehouse: undefined,

src/components/pages/inventory/movement/MovementTable.tsx

@@ -1,24 +1,44 @@
 'use client';
 
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import useSWR from 'swr';
-import { SortingState } from '@tanstack/react-table';
+import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
 
 import Table from '@/components/Table';
-import { useModal } from '@/components/Modal';
+import { Icon } from '@iconify/react';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { Movement } from '@/types/api/inventory/movement';
 import { MovementApi } from '@/services/api/inventory';
 import { cn } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { TableToolbar } from '@/components/table/TableToolbar';
-import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { OptionType } from '@/components/input/SelectInput';
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import { TableRowOptions } from '@/components/table/TableRowOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Movement, unknown>;
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <Button
+      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+  </RowOptionsMenuWrapper>
+);
 
 const MovementTable = () => {
   const {
@@ -28,30 +48,24 @@ const MovementTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '' },
+    initial: {
-    paramMap: { page: 'page', pageSize: 'limit' },
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
   });
 
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedMovement, setSelectedMovement] = useState<
-    Movement | undefined
-  >(undefined);
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const deleteModal = useModal();
+  const { data: movements, isLoading } = useSWR(
-
-  const {
-    data: movements,
-    isLoading,
-    mutate: refreshMovements,
-  } = useSWR(
     `${MovementApi.basePath}${getTableFilterQueryString()}`,
     MovementApi.getAllFetcher
   );
 
-  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
-    setPage(1);
   };
 
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -60,167 +74,143 @@ const MovementTable = () => {
     setPage(1);
   };
 
-  const confirmationModalDeleteClickHandler = async () => {
+  const movementColumns: ColumnDef<Movement>[] = [
-    setIsDeleteLoading(true);
+    {
-    try {
+      header: '#',
-      await MovementApi.delete(selectedMovement?.id as number);
+      cell: (props) =>
-      refreshMovements();
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
-      deleteModal.closeModal();
+        props.row.index +
-    } finally {
+        1,
-      setIsDeleteLoading(false);
+    },
-    }
+    {
-  };
+      accessorFn: (row) => row.source_warehouse?.name,
+      header: 'Gudang Asal',
+    },
+    {
+      accessorFn: (row) => row.destination_warehouse?.name,
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'transfer_reason',
+      header: 'Catatan',
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal',
+      cell: (props) =>
+        new Date(props.row.original.transfer_date).toLocaleDateString('id-ID'),
+    },
+    {
+      accessorFn: (row) => {
+        const totalCost = row.deliveries?.reduce(
+          (sum, d) => sum + (d.shipping_cost_total || 0),
+          0
+        );
+        return totalCost?.toLocaleString('id-ID');
+      },
+      header: 'Biaya Pengiriman',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu type='dropdown' props={props} />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu type='collapse' props={props} />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   return (
-    <div className='flex flex-col gap-4'>
+    <>
-      <div className='flex flex-col gap-2 mb-4'>
+      <div className='w-full p-0 sm:p-4'>
-        <TableToolbar
+        <div className='flex flex-col gap-2 mb-4'>
-          addButton={{
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            href: '/inventory/movement/add',
+            <div className='w-full flex flex-row gap-2'>
-            label: 'Tambah',
+              <Button
+                href='/inventory/movement/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Movement'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex justify-end gap-4'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<Movement>
+          data={isResponseSuccess(movements) ? movements?.data : []}
+          columns={movementColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(movements) && movements?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
           }}
-          search={{
-            value: tableFilterState.search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Movement',
-          }}
-        />
-        <TableRowSizeSelector
-          value={tableFilterState.pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
         />
       </div>
-
+    </>
-      <Table<Movement>
-        data={isResponseSuccess(movements) ? movements?.data : []}
-        columns={[
-          {
-            header: '#',
-            cell: (props) =>
-              tableFilterState.pageSize * (tableFilterState.page - 1) +
-              props.row.index +
-              1,
-          },
-          {
-            accessorFn: (row) => row.source_warehouse?.name,
-            header: 'Gudang Asal',
-          },
-          {
-            accessorFn: (row) => row.destination_warehouse?.name,
-            header: 'Gudang Tujuan',
-          },
-          {
-            accessorKey: 'transfer_reason',
-            header: 'Catatan',
-          },
-          {
-            accessorKey: 'transfer_date',
-            header: 'Tanggal',
-            cell: (props) =>
-              new Date(props.row.original.transfer_date).toLocaleDateString(
-                'id-ID'
-              ),
-          },
-          {
-            accessorFn: (row) => {
-              const totalCost = row.deliveries?.reduce(
-                (sum, d) => sum + (d.shipping_cost_total || 0),
-                0
-              );
-              return totalCost?.toLocaleString('id-ID');
-            },
-            header: 'Biaya Pengiriman',
-          },
-          {
-            header: 'Aksi',
-            cell: (props) => {
-              const currentPageSize =
-                props.table.getPaginationRowModel().rows.length;
-              const currentPageRows =
-                props.table.getPaginationRowModel().flatRows;
-              const currentRowRelativeIndex =
-                currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-              const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-              const deleteClickHandler = () => {
-                setSelectedMovement(props.row.original);
-                deleteModal.openModal();
-              };
-
-              return (
-                <>
-                  {currentPageSize > 2 && (
-                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                      <TableRowOptions
-                        type='dropdown'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
-                    </RowDropdownOptions>
-                  )}
-
-                  {currentPageSize <= 2 && (
-                    <RowCollapseOptions>
-                      <TableRowOptions
-                        type='collapse'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
-                    </RowCollapseOptions>
-                  )}
-                </>
-              );
-            },
-          },
-        ]}
-        pageSize={tableFilterState.pageSize}
-        page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
-        totalItems={
-          isResponseSuccess(movements) ? movements?.meta?.total_results : 0
-        }
-        onPageChange={setPage}
-        isLoading={isLoading}
-        sorting={sorting}
-        setSorting={setSorting}
-        className={{
-          containerClassName: cn({
-            'mb-20':
-              isResponseSuccess(movements) && movements?.data?.length === 0,
-          }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
-        }}
-      />
-
-      <ConfirmationModal
-        ref={deleteModal.ref}
-        type='error'
-        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
-        }}
-      />
-    </div>
   );
 };
 

src/components/pages/inventory/movement/form/MovementForm.schema.ts

@@ -1,34 +1,82 @@
 import * as Yup from 'yup';
 import { Movement } from '@/types/api/inventory/movement';
 
+type MovementFormSchemaType = {
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse?: {
+    value: number;
+    label: string;
+    area?: string;
+    location?: string;
+  } | null;
+  source_warehouse_id: number;
+  destination_warehouse?: {
+    value: number;
+    label: string;
+    area?: string;
+    location?: string;
+  } | null;
+  destination_warehouse_id: number;
+  products: {
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_qty: number | string;
+  }[];
+  deliveries: {
+    delivery_cost?: number | string;
+    delivery_cost_per_item?: number | string;
+    document?: File | string | null;
+    document_path?: string | null;
+    driver_name: string;
+    vehicle_plate: string;
+    supplier?: {
+      value: number;
+      label: string;
+    } | null;
+    supplier_id: number;
+    products: {
+      product?: {
+        value: number;
+        label: string;
+      } | null;
+      product_id: number;
+      product_qty: number | string;
+    }[];
+  }[];
+};
+
 export type ProductSchema = {
-  product: {
+  product?: {
     value: number;
     label: string;
   } | null;
   product_id: number;
-  product_qty: number;
+  product_qty: number | string;
 };
 
 export type DeliverySchema = {
-  delivery_cost?: number | undefined;
+  delivery_cost?: number | string;
-  delivery_cost_per_item?: number | undefined;
+  delivery_cost_per_item?: number | string;
   document?: File | string | null;
   document_path?: string | null;
   driver_name: string;
   vehicle_plate: string;
-  supplier: {
+  supplier?: {
     value: number;
     label: string;
   } | null;
   supplier_id: number;
   products: {
-    product: {
+    product?: {
       value: number;
       label: string;
     } | null;
     product_id: number;
-    product_qty: number;
+    product_qty: number | string;
   }[];
 };
 
@@ -102,38 +150,47 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .required('Produk wajib diisi!'),
 });
 
-export const MovementFormSchema = Yup.object({
+export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
-  transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  Yup.object({
-  transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+    transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
-  source_warehouse: Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
-    value: Yup.number().min(1).required(),
+    source_warehouse: Yup.object({
-    label: Yup.string().required(),
+      value: Yup.number().min(1).required(),
-    area: Yup.string().optional(),
+      label: Yup.string().required(),
-    location: Yup.string().optional(),
+      area: Yup.string().optional(),
-  }).nullable(),
+      location: Yup.string().optional(),
-  source_warehouse_id: Yup.number()
+    }).nullable(),
-    .required('Gudang asal wajib diisi!')
+    source_warehouse_id: Yup.number()
-    .typeError('Gudang asal wajib diisi!'),
+      .required('Gudang asal wajib diisi!')
-  destination_warehouse: Yup.object({
+      .typeError('Gudang asal wajib diisi!'),
-    value: Yup.number().min(1).required(),
+    destination_warehouse: Yup.object({
-    label: Yup.string().required(),
+      value: Yup.number().min(1).required(),
-    area: Yup.string().optional(),
+      label: Yup.string().required(),
-    location: Yup.string().optional(),
+      area: Yup.string().optional(),
-  }).nullable(),
+      location: Yup.string().optional(),
-  destination_warehouse_id: Yup.number()
+    }).nullable(),
-    .required('Gudang tujuan wajib diisi!')
+    destination_warehouse_id: Yup.number()
-    .typeError('Gudang tujuan wajib diisi!'),
+      .required('Gudang tujuan wajib diisi!')
-  products: Yup.array()
+      .typeError('Gudang tujuan wajib diisi!')
-    .of(ProductObjectSchema)
+      .test(
-    .min(1, 'Minimal harus ada 1 produk!')
+        'different-warehouse',
-    .required('Produk wajib diisi!'),
+        'Gudang tujuan tidak boleh sama dengan gudang asal!',
-  deliveries: Yup.array()
+        function (value) {
-    .of(DeliveryObjectSchema)
+          const { source_warehouse_id } = this.parent;
-    .min(1, 'Minimal harus ada 1 pengiriman!')
+          return (
-    .required('Pengiriman wajib diisi!'),
+            !value || !source_warehouse_id || value !== source_warehouse_id
-});
+          );
-
+        }
-export const UpdateMovementFormSchema = MovementFormSchema;
+      ),
+    products: Yup.array()
+      .of(ProductObjectSchema)
+      .min(1, 'Minimal harus ada 1 produk!')
+      .required('Produk wajib diisi!'),
+    deliveries: Yup.array()
+      .of(DeliveryObjectSchema)
+      .min(1, 'Minimal harus ada 1 pengiriman!')
+      .required('Pengiriman wajib diisi!'),
+  });
 
 export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 

src/components/pages/inventory/movement/form/useMovementFormHandlers.ts

@@ -1,95 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'react-hot-toast';
-import { useModal } from '@/components/Modal';
-import { MovementApi } from '@/services/api/inventory';
-import {
-  CreateMovementPayload,
-  UpdateMovementPayload,
-} from '@/types/api/inventory/movement';
-import { isResponseError } from '@/lib/api-helper';
-
-export const useMovementFormHandlers = (initialValuesId?: number) => {
-  const router = useRouter();
-  const deleteModal = useModal();
-  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const createMovementHandler = useCallback(
-    async (payload: CreateMovementPayload, documents: File[] = []) => {
-      const formData = new FormData();
-      formData.append('data', JSON.stringify(payload));
-      documents.forEach((file, index) => {
-        formData.append(`documents[${index}]`, file);
-      });
-
-      const res = await MovementApi.create(
-        formData as unknown as CreateMovementPayload
-      );
-      if (isResponseError(res)) {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
-
-  const updateMovementHandler = useCallback(
-    async (
-      movementId: number,
-      payload: UpdateMovementPayload,
-      documents: File[] = []
-    ) => {
-      let finalPayload: UpdateMovementPayload | FormData;
-
-      if (documents.length > 0) {
-        const formData = new FormData();
-        formData.append('data', JSON.stringify(payload));
-        documents.forEach((file, index) => {
-          formData.append(`documents[${index}]`, file);
-        });
-
-        finalPayload = formData as unknown as UpdateMovementPayload;
-      } else {
-        finalPayload = payload;
-      }
-
-      const res = await MovementApi.update(movementId, finalPayload);
-      if (res?.status === 'error') {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.refresh();
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
-
-  const deleteMovementClickHandler = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
-
-  const confirmationModalDeleteClickHandler = useCallback(async () => {
-    if (!initialValuesId) return;
-
-    setIsDeleteLoading(true);
-    await MovementApi.delete(initialValuesId);
-    deleteModal.closeModal();
-    toast.success('Successfully delete Movement!');
-    setIsDeleteLoading(false);
-    router.push('/inventory/movement');
-  }, [deleteModal, initialValuesId, router]);
-
-  return {
-    deleteModal,
-    movementFormErrorMessage,
-    isDeleteLoading,
-    createMovementHandler,
-    updateMovementHandler,
-    deleteMovementClickHandler,
-    confirmationModalDeleteClickHandler,
-  };
-};

src/components/pages/marketing/MarketingTable.tsx

@@ -0,0 +1,625 @@
+'use client';
+
+import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseSalesOrder, Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { CellContext, Row } from '@tanstack/react-table';
+import { useRouter } from 'next/navigation';
+import { useCallback, useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+  deliveryClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Marketing, unknown>;
+  deleteClickHandler: () => void;
+  deliveryClickHandler?: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`/marketing/detail?marketingId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+        {props.row.original.latest_approval.step_number != 1 && (
+          <Button
+            href={
+              props.row.original.latest_approval.step_number == 3
+                ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                : props.row.original.latest_approval.step_number == 2
+                  ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                  : undefined
+            }
+            onClick={() => {
+              if (props.row.original.latest_approval.step_number == 2) {
+                deliveryClickHandler?.();
+              }
+            }}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:truck' width={16} height={16} />
+            Deliver
+          </Button>
+        )}
+        {props.row.original.latest_approval.step_number != 3 && (
+          <Button
+            href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:pencil-outline' width={16} height={16} />
+            Edit
+          </Button>
+        )}
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
+        >
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const MarketingTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [approveAction, setApproveAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const router = useRouter();
+
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const productsModal = useModal();
+  const deliveryModal = useModal();
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  const approveClickHandler = () => {
+    setApproveAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
+  const deleteMarketingHandler = async () => {
+    const deleteMarketingRes = await MarketingApi.delete(
+      selectedItem?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.success(deleteMarketingRes?.message as string);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.error(deleteMarketingRes?.message as string);
+    }
+    refreshMarketing();
+    deleteModal.closeModal();
+  };
+
+  const allData = isResponseSuccess(marketing) ? marketing.data : [];
+  const selectedRowsData = allData.filter(
+    (row) => rowSelection[row.id.toString()]
+  );
+
+  const hasApprovable = selectedRowsData.some(
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
+  );
+  const hasRejectable = selectedRowsData.some(
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
+  );
+
+  const disableApprove = !hasApprovable;
+  const disableReject = !hasRejectable;
+
+  const idsToProcess =
+    approveAction === 'APPROVED'
+      ? selectedRowsData
+          .filter((row) => row.latest_approval.step_number === 1)
+          .map((row) => row.id)
+      : selectedRowsData
+          .filter((row) => row.latest_approval.step_number === 2)
+          .map((row) => row.id);
+
+  const approveMarketingHandler = async (notes: string) => {
+    let idsToProcess: number[] = [];
+
+    idsToProcess = selectedRowsData
+      .filter((row) => row.latest_approval.step_number === 1)
+      .map((row) => row.id);
+
+    if (idsToProcess.length === 0) {
+      toast.error(`Tidak ada data yang valid untuk di ${approveAction}.`);
+      confirmationModal.closeModal();
+      return;
+    }
+
+    const approveMarketingRes = await SalesOrderApi.bulkApprovals(
+      idsToProcess,
+      approveAction,
+      notes
+    );
+
+    if (isResponseSuccess(approveMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.success(approveMarketingRes?.message as string);
+      setRowSelection({});
+    }
+    if (isResponseError(approveMarketingRes)) {
+      confirmationModal.closeModal();
+      toast.error(approveMarketingRes?.message as string);
+    }
+    refreshMarketing();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    const res = await SalesOrderApi.delivery(selectedItem?.id as number, notes);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refreshMarketing?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${selectedItem?.id}`
+    );
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const getRowCanSelect = (row: Row<Marketing>): boolean => {
+    const approval = row.original.latest_approval;
+    return approval?.step_number === 1 && approval?.action !== 'REJECTED';
+  };
+
+  return (
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <TableToolbar
+            addButton={{
+              href: '/marketing/add/sales-orders',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+              disabled={disableApprove}
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+              disabled={disableReject}
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          >
+            {/* select multiple product */}
+            <SelectInput
+              label='Product'
+              isClearable
+              placeholder='Pilih product'
+              options={[]}
+              isMulti
+            />
+            {/* select status */}
+            <SelectInput
+              label='Status'
+              isClearable
+              placeholder='Pilih status'
+              options={[]}
+            />
+            {/* select customer */}
+            <SelectInput
+              label='Customer'
+              isClearable
+              placeholder='Pilih customer'
+              options={[]}
+            />
+          </TableRowSizeSelector>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={allData}
+          columns={[
+            {
+              id: 'select',
+              header: ({ table }) => {
+                const allRows = table.getRowModel().rows;
+                const selectableRows = allRows.filter(getRowCanSelect);
+
+                const allSelected =
+                  selectableRows.length > 0 &&
+                  selectableRows.every((row) => row.getIsSelected());
+
+                const someSelected =
+                  selectableRows.some((row) => row.getIsSelected()) &&
+                  !allSelected;
+
+                const toggleSelectableRows = () => {
+                  const shouldSelect = !allSelected;
+                  selectableRows.forEach((row) =>
+                    row.toggleSelected(shouldSelect)
+                  );
+                };
+
+                return (
+                  <div className='w-full flex flex-row justify-center'>
+                    <CheckboxInput
+                      name='allRow'
+                      checked={allSelected}
+                      indeterminate={someSelected}
+                      onChange={toggleSelectableRows}
+                      disabled={selectableRows.length === 0}
+                    />
+                  </div>
+                );
+              },
+              cell: ({ row }) => {
+                const canSelect = getRowCanSelect(row);
+                return (
+                  <div>
+                    <CheckboxInput
+                      name='row'
+                      checked={row.getIsSelected()}
+                      disabled={!canSelect}
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
+                    />
+                  </div>
+                );
+              },
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+              cell: (props) => {
+                return formatDate(props.row.original.so_date, 'DD MMM yyyy');
+              },
+            },
+            {
+              accessorKey: 'latest_approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorFn: (row) =>
+                row.sales_order
+                  ?.map((product) => product.total_price)
+                  .reduce((a, b) => a + b, 0) ?? 0,
+              header: 'Grand Total',
+              cell: (props) => {
+                return formatCurrency(
+                  props.row.original?.sales_order
+                    ?.map((product) => product.total_price)
+                    .reduce((a, b) => a + b, 0) ?? 0
+                );
+              },
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => {
+                if (props?.row?.original?.sales_order?.length) {
+                  if (props?.row?.original?.sales_order?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.sales_order?.length} Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.sales_order[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                const currentPageSize =
+                  props.table.getPaginationRowModel().rows.length;
+                const currentPageRows =
+                  props.table.getPaginationRowModel().flatRows;
+                const currentRowRelativeIndex =
+                  currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                const isLast2Rows =
+                  currentRowRelativeIndex > currentPageSize - 2;
+
+                const deleteClickHandler = () => {
+                  setSelectedItem(props.row.original);
+                  deleteModal.openModal();
+                };
+
+                const deliveryClickHandler = () => {
+                  setSelectedItem(props.row.original);
+                  deliveryModal.openModal();
+                };
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                          deliveryClickHandler={deliveryClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                          deliveryClickHandler={deliveryClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+        }}
+      />
+
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approveAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan (${idsToProcess.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: confirmationModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'APPROVED' ? 'success' : 'error',
+          onClick: approveMarketingHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: deleteModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ${selectedItem?.so_number}?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<BaseSalesOrder>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.sales_order ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+export default MarketingTable;

src/components/pages/marketing/detail/MarketingDetail.tsx

@@ -0,0 +1,477 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import {
+  BaseDelivery,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+
+const MarketingDetail = ({
+  initialValues,
+  refresh,
+}: {
+  initialValues?: Marketing;
+  refresh?: () => void;
+}) => {
+  const router = useRouter();
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [grandTotal, setGrandTotal] = useState(
+    initialValues?.sales_order
+      ?.map((item) => item.total_price)
+      .reduce((a, b) => a + b, 0)
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+  const {
+    approvals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.latest_approval,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: initialValues?.id as number as unknown as string,
+  });
+
+  const approveClickHandler = () => {
+    setApprovalAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    const res = await MarketingApi.delete(initialValues?.id as number);
+    deleteModal.closeModal();
+    router.push('/marketing');
+    toast.success(res?.message as string);
+    refresh?.();
+    setIsLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction,
+      notes
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.delivery(
+      initialValues?.id as number,
+      notes
+    );
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+    );
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader title='Detail Sales Order' backUrl='/marketing' />
+        {!isLoadingApproval && approvals && (
+          <ApprovalSteps approvals={approvals} />
+        )}
+        <div className='flex-row flex gap-3'>
+          {initialValues?.latest_approval?.step_number == 1 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.latest_approval?.step_number != 1 && (
+            <Button
+              color='success'
+              href={
+                initialValues?.latest_approval?.step_number == 3
+                  ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                  : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+              }
+            >
+              <Icon icon='mdi:truck' width={24} height={24} />
+              {initialValues?.latest_approval?.step_number == 3
+                ? 'Edit '
+                : 'Tambah '}
+              Delivery Order
+            </Button>
+          )}
+        </div>
+
+        <Card
+          title='Informasi Penjualan'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.latest_approval?.step_name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>{formatCurrency(grandTotal as number)}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Dokumen</td>
+                  <td>:</td>
+                  <td>
+                    <SalesOrderExport data={initialValues} />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.sales_order && (
+          <Card
+            title='Informasi Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<BaseSalesOrder>
+              data={initialValues?.sales_order}
+              columns={[
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.sales_order &&
+                    initialValues?.sales_order?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        {initialValues?.delivery_order && (
+          <Card
+            title='Informasi Pengiriman'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            {initialValues?.delivery_order.map((delivery, index) => {
+              return (
+                <div key={index}>
+                  <Card
+                    className={{
+                      wrapper: 'w-full',
+                    }}
+                  >
+                    <div className='flex flex-row gap-3'>
+                      <div className='font-semibold'>
+                        Nomor DO : {delivery.do_number}
+                      </div>
+                    </div>
+                    <Table<BaseDelivery>
+                      data={delivery.deliveries}
+                      columns={[
+                        {
+                          header: 'Tanggal Pengiriman',
+                          accessorFn() {
+                            return formatDate(
+                              delivery.delivery_date,
+                              'DD MMM yyyy'
+                            );
+                          },
+                        },
+                        {
+                          header: 'No. Polisi',
+                          accessorFn(row) {
+                            return formatVechicleNumber(row.vehicle_number);
+                          },
+                        },
+                        {
+                          header: 'Kandang',
+                          accessorFn(row) {
+                            return row.product_warehouse.warehouse.name;
+                          },
+                        },
+                        {
+                          header: 'Produk',
+                          accessorFn(row) {
+                            return row.product_warehouse.product.name;
+                          },
+                        },
+                        {
+                          header: 'Harga Satuan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.unit_price);
+                          },
+                        },
+                        {
+                          header: 'Total Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.total_weight);
+                          },
+                        },
+                        {
+                          header: 'Kuantitas',
+                          accessorFn(row) {
+                            return formatNumber(row.qty);
+                          },
+                        },
+                        {
+                          header: 'Avg. Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.avg_weight);
+                          },
+                        },
+                        {
+                          header: 'Total Penjualan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.total_price);
+                          },
+                        },
+                      ]}
+                      className={{
+                        containerClassName: cn({
+                          'mb-20':
+                            initialValues?.sales_order &&
+                            initialValues?.sales_order?.length === 0,
+                        }),
+                        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                        tableClassName:
+                          'font-inter w-full table-auto min-h-full!',
+                        headerRowClassName: 'border-b border-b-gray-200',
+                        headerColumnClassName:
+                          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                        bodyRowClassName: 'border-b border-b-gray-200',
+                        bodyColumnClassName:
+                          'px-6 py-3 last:flex last:flex-row last:justify-end',
+                        paginationClassName: 'hidden',
+                      }}
+                    />
+                  </Card>
+                  <div className='flex flex-row gap-3 my-3'>
+                    <DeliveryOrderExport
+                      data={initialValues}
+                      deliveryOrder={delivery}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          {initialValues?.latest_approval?.step_number != 3 && (
+            <Button
+              color='warning'
+              type='button'
+              href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+            >
+              <Icon icon='mdi:pencil' width={24} height={24} />
+              Edit
+            </Button>
+          )}
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approvalAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingDetail;

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -0,0 +1,77 @@
+import * as Yup from 'yup';
+import {
+  SalesOrderProductFormValues,
+  SalesOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import {
+  DeliveryOrderProductFormValues,
+  DeliveryOrderProductSchema,
+} from './repeater/delivery-order/DeliverOrderProduct.schema';
+
+type MarketingSchemaType = {
+  customer_id: number | undefined;
+  sales_person_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  so_date: string | undefined;
+  notes: string | undefined;
+};
+
+type SalesOrderSchemaType = MarketingSchemaType & {
+  sales_order: SalesOrderProductFormValues[];
+};
+
+type DeliveryOrderSchemaType = {
+  delivery_order: DeliveryOrderProductFormValues[];
+};
+
+export const SalesOrderSchema: Yup.ObjectSchema<SalesOrderSchemaType> =
+  Yup.object({
+    customer_id: Yup.number().required('Customer wajib diisi!'),
+    sales_person_id: Yup.number().required('Sales Person wajib diisi!'),
+    customer: Yup.object({
+      value: Yup.number().required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    so_date: Yup.string().required('Tanggal wajib diisi!'),
+    notes: Yup.string().required('Catatan wajib diisi!'),
+    sales_order: Yup.array()
+      .of(SalesOrderProductSchema)
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
+  Yup.object({
+    delivery_order: Yup.array()
+      .min(1, 'Pengiriman wajib diisi!')
+      .required('Pengiriman wajib diisi!')
+      .test(
+        'at-least-one-valid-row',
+        'Minimal ada satu baris pengiriman yang valid!',
+        function (items) {
+          if (!items || items.length === 0) return false;
+
+          // VALIDASI: minimal 1 item valid full
+          const itemSchema = DeliveryOrderProductSchema;
+
+          const hasValidItem = items.some((item) => {
+            if (!item) return false;
+            return itemSchema.isValidSync(item, { abortEarly: true });
+          });
+
+          return hasValidItem;
+        }
+      ),
+  });
+
+export const UpdateSalesOrderSchema = SalesOrderSchema;
+
+export type SalesOrderFormValues = Yup.InferType<typeof SalesOrderSchema>;
+
+export type DeliveryOrderFormValues = Yup.InferType<typeof DeliveryOrderSchema>;

src/components/pages/marketing/form/MarketingForm.tsx

@@ -0,0 +1,802 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import Modal, { useModal } from '@/components/Modal';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import {
+  BaseDeliveryOrder,
+  BaseSalesOrder,
+  CreateDeliveryOrderPayload,
+  CreateSalesOrderPayload,
+  CreateSalesOrderProductPayload,
+  Marketing,
+  UpdateDeliveryOrderPayload,
+  UpdateSalesOrderPayload,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Customer } from '@/types/api/master-data/customer';
+import { CustomerApi } from '@/services/api/master-data';
+import { useFormik } from 'formik';
+import {
+  DeliveryOrderFormValues,
+  DeliveryOrderSchema,
+  SalesOrderFormValues,
+  SalesOrderSchema,
+} from './MarketingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  DeliveryOrderApi,
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { SalesOrderProductFormValues } from './repeater/sales-order/SalesOrderProduct.schema';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+import SalesOrderProductTable from './table-view/SalesOrderProductTable';
+import SalesOrderProductForm from './repeater/sales-order/SalesOrderProductForm';
+import DeliveryOrderProductTable from './table-view/DeliveryOrderProductTable';
+import DeliveryOrderProductForm from './repeater/delivery-order/DeliverOrderProduct';
+import { DeliveryOrderProductFormValues } from './repeater/delivery-order/DeliverOrderProduct.schema';
+import DebouncedTextArea from '@/components/input/DebouncedTextArea';
+
+const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
+const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
+const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
+const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
+
+// ================== EXTERNAL HELPER FUNCTION ==================
+export interface ProductCalculationFields {
+  qty: string | number | undefined;
+  unit_price: string | number | undefined;
+  total_price: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_weight: string | number | undefined;
+}
+
+export const SalesProductToFieldValues = (
+  product: BaseSalesOrder
+): SalesOrderProductFormValues => {
+  return {
+    id: product.id,
+    vehicle_number: product.vehicle_number,
+    kandang_id: product.product_warehouse.warehouse.id,
+    kandang: {
+      value: product.product_warehouse.warehouse.id,
+      label: product.product_warehouse.warehouse.name,
+    },
+    product_warehouse: {
+      value: product.product_warehouse.id,
+      label: product.product_warehouse.product.name,
+    },
+    product_warehouse_id: product.product_warehouse.id,
+    unit_price: product.unit_price,
+    total_weight: product.total_weight,
+    qty: product.qty,
+    avg_weight: product.avg_weight,
+    total_price: product.total_price,
+  };
+};
+export const DeliveryProductToFieldValues = (
+  salesOrders: BaseSalesOrder[],
+  delivery: BaseDeliveryOrder
+): DeliveryOrderProductFormValues[] => {
+  const data = delivery.deliveries.map((item) => {
+    const soId = salesOrders.find(
+      (so) => so.product_warehouse.id === item.product_warehouse.id
+    )?.id;
+    return {
+      id: soId,
+      unit_price: item.unit_price,
+      total_weight: item.total_weight,
+      qty: item.qty,
+      avg_weight: item.avg_weight,
+      total_price: item.total_price,
+      vehicle_number: item.vehicle_number,
+      delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
+      do_number: delivery.do_number,
+      marketing_product_id: soId,
+      marketing_product: {
+        id: soId,
+        vehicle_number: item.vehicle_number,
+        kandang_id: item.product_warehouse.warehouse.id,
+        kandang: {
+          value: item.product_warehouse.warehouse.id,
+          label: item.product_warehouse.warehouse.name,
+        },
+        product_warehouse: {
+          value: item.product_warehouse.id,
+          label: item.product_warehouse.product.name,
+        },
+        product_warehouse_id: item.product_warehouse.id,
+        unit_price: item.unit_price,
+        total_weight: item.total_weight,
+        qty: item.qty,
+        avg_weight: item.avg_weight,
+        total_price: item.total_price,
+      },
+    } as DeliveryOrderProductFormValues;
+  });
+  return data;
+};
+export const mergeSOwithDO = (
+  salesOrders: SalesOrderProductFormValues[],
+  deliveryOrders: DeliveryOrderProductFormValues[]
+): DeliveryOrderProductFormValues[] => {
+  return salesOrders.map((so) => {
+    const delivery = deliveryOrders.find(
+      (d) => d?.marketing_product_id === so.id
+    );
+
+    return {
+      ...so, // nilai dasar dari sales order
+      marketing_product_id: so.id,
+      delivery_date: delivery?.delivery_date || undefined,
+      do_number: delivery?.do_number || undefined,
+      vehicle_number: delivery?.vehicle_number || so.vehicle_number,
+      unit_price: delivery?.unit_price,
+      total_weight: delivery?.total_weight,
+      qty: delivery?.qty,
+      avg_weight: delivery?.avg_weight,
+      total_price: delivery?.total_price,
+      marketing_product: so, // jika ada, override
+    } as DeliveryOrderProductFormValues;
+  });
+};
+export const recalculate = (
+  field: string,
+  values: ProductCalculationFields
+) => {
+  console.log('Values');
+  console.log(values);
+  const { qty, unit_price, total_price, avg_weight, total_weight } = values;
+  const result: Partial<ProductCalculationFields> = {};
+  if (field == 'unit_price' || field == 'total_price' || field == 'qty') {
+    if (qty && unit_price && (field == 'unit_price' || field == 'qty')) {
+      result.total_price = Number(qty) * Number(unit_price);
+    } else if (qty && total_price && field == 'total_price') {
+      result.unit_price = Number(total_price) / Number(qty);
+    }
+  }
+  if (field == 'avg_weight' || field == 'total_weight' || field == 'qty') {
+    if (qty && avg_weight && (field == 'avg_weight' || field == 'qty')) {
+      result.total_weight = Number(qty) * Number(avg_weight);
+    } else if (qty && total_weight && field == 'total_weight') {
+      result.avg_weight = Number(total_weight) / Number(qty);
+    }
+  }
+  console.log('Result');
+  console.log(result);
+  return result;
+};
+export const getSubmitField = (values: ProductCalculationFields) => {
+  const { qty, unit_price, total_price, avg_weight, total_weight } = values;
+
+  // Harga logic
+  if (qty && unit_price && !total_price) {
+    return 'unit_price';
+  }
+  if (qty && total_price && !unit_price) {
+    return 'total_price';
+  }
+
+  // Bobot logic
+  if (qty && avg_weight && !total_weight) {
+    return 'avg_weight';
+  }
+  if (qty && total_weight && !avg_weight) {
+    return 'total_weight';
+  }
+
+  // Tidak ada yang perlu dihitung
+  return '';
+};
+
+const MarketingForm = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  initialValues?: Marketing;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<SalesOrderProductFormValues | null>(null);
+  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
+    useState<DeliveryOrderProductFormValues | null>(null);
+  const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
+    'add'
+  );
+  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
+    DeliveryOrderProductFormValues[]
+  >(
+    mergeSOwithDO(
+      initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+      initialValues?.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+      ) ?? []
+    )
+  );
+
+  // ================== REPEATER ==================
+  const addSOModal = useModal();
+  const addDOModal = useModal();
+  const [rowSOSelection, setRowSOSelection] = useState<Record<string, boolean>>(
+    {}
+  );
+  const selectedRowSOIds = Object.keys(rowSOSelection).map((item) =>
+    parseInt(item)
+  );
+
+  // ================== FETCH OPTIONS ==================
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  // ================== SETUP FORMIK ==================
+  const formikInitialValues = useMemo<
+    SalesOrderFormValues & DeliveryOrderFormValues
+  >(() => {
+    return {
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
+      customer_id: initialValues?.customer?.id || undefined,
+      sales_person_id: initialValues?.sales_person?.id || 1,
+      customer: initialValues?.customer
+        ? {
+            value: initialValues.customer.id,
+            label: initialValues.customer.name,
+          }
+        : null,
+      sales_order:
+        initialValues?.sales_order?.map((product) =>
+          SalesProductToFieldValues(product)
+        ) ?? [],
+      delivery_order: mergeSOwithDO(
+        initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+        initialValues?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+        ) ?? []
+      ),
+    };
+  }, [initialValues]);
+  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues,
+    validationSchema:
+      formType == 'add_deliver' || formType == 'edit_deliver'
+        ? DeliveryOrderSchema
+        : SalesOrderSchema,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      const payload =
+        formType != 'add_deliver' && formType != 'edit_deliver'
+          ? ({
+              customer_id: values.customer_id as number,
+              sales_person_id: values.sales_person_id as number,
+              date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
+              notes: values.notes as string,
+              marketing_products: values.sales_order.map((product) => {
+                return {
+                  vehicle_number: product.vehicle_number as string,
+                  kandang_id: product.kandang_id as number,
+                  product_warehouse_id: product.product_warehouse_id as number,
+                  unit_price: parseFloat(product.unit_price as string),
+                  total_weight: parseFloat(product.total_weight as string),
+                  qty: parseFloat(product.qty as string),
+                  avg_weight: parseFloat(product.avg_weight as string),
+                  total_price: parseFloat(product.total_price as string),
+                } as CreateSalesOrderProductPayload;
+              }),
+            } as CreateSalesOrderPayload)
+          : ({
+              marketing_id: initialValues?.id as number,
+              delivery_products: values.delivery_order
+                .map((product) => {
+                  if (Boolean(product.delivery_date)) {
+                    return {
+                      marketing_product_id:
+                        product.marketing_product_id as number,
+                      unit_price: parseFloat(product.unit_price as string),
+                      total_weight: parseFloat(product.total_weight as string),
+                      qty: parseFloat(product.qty as string),
+                      avg_weight: parseFloat(product.avg_weight as string),
+                      total_price: parseFloat(product.total_price as string),
+                      delivery_date: formatDate(
+                        product.delivery_date as string,
+                        'yyyy-MM-DD'
+                      ),
+                      vehicle_number: product.vehicle_number,
+                    };
+                  }
+                })
+                .filter((item) => Boolean(item)),
+            } as UpdateDeliveryOrderPayload);
+      console.log('PAYLOAD');
+      console.log(payload);
+      switch (formType) {
+        case 'add':
+          await createMarketingHandler(payload as CreateSalesOrderPayload);
+          break;
+        case 'edit':
+          await updateMarketingHandler(payload as UpdateSalesOrderPayload);
+          break;
+        case 'add_deliver':
+          await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          break;
+        case 'edit_deliver':
+          await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+          break;
+        default:
+          break;
+      }
+      afterSubmit?.();
+    },
+  });
+
+  // ================== FORM REPEATER HANDLER ==================
+  const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
+    setIsLoading(true);
+    console.log(values);
+    const createMarketingRes = await SalesOrderApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      toast.success(createMarketingRes?.message as string);
+      router.push('/marketing');
+    }
+    if (isResponseError(createMarketingRes)) {
+      toast.error(createMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
+    setIsLoading(true);
+    console.log(values);
+    const updateMarketingRes = await SalesOrderApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(updateMarketingRes)) {
+      toast.success(updateMarketingRes?.message as string);
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(updateMarketingRes)) {
+      toast.error(updateMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const createDeliveryRes = await DeliveryOrderApi.create(values);
+    if (isResponseSuccess(createDeliveryRes)) {
+      console.log(createDeliveryRes);
+      toast.success(createDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(
+            createDeliveryRes.data?.sales_order,
+            delivery
+          )
+        ) ?? []
+      );
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(createDeliveryRes)) {
+      console.log(createDeliveryRes);
+      toast.error(createDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const updateDeliveryRes = await DeliveryOrderApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(updateDeliveryRes)) {
+      console.log(updateDeliveryRes);
+      toast.success(updateDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        mergeSOwithDO(
+          formik.values.sales_order,
+          updateDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(
+              updateDeliveryRes.data?.sales_order,
+              delivery
+            )
+          ) ?? []
+        )
+      );
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
+    }
+    if (isResponseError(updateDeliveryRes)) {
+      console.log(updateDeliveryRes);
+      toast.error(updateDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+
+  // ================== MARKETING HANDLER ==================
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+      toast.success(deleteMarketingRes?.message as string);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+      toast.error(deleteMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing');
+  };
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    []
+  );
+  const handleDelete = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  // ================== SALES ORDER HANDLER ==================
+  const handleDeleteSO = useCallback((id: number) => {
+    const currentProducts = formik.values.sales_order;
+    formik.setFieldValue(
+      'sales_order',
+      currentProducts.filter((p) => p.id != id)
+    );
+  }, []);
+  const handleBulkDeleteSO = useCallback(() => {
+    const currentProducts = formik.values.sales_order;
+    formik.setFieldValue(
+      'sales_order',
+      currentProducts.filter(
+        (product) => !selectedRowSOIds.includes(product.id ?? -1)
+      )
+    );
+    setRowSOSelection({});
+  }, [selectedRowSOIds]);
+  const handleAddSOClick = useCallback(() => {
+    setSelectedMarketingProduct(null);
+    addSOModal.openModal();
+  }, [addSOModal]);
+  const handleAddSubmitSO = useCallback(
+    async (values: SalesOrderProductFormValues) => {
+      const currentProducts = formik.values.sales_order;
+
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      const existingIndex = currentProducts.findIndex(
+        (item) =>
+          item.kandang_id === newValues.kandang_id &&
+          item.product_warehouse_id === newValues.product_warehouse_id
+      );
+
+      let updatedProducts = [];
+
+      if (existingIndex !== -1) {
+        // Overwrite
+        updatedProducts = currentProducts.map((item, index) =>
+          index === existingIndex ? newValues : item
+        );
+      } else {
+        // Add new item
+        updatedProducts = [...currentProducts, newValues];
+      }
+
+      formik.setFieldValue('sales_order', updatedProducts);
+
+      addSOModal.closeModal();
+    },
+    [addSOModal]
+  );
+
+  // ================== DELIVERY ORDER HANDLER ==================
+  const handleEditDO = useCallback(
+    (id: number, values?: DeliveryOrderProductFormValues) => {
+      setDeliveryFormState('edit');
+      const currentProducts = formik.values.delivery_order.find(
+        (product) => product.id == id
+      );
+      setSelectedDeliveryProduct(values ?? currentProducts ?? null);
+      addDOModal.openModal();
+    },
+    [addDOModal]
+  );
+  const handleAddDOClick = useCallback(() => {
+    setDeliveryFormState('add');
+    setSelectedDeliveryProduct(null);
+    addDOModal.openModal();
+  }, [addDOModal]);
+  const handleAddSubmitDO = useCallback(
+    async (values: DeliveryOrderProductFormValues) => {
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      setDeliveryOrderValues((prev) => [...prev, newValues]);
+      addDOModal.closeModal();
+      setSelectedDeliveryProduct(null);
+    },
+    [addDOModal]
+  );
+  const handleUpdateDO = useCallback(
+    async (id: number, values: DeliveryOrderProductFormValues) => {
+      setDeliveryOrderValues((prev) =>
+        prev.map((product) =>
+          product.id === id ? { ...product, ...values } : product
+        )
+      );
+      addDOModal.closeModal();
+      setSelectedDeliveryProduct(null);
+    },
+    [addDOModal]
+  );
+
+  const memoSalesOrder = formik.values.sales_order;
+
+  useEffect(() => {
+    formik.setFieldValue('delivery_order', deliveryOrderValues);
+  }, [deliveryOrderValues, initialValues]);
+
+  const grandTotal = useMemo(() => {
+    return memoSalesOrder.reduce(
+      (total, product) =>
+        total + parseFloat((product.total_price as string) || '0'),
+      0
+    );
+  }, [memoSalesOrder]);
+
+  return (
+    <>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <FormHeader
+          title={`${formType == 'add' || formType == 'add_deliver' ? 'Tambah' : 'Edit'} ${formType === 'add_deliver' || formType === 'edit_deliver' ? 'Delivery' : 'Sales'} Order`}
+          backUrl='/marketing'
+        />
+        {/* Input Cutomer And Date  */}
+        <Card
+          title='Informasi Order'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-3 mt-3'>
+            <SelectInput
+              label='Pelanggan'
+              options={customerOptions}
+              isLoading={isLoadingCustomerOptions}
+              value={formik.values.customer}
+              onChange={handleChangeCustomer}
+              isError={
+                formik.touched.customer_id && Boolean(formik.errors.customer_id)
+              }
+              errorMessage={formik.errors.customer_id}
+              isClearable
+              placeholder='Pilih Pelanggan'
+              isDisabled={
+                formType === 'add_deliver' || formType === 'edit_deliver'
+              }
+            />
+            <DateInput
+              name='so_date'
+              label='Tanggal'
+              value={formik.values.so_date}
+              onChange={formik.handleChange}
+              isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
+              errorMessage={formik.errors.so_date}
+              placeholder='Pilih Tanggal'
+              readOnly={formType == 'add_deliver' || formType == 'edit_deliver'}
+            />
+          </div>
+        </Card>
+
+        {/* Input Table Repeater Sales Order */}
+        <Card
+          title='Informasi Produk'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <MemoizedSalesOrderProductTable
+            formType={formType}
+            data={memoSalesOrder}
+            rowSelection={rowSOSelection}
+            setRowSelection={setRowSOSelection}
+            selectedRowIds={selectedRowSOIds}
+            onDelete={handleDeleteSO}
+            onBulkDelete={handleBulkDeleteSO}
+            onAddProductClick={handleAddSOClick}
+          />
+        </Card>
+
+        {/* Input Table Repeater Delivery Order */}
+        {(formType == 'add_deliver' || formType == 'edit_deliver') &&
+          initialValues?.sales_order &&
+          initialValues?.sales_order.length > 0 && (
+            <Card
+              title='Informasi Pengiriman'
+              className={{
+                wrapper: 'bg-white w-full',
+              }}
+            >
+              {/* <div className='text-blue-500'>
+                {JSON.stringify(formik.values)}
+              </div>
+              <div className='text-red-500'>
+                {JSON.stringify(formik.errors)}
+              </div> */}
+              <MemoizedDeliveryOrderProductTable
+                formType={formType}
+                data={deliveryOrderValues}
+                onEdit={handleEditDO}
+                onAddProductClick={handleAddDOClick}
+              />
+            </Card>
+          )}
+
+        {/* Input Notes */}
+        <div className='grid grid-cols-2 gap-3'>
+          <DebouncedTextArea
+            required
+            name='notes'
+            label='Catatan'
+            rows={3}
+            placeholder='Masukan catatan penjualan'
+            value={formik.values.notes}
+            onChange={formik.handleChange}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes}
+            disabled={formType === 'add_deliver' || formType === 'edit_deliver'}
+          />
+          <div className='flex flex-col h-full justify-between items-end py-6'>
+            <span>Total Penjualan</span>
+            <span className='text-lg font-semibold'>
+              {formatCurrency(grandTotal)}{' '}
+            </span>
+          </div>
+        </div>
+
+        {/* Form Actions */}
+        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            disabled={!formik.isValid || formik.isSubmitting}
+            isLoading={formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+
+      {/* Actions button */}
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button
+            type='button'
+            color='error'
+            onClick={handleDelete}
+            isLoading={isLoading}
+          >
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
+
+      {/* Modals */}
+      <Modal
+        ref={addSOModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addSOModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MemoizedSalesOrderProductForm
+              onSubmitForm={handleAddSubmitSO}
+              initialValues={selectedMarketingProduct ?? undefined}
+              exisitingValues={memoSalesOrder}
+            />
+          </div>
+        </div>
+      </Modal>
+      <Modal
+        ref={addDOModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>
+              {selectedDeliveryProduct ? 'Edit' : 'Tambah'} Pengiriman
+            </h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addDOModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MemoizedDeliveryOrderProductForm
+              formState={deliveryFormState}
+              salesOrders={initialValues?.sales_order ?? []}
+              exisitingValues={deliveryOrderValues}
+              onSubmitForm={handleAddSubmitDO}
+              initialValues={selectedDeliveryProduct ?? undefined}
+              onUpdateForm={handleUpdateDO}
+            />
+          </div>
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: deleteModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingForm;

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema.ts

@@ -0,0 +1,47 @@
+import * as Yup from 'yup';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+
+type DeliveryOrderProductSchemaType = {
+  id?: number | undefined;
+  marketing_product_id: number | undefined; // Sales Order ID
+  marketing_product?: SalesOrderProductFormValues | undefined | null;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  vehicle_number: string | undefined;
+  delivery_date: string | undefined | null;
+  do_number?: string | undefined | null; // Uncertain
+};
+
+export const DeliveryOrderProductSchema: Yup.ObjectSchema<DeliveryOrderProductSchemaType> =
+  Yup.object({
+    id: Yup.number(),
+    marketing_product_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    marketing_product: Yup.object().nullable().optional(),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(0, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    avg_weight: Yup.number()
+      .min(0, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+    vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
+    delivery_date: Yup.string().required('Tanggal Pengiriman wajib diisi!'),
+    do_number: Yup.string().nullable().optional(),
+  });
+
+export type DeliveryOrderProductFormValues = Yup.InferType<
+  typeof DeliveryOrderProductSchema
+>;

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -0,0 +1,394 @@
+import { useEffect, useState } from 'react';
+import {
+  DeliveryOrderProductFormValues,
+  DeliveryOrderProductSchema,
+} from './DeliverOrderProduct.schema';
+import { useFormik } from 'formik';
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import NumberInput from '@/components/input/NumberInput';
+import PatternInput from '@/components/input/PatternInput';
+import { formatVechicleNumber } from '@/lib/helper';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { BaseSalesOrder } from '@/types/api/marketing/marketing';
+import Badge from '@/components/Badge';
+import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
+import * as Yup from 'yup';
+
+const DeliveryOrderProductForm = ({
+  formState,
+  salesOrders,
+  initialValues,
+  exisitingValues,
+  onSubmitForm,
+  onUpdateForm,
+}: {
+  formState: 'add' | 'edit';
+  salesOrders: BaseSalesOrder[];
+  initialValues?: DeliveryOrderProductFormValues;
+  exisitingValues?: DeliveryOrderProductFormValues[];
+  onSubmitForm?: (value: DeliveryOrderProductFormValues) => Promise<void>;
+  onUpdateForm?: (
+    id: number,
+    value: DeliveryOrderProductFormValues
+  ) => Promise<void>;
+}) => {
+  const [formikErrorMessage, setFormErrorMessage] = useState('');
+  const [selectedProduct, setSelectedProduct] = useState<OptionType | null>(
+    null
+  );
+  const [currentInput, setCurrentInput] = useState<string>('');
+  const salesOrder = salesOrders.find(
+    (item) => item.id === initialValues?.marketing_product_id
+  );
+
+  const formik = useFormik<DeliveryOrderProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      delivery_date: initialValues?.delivery_date || undefined,
+      vehicle_number: initialValues?.vehicle_number || undefined,
+      marketing_product_id:
+        salesOrder?.id || initialValues?.marketing_product_id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+      marketing_product: initialValues?.marketing_product || undefined,
+    },
+    isInitialValid: false,
+    validationSchema: Yup.object().shape({
+      ...DeliveryOrderProductSchema.fields,
+
+      qty: Yup.lazy((_, context) => {
+        // values diambil aman dari context
+        const { parent } = context;
+
+        const mpId = parent?.marketing_product_id;
+        const selectedSO = salesOrders.find((item) => item.id === mpId);
+
+        const maxQty = selectedSO?.qty ?? Infinity;
+
+        return Yup.number()
+          .min(1, 'Kuantitas wajib diisi!')
+          .max(maxQty, `Maksimal kuantitas adalah ${maxQty}`)
+          .required('Kuantitas wajib diisi!');
+      }),
+    }),
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      if (initialValues?.id) {
+        await onUpdateForm?.(initialValues.id, values);
+      } else {
+        await onUpdateForm?.(values.marketing_product_id as number, values);
+      }
+      handleResetForm();
+    },
+  });
+
+  const handleResetForm = () => {
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        delivery_date: '',
+        vehicle_number: '',
+        marketing_product_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        avg_weight: '',
+        total_price: '',
+        marketing_product: undefined,
+      },
+    });
+    setSelectedProduct(null);
+  };
+
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
+        formik.setFieldValue('total_price', Number(qty) * Number(unit_price));
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue('unit_price', Number(total_price) / Number(qty));
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
+        formik.setFieldValue('total_weight', Number(qty) * Number(avg_weight));
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue('avg_weight', Number(total_weight) / Number(qty));
+      }
+    }
+  };
+
+  const options = exisitingValues
+    ?.map((item) => {
+      if (!Boolean(item.qty)) {
+        return {
+          value: item.id,
+          label: `${item.marketing_product?.product_warehouse?.label} - ${item.marketing_product?.kandang?.label}`,
+        } as OptionType;
+      } else {
+        return null;
+      }
+    })
+    ?.filter((item) => item != null) as OptionType[];
+
+  const { setValues: setFormikValues } = formik;
+
+  useEffect(() => {
+    if (initialValues) {
+      if (!Boolean(initialValues.qty)) {
+        handleResetForm();
+      } else {
+        setFormikValues(initialValues);
+        // const value = exisitingValues?.find(
+        //   (item) => item.id === initialValues?.id
+        // );
+        if (initialValues?.marketing_product_id) {
+          setSelectedProduct({
+            value: initialValues?.id,
+            label: `${initialValues?.marketing_product?.product_warehouse?.label} - ${initialValues?.marketing_product?.kandang?.label}`,
+          } as OptionType);
+        }
+      }
+    }
+  }, [initialValues]);
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleBlurField(currentInput);
+          formik.handleSubmit(e);
+        }}
+        onReset={handleResetForm}
+      >
+        {/* <small className='block text-blue-500'>
+          {JSON.stringify(exisitingValues)}
+        </small>
+        <small className='block text-emerald-500'>
+          {JSON.stringify(formik.values)}
+        </small> */}
+        {/* <small className='block text-red-500'>
+          {JSON.stringify(formik.errors)}
+        </small>
+        <div className='hidden'>
+          {JSON.stringify(formik.values.marketing_product)}
+        </div> */}
+
+        {formikErrorMessage && (
+          <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
+            <Alert color='error'>{formikErrorMessage}</Alert>
+          </div>
+        )}
+
+        <div className='grid grid-cols-2 gap-4'>
+          <SelectInput
+            options={options}
+            label='Produk'
+            placeholder='Pilih Produk'
+            isDisabled={formState == 'edit'}
+            value={
+              selectedProduct
+                ? ({
+                    value: selectedProduct?.value,
+                    label: exisitingValues?.find(
+                      (item) => item.id === selectedProduct?.value
+                    )?.marketing_product?.product_warehouse?.label,
+                  } as OptionType)
+                : null
+            }
+            onChange={(value) => {
+              const selected = value as OptionType;
+              setSelectedProduct(selected);
+
+              const so = salesOrders?.find(
+                (item) => item.id === selected?.value
+              );
+              if (!so) {
+                formik.setValues({
+                  ...formik.values,
+                  marketing_product_id: undefined,
+                  marketing_product: null,
+                  qty: formik.values.qty || '',
+                  unit_price: '',
+                  total_price: '',
+                  avg_weight: '',
+                  total_weight: '',
+                  vehicle_number: '',
+                });
+                return;
+              }
+
+              formik.setValues({
+                ...formik.values,
+                marketing_product_id: selected.value as number,
+                marketing_product: SalesProductToFieldValues(so),
+                qty: formik.values.qty || so.qty,
+                unit_price: so.unit_price,
+                total_price: so.total_price,
+                avg_weight: so.avg_weight,
+                total_weight: so.total_weight,
+                vehicle_number: so.vehicle_number,
+              });
+            }}
+            startAdornment={
+              selectedProduct && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{ badge: 'whitespace-nowrap font-semibold' }}
+                >
+                  {
+                    exisitingValues?.find(
+                      (item) => item.id === selectedProduct?.value
+                    )?.marketing_product?.kandang?.label
+                  }
+                </Badge>
+              )
+            }
+            isClearable
+            isError={Boolean(formik.errors.marketing_product_id)}
+            errorMessage={formik.errors.marketing_product_id}
+            required
+          />
+          <DateInput
+            name='delivery_date'
+            label='Tanggal'
+            value={formik.values.delivery_date ?? undefined}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.delivery_date &&
+              Boolean(formik.errors.delivery_date)
+            }
+            errorMessage={formik.errors.delivery_date}
+            placeholder='Pilih Tanggal'
+            className={{
+              inputWrapper: 'bg-white',
+            }}
+            required
+          />
+
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={Boolean(formik.errors.vehicle_number)}
+            errorMessage={formik.errors.vehicle_number}
+          />
+
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('qty')}
+            isError={Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={Boolean(formik.errors.avg_weight)}
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={Boolean(formik.errors.unit_price)}
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={Boolean(formik.errors.total_weight)}
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_price')}
+            isError={Boolean(formik.errors.total_price)}
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning'>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default DeliveryOrderProductForm;

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts

@@ -0,0 +1,60 @@
+import * as Yup from 'yup';
+
+type SalesOrderProductSchemaType = {
+  id?: number | undefined;
+  kandang_id?: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse_id?: number;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  vehicle_number?: string | undefined;
+};
+
+export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
+  Yup.object({
+    id: Yup.number(),
+    vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!'),
+    product_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(0, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    avg_weight: Yup.number()
+      .min(0, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+  });
+
+export type SalesOrderProductFormValues = Yup.InferType<
+  typeof SalesOrderProductSchema
+>;

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import { useFormik } from 'formik';
+import {
+  SalesOrderProductFormValues,
+  SalesOrderProductSchema,
+} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { RefObject, useMemo, useState } from 'react';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { KandangApi } from '@/services/api/master-data';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatVechicleNumber } from '@/lib/helper';
+import PatternInput from '@/components/input/PatternInput';
+import Alert from '@/components/Alert';
+
+const SalesOrderProductForm = ({
+  initialValues,
+  exisitingValues,
+  onSubmitForm,
+}: {
+  initialValues?: SalesOrderProductFormValues;
+  exisitingValues?: SalesOrderProductFormValues[];
+  modalRef?: RefObject<HTMLDialogElement | null>;
+  onSubmitForm?: (value: SalesOrderProductFormValues) => Promise<void>;
+}) => {
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+  const [currentInput, setCurrentInput] = useState<string>('');
+
+  const formik = useFormik<SalesOrderProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      vehicle_number: initialValues?.vehicle_number || undefined,
+      kandang_id: initialValues?.kandang_id || undefined,
+      kandang: initialValues?.kandang || undefined,
+      product_warehouse: initialValues?.product_warehouse || undefined,
+      product_warehouse_id: initialValues?.product_warehouse_id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+    },
+    validationSchema: SalesOrderProductSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      onSubmitForm?.(values);
+      handleResetForm();
+    },
+    validateOnBlur: true,
+    isInitialValid: false,
+  });
+
+  const {
+    options: kandangSourceOptions,
+    isLoadingOptions: isLoadingKandangSourceOptions,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+
+  const {
+    options: warehouseSourceOptions,
+    rawData: warehouseSourceRawData,
+    isLoadingOptions: isLoadingWarehouseSourceOptions,
+  } = useSelect<ProductWarehouse>(
+    ProductWarehouseApi.basePath,
+    'id',
+    'product.name',
+    'search',
+    {
+      warehouse_id: formik.values.kandang_id?.toString() ?? '',
+    }
+  );
+
+  const productOptionsFiltered = useMemo(() => {
+    return warehouseSourceOptions.filter(
+      (product) =>
+        !exisitingValues
+          ?.map((item) => item.product_warehouse_id)
+          .includes(product.value)
+    );
+  }, [warehouseSourceOptions, exisitingValues]);
+
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang', val as OptionType);
+    formik.setFieldValue('kandang_id', (val as OptionType)?.value);
+    formik.setFieldValue('product_warehouse_id', null);
+    formik.setFieldValue('product_warehouse', null);
+    formik.setFieldValue('qty', null);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('product_warehouse', val as OptionType);
+    const newId = (val as OptionType)?.value;
+    formik.setFieldValue('product_warehouse_id', newId);
+
+    if (isResponseSuccess(warehouseSourceRawData) && newId) {
+      const productWarehouse = warehouseSourceRawData?.data.find(
+        (item: ProductWarehouse) => item.id === newId
+      );
+      formik.setFieldValue('qty', productWarehouse?.quantity);
+      handleBlurField('qty');
+    } else {
+      formik.setFieldValue('qty', null);
+    }
+  };
+
+  const handleResetForm = () => {
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        vehicle_number: '',
+        kandang_id: undefined,
+        kandang: null,
+        product_warehouse: null,
+        product_warehouse_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        avg_weight: '',
+        total_price: '',
+      },
+    });
+  };
+
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
+        formik.setFieldValue(
+          'total_price',
+          (qty as number) * (unit_price as number)
+        );
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue(
+          'unit_price',
+          (total_price as number) / (qty as number)
+        );
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
+        formik.setFieldValue(
+          'total_weight',
+          (qty as number) * (avg_weight as number)
+        );
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue(
+          'avg_weight',
+          (total_weight as number) / (qty as number)
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleBlurField(currentInput);
+          formik.handleSubmit(e);
+        }}
+        onReset={handleResetForm}
+      >
+        {formErrorMessage && (
+          <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
+            <Alert color='error'>
+              {formErrorMessage ? formErrorMessage : ''}
+            </Alert>
+          </div>
+        )}
+        {/* <small className='block text-rose-500'>
+          {JSON.stringify(formik.errors)}
+        </small> */}
+        <div className='grid grid-cols-2 gap-4 z-200'>
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.vehicle_number &&
+              Boolean(formik.errors.vehicle_number)
+            }
+            errorMessage={formik.errors.vehicle_number}
+          />
+          <SelectInput
+            required
+            label='Kandang'
+            options={kandangSourceOptions}
+            isLoading={isLoadingKandangSourceOptions}
+            value={formik.values.kandang}
+            onChange={kandangChangeHandler}
+            isClearable
+            isError={
+              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+            }
+            errorMessage={formik.errors.kandang_id}
+            placeholder='Pilih Kandang'
+          />
+          <SelectInput
+            required
+            label='Produk'
+            options={productOptionsFiltered}
+            isLoading={isLoadingWarehouseSourceOptions}
+            value={formik.values.product_warehouse}
+            onChange={warehouseChangeHandler}
+            isClearable
+            placeholder={
+              formik.values.kandang_id
+                ? productOptionsFiltered.length == 0
+                  ? 'Tidak ada produk yang tersedia'
+                  : 'Pilih produk'
+                : 'Pilih Kandang Terlebih Dahulu'
+            }
+            isDisabled={!formik.values.kandang_id}
+            isError={
+              formik.touched.product_warehouse_id &&
+              Boolean(formik.errors.product_warehouse_id)
+            }
+            errorMessage={formik.errors.product_warehouse_id}
+          />
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('qty')}
+            isError={formik.touched.qty && Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={
+              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+            }
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={
+              formik.touched.unit_price && Boolean(formik.errors.unit_price)
+            }
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={
+              formik.touched.total_weight && Boolean(formik.errors.total_weight)
+            }
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
+            }}
+            onBlur={() => handleBlurField('total_price')}
+            isError={
+              formik.touched.total_price && Boolean(formik.errors.total_price)
+            }
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning' onClick={handleResetForm}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default SalesOrderProductForm;

src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx

@@ -0,0 +1,272 @@
+import Table from '@/components/Table';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import * as TanStack from '@tanstack/react-table';
+import { useMemo, useRef } from 'react';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+
+type DeliveryOrderProductTableProps = {
+  data: DeliveryOrderProductFormValues[];
+  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  onEdit: (id: number) => void;
+  onAddProductClick: () => void;
+};
+
+const DeliveryOrderProductTable = ({
+  data,
+  formType,
+  onEdit,
+  onAddProductClick,
+}: DeliveryOrderProductTableProps) => {
+  const onEditRef = useRef(onEdit);
+  onEditRef.current = onEdit;
+
+  const canAddData = data.filter((item) => !Boolean(item.qty));
+
+  const columns = useMemo(() => {
+    const cols = [
+      // {
+      //   id: 'select',
+      //   header: ({
+      //     table,
+      //   }: {
+      //     table: TanStack.Table<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div className='w-full flex flex-row justify-center'>
+      //       <CheckboxInput
+      //         name='allRow'
+      //         checked={table.getIsAllRowsSelected()}
+      //         indeterminate={table.getIsSomeRowsSelected()}
+      //         onChange={table.getToggleAllRowsSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      //   cell: ({
+      //     row,
+      //   }: {
+      //     row: TanStack.Row<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div>
+      //       <CheckboxInput
+      //         name='row'
+      //         checked={row.getIsSelected()}
+      //         disabled={!row.getCanSelect()}
+      //         indeterminate={row.getIsSomeSelected()}
+      //         onChange={row.getToggleSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      // },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
+        header: 'No. Pengiriman',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) => (
+          <>
+            {props.row.original.do_number ? props.row.original.do_number : '-'}
+          </>
+        ),
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.vehicle_number,
+        header: 'No. Polisi',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.vehicle_number
+            ? formatVechicleNumber(props.row.original.vehicle_number as string)
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.marketing_product?.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.marketing_product?.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) =>
+          row.delivery_date
+            ? formatDate(row.delivery_date as string, 'DD MMM YYYY')
+            : '-',
+        header: 'Tanggal Delivery',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.delivery_date
+            ? formatDate(
+                props.row.original.delivery_date as string,
+                'DD MMM YYYY'
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.unit_price,
+        header: 'Harga Satuan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.unit_price
+            ? formatCurrency(
+                parseFloat(props.row.original.unit_price as string)
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_weight,
+        header: 'Total Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_weight
+            ? formatNumber(
+                parseFloat(props.row.original.total_weight as string)
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.qty,
+        header: 'Kuantitas',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.qty
+            ? formatNumber(parseFloat(props.row.original.qty as string))
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.avg_weight,
+        header: 'Avg. Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.avg_weight
+            ? formatNumber(parseFloat(props.row.original.avg_weight as string))
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_price,
+        header: 'Total Penjualan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_price
+            ? formatCurrency(
+                parseFloat(props.row.original.total_price as string)
+              )
+            : '-',
+      },
+
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <>
+              {props.row.original.qty && (
+                <Button
+                  color='warning'
+                  className='px-2 py-1 text-sm'
+                  onClick={() =>
+                    onEditRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:edit' width={16} height={16} /> Edit
+                </Button>
+              )}
+              {!props.row.original.qty && '-'}
+              {/* {formType == 'add_deliver' && (
+                <Button
+                  color='error'
+                  className='p-1'
+                  onClick={() =>
+                    onDeleteRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:trash' width={16} height={16} />
+                </Button>
+              )} */}
+            </>
+          </div>
+        ),
+      },
+    ];
+    if (formType == 'add_deliver') {
+      return cols.filter((col) => col.header != 'No. Pengiriman');
+    }
+    return cols;
+  }, [formType, onEditRef]);
+
+  return (
+    <>
+      <Table<DeliveryOrderProductFormValues>
+        data={data}
+        columns={columns}
+        className={{
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          headerRowClassName: 'border-b border-b-gray-200',
+          headerColumnClassName:
+            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-2 py-2 last:flex last:flex-row last:justify-end',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div
+            className={cn(
+              'w-full h-16 flex flex-col justify-center items-center gap-2'
+            )}
+          >
+            <span className='text-gray-500'>Belum ada data pengiriman</span>
+          </div>
+        }
+      />
+      <div className='flex flex-row gap-3 mt-3'>
+        <Button
+          type='button'
+          variant='outline'
+          className='justify-start w-fit py-1 text-sm'
+          onClick={onAddProductClick}
+          disabled={!canAddData}
+        >
+          <Icon icon='mdi:plus' width={16} height={16} />
+          Tambah Pengiriman
+        </Button>
+        {/* {selectedRowIds.length > 0 && (
+          <Button
+            type='button'
+            variant='outline'
+            color='error'
+            className='justify-start w-fit py-1 text-sm'
+            onClick={onBulkDelete}
+          >
+            <Icon icon='mdi:trash' width={16} height={16} />
+            Hapus
+            {selectedRowIds.length > 0
+              ? ` (${selectedRowIds.length})`
+              : ''}{' '}
+            Pengiriman
+          </Button>
+        )} */}
+      </div>
+    </>
+  );
+};
+
+export default DeliveryOrderProductTable;

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import Button from '@/components/Button';
+import Table from '@/components/Table';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { useMemo, useRef, useState } from 'react';
+import * as TanStack from '@tanstack/react-table';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+type SalesOrderProductTableProps = {
+  data: SalesOrderProductFormValues[];
+  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  rowSelection: Record<string, boolean>;
+  setRowSelection: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+  selectedRowIds: number[];
+  onDelete: (id: number) => void;
+  onBulkDelete: () => void;
+  onAddProductClick: () => void;
+};
+
+const SalesOrderProductTable = ({
+  data,
+  formType,
+  rowSelection,
+  setRowSelection,
+  selectedRowIds,
+  onDelete,
+  onBulkDelete,
+  onAddProductClick,
+}: SalesOrderProductTableProps) => {
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({
+          table,
+        }: {
+          table: TanStack.Table<SalesOrderProductFormValues>;
+        }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<SalesOrderProductFormValues> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              value={`${row.original.product_warehouse_id}${row.original.kandang_id}`}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatVechicleNumber(row.vehicle_number as string),
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) => row.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          row.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.unit_price as string)),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.total_weight as string)),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.qty as string)),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.avg_weight as string)),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.total_price as string)),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<SalesOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() =>
+                onDeleteRef.current(props.row.original.id as number)
+              }
+              type='button'
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <Table<SalesOrderProductFormValues>
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        data={data}
+        columns={
+          formType == 'add_deliver' || formType == 'edit_deliver'
+            ? columns.filter(
+                (col) => col.header != 'Aksi' && col.id != 'select'
+              )
+            : columns
+        }
+        className={{
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          headerRowClassName: 'border-b border-b-gray-200',
+          headerColumnClassName:
+            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div
+            className={cn(
+              'w-full h-16 flex flex-col justify-center items-center gap-2'
+            )}
+          >
+            <span className='text-gray-500'>Belum ada data penjualan</span>
+          </div>
+        }
+      />
+      {formType != 'add_deliver' && formType != 'edit_deliver' && (
+        <div className='flex flex-row gap-3 mt-3'>
+          <Button
+            type='button'
+            variant='outline'
+            className='justify-start w-fit py-1 text-sm'
+            onClick={onAddProductClick}
+          >
+            <Icon icon='mdi:plus' width={16} height={16} />
+            Tambah Produk
+          </Button>
+          {selectedRowIds.length > 0 && (
+            <Button
+              type='button'
+              variant='outline'
+              color='error'
+              className='justify-start w-fit py-1 text-sm'
+              onClick={onBulkDelete}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+              Hapus
+              {selectedRowIds.length > 0
+                ? ` (${selectedRowIds.length})`
+                : ''}{' '}
+              Produk
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SalesOrderProductTable;

src/components/pages/marketing/pdf/DeliveryOrderExport.tsx

@@ -0,0 +1,235 @@
+import Button from '@/components/Button';
+import { BaseDeliveryOrder, Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { useMemo, useState } from 'react';
+import pdfStyles from './styles/MarketingPDFStyles';
+import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
+import { format } from 'path';
+import { date } from 'yup';
+
+interface DeliveryOrderExportProps {
+  data?: Marketing;
+  deliveryOrder: BaseDeliveryOrder;
+  className?: string;
+}
+
+const DeliveryOrderExport = ({
+  data,
+  deliveryOrder,
+}: DeliveryOrderExportProps) => {
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
+  const salesData = data;
+
+  const handleDownloadPDF = async () => {
+    if (!salesData) {
+      alert('No sales order data available');
+      return;
+    }
+    setIsGeneratingPDF(true);
+    try {
+      const blob = await pdf(
+        <PDFDocument data={salesData} deliveryOrder={deliveryOrder} />
+      ).toBlob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${deliveryOrder?.do_number || 'delivery-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!salesData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No sales order data available</div>
+      </div>
+    );
+  }
+
+  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+      isLoading={isGeneratingPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {deliveryOrder.do_number}
+    </Button>
+  ) : null;
+};
+
+export default DeliveryOrderExport;
+const PDFDocument = ({
+  data,
+  deliveryOrder,
+}: {
+  data: Marketing;
+  deliveryOrder: BaseDeliveryOrder;
+}) => {
+  const grandTotal = useMemo(() => {
+    return (
+      deliveryOrder.deliveries?.reduce((a, b) => a + b.total_price, 0) ?? 0
+    );
+  }, []);
+
+  return (
+    <Document>
+      <Page size='A4' style={pdfStyles.page}>
+        {/* Header Section */}
+        <View style={pdfStyles.header}>
+          <Image
+            src={'https://placehold.co/120x30/png'}
+            style={pdfStyles.logo}
+            id={'mbu-logo'}
+          />
+          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
+          <Text style={pdfStyles.address}>
+            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+            Cipedes, Kec. Sukajadi, Kota Bandung 40162
+          </Text>
+          <View style={pdfStyles.divider} />
+        </View>
+
+        {/* Delivery Order Title */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.title}>DELIVERY ORDER</Text>
+          <View style={pdfStyles.poInfo}>
+            <Text>{deliveryOrder.do_number || '-'}</Text>
+          </View>
+        </View>
+
+        {/* Depature Table */}
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Ship To</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Depature From</Text>
+            </View>
+          </View>
+          <View style={pdfStyles.tableRow}>
+            <View style={pdfStyles.tableCell}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {data?.customer?.name || '-'} ({data?.customer?.type || '-'})
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {data?.customer.email || ''} - {data?.customer.phone || ''}
+              </Text>
+              <Text></Text>
+              <Text>{data?.customer.address || ''}</Text>
+              <Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
+            </View>
+            <View style={pdfStyles.tableCellLast}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {deliveryOrder.warehouse?.name || '-'}
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {formatDate(deliveryOrder.delivery_date, 'DD MMM YYYY')}
+              </Text>
+              <Text>{deliveryOrder.warehouse?.area?.name}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Delivery Table */}
+        <Text style={pdfStyles.sectionTitle}>Product Shipped</Text>
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Item Description</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Vehicle Number</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Unit Price</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Quantity</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Total Amount</Text>
+            </View>
+          </View>
+          {deliveryOrder.deliveries?.map((item, index) => {
+            return (
+              <View key={index} style={[pdfStyles.tableRow]}>
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.product?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCell}>
+                  <Text>
+                    {formatVechicleNumber(item.vehicle_number) || '-'}
+                  </Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>Rp{formatNumber(item.unit_price || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>{formatNumber(item.qty || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRightLast}>
+                  <Text>Rp{formatNumber(item.total_price || 0)}</Text>
+                </View>
+              </View>
+            );
+          }) || []}
+
+          {/* Grand Total Row inside table */}
+          <View style={pdfStyles.grandTotalRow}>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={pdfStyles.tableCellRight}>
+              <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+            </View>
+            <View
+              style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
+            >
+              <Text>Rp{formatNumber(grandTotal)}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer with Special Instructions */}
+        <View style={pdfStyles.footer}>
+          <View style={pdfStyles.specialInstructionTable}>
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={pdfStyles.tableCellHeaderLast}>
+                <Text>From Sales Order</Text>
+              </View>
+            </View>
+            <View style={pdfStyles.tableRow}>
+              <View style={pdfStyles.tableCellLast}>
+                <Text>
+                  {data?.so_number || '-'} -{' '}
+                  {formatDate(data.so_date, 'DD MMM YYYY')}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View style={pdfStyles.footerCompany}>
+            <Text>PT LUMBUNG TELUR INDONESIA</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};

src/components/pages/marketing/pdf/SalesOrderExport.tsx

@@ -0,0 +1,227 @@
+import Button from '@/components/Button';
+import { Marketing } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { useMemo, useState } from 'react';
+import pdfStyles from './styles/MarketingPDFStyles';
+import { formatDate, formatNumber } from '@/lib/helper';
+
+interface SalesOrderExportProps {
+  data?: Marketing;
+  className?: string;
+}
+
+const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
+  const salesData = data;
+
+  const handleDownloadPDF = async () => {
+    if (!salesData) {
+      alert('No sales order data available');
+      return;
+    }
+    setIsGeneratingPDF(true);
+    try {
+      const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!salesData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No sales order data available</div>
+      </div>
+    );
+  }
+
+  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+      isLoading={isGeneratingPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {salesData.so_number}
+    </Button>
+  ) : null;
+};
+
+export default SalesOrderExport;
+const PDFDocument = ({ data }: { data: Marketing }) => {
+  const grandTotal = useMemo(() => {
+    return data?.sales_order?.reduce((a, b) => a + b.total_price, 0) ?? 0;
+  }, [data?.sales_order]);
+
+  return (
+    <Document>
+      <Page size='A4' style={pdfStyles.page}>
+        {/* Header Section */}
+        <View style={pdfStyles.header}>
+          <Image
+            src={'https://placehold.co/120x30/png'}
+            style={pdfStyles.logo}
+            id={'mbu-logo'}
+          />
+          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
+          <Text style={pdfStyles.address}>
+            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+            Cipedes, Kec. Sukajadi, Kota Bandung 40162
+          </Text>
+          <View style={pdfStyles.divider} />
+        </View>
+
+        {/* Sales Order Title */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.title}>SALES ORDER</Text>
+          <View style={pdfStyles.poInfo}>
+            <Text>SO Number: {data?.so_number || '-'}</Text>
+            <Text>
+              Date:{' '}
+              {data?.so_date
+                ? formatDate(data.so_date, 'DD MMM YYYY')
+                : formatDate(new Date(), 'DD MMM YYYY')}
+            </Text>
+          </View>
+        </View>
+
+        {/* Customer Table */}
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Customer</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Sales</Text>
+            </View>
+          </View>
+          <View style={pdfStyles.tableRow}>
+            <View style={pdfStyles.tableCell}>
+              <Text style={{ fontWeight: 'bold' }}>
+                {data?.customer?.name || '-'} ({data?.customer?.type || '-'})
+              </Text>
+              <Text style={{ marginTop: '2px' }}>
+                {data?.customer.email || ''} - {data?.customer.phone || ''}
+              </Text>
+              <Text></Text>
+              <Text>{data?.customer.address || ''}</Text>
+              <Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
+            </View>
+            <View style={pdfStyles.tableCellLast}>
+              <Text style={{ fontWeight: 'bold' }}>
+                PT LUMBUNG TELUR INDONESIA
+              </Text>
+              <Text style={{ fontWeight: 'bold', marginTop: '2px' }}>
+                {data?.sales_person?.name || '-'}
+              </Text>
+              <Text>{data?.sales_person.email}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Product Sales Order Table */}
+        <Text style={pdfStyles.sectionTitle}>Product Sold</Text>
+        <View style={pdfStyles.table}>
+          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Item Description</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>From</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Unit Price</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeader}>
+              <Text>Quantity</Text>
+            </View>
+            <View style={pdfStyles.tableCellHeaderLast}>
+              <Text>Total Amount</Text>
+            </View>
+          </View>
+          {data?.sales_order?.map((item, index) => {
+            const isLastItem = index === (data?.sales_order?.length || 0) - 1;
+            return (
+              <View
+                key={index}
+                style={[
+                  pdfStyles.tableRow,
+                  // isLastItem ? {} : pdfStyles.tableBorderBottom,
+                ]}
+              >
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.product?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCell}>
+                  <Text>{item.product_warehouse?.warehouse?.name || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>Rp{formatNumber(item.unit_price || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRight}>
+                  <Text>{formatNumber(item.qty || 0)}</Text>
+                </View>
+                <View style={pdfStyles.tableCellRightLast}>
+                  <Text>Rp{formatNumber(item.total_price || 0)}</Text>
+                </View>
+              </View>
+            );
+          }) || []}
+
+          {/* Grand Total Row inside table */}
+          <View style={pdfStyles.grandTotalRow}>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
+              <Text></Text>
+            </View>
+            <View style={pdfStyles.tableCellRight}>
+              <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+            </View>
+            <View
+              style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
+            >
+              <Text>Rp{formatNumber(grandTotal)}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer with Special Instructions */}
+        <View style={pdfStyles.footer}>
+          <View style={pdfStyles.specialInstructionTable}>
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={pdfStyles.tableCellHeaderLast}>
+                <Text>Notes</Text>
+              </View>
+            </View>
+            <View style={pdfStyles.tableRow}>
+              <View style={pdfStyles.tableCellLast}>
+                <Text>{data?.notes || '-'}</Text>
+              </View>
+            </View>
+          </View>
+          <View style={pdfStyles.footerCompany}>
+            <Text>PT LUMBUNG TELUR INDONESIA</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};

src/components/pages/marketing/pdf/styles/MarketingPDFStyles.tsx

@@ -0,0 +1,212 @@
+import { StyleSheet } from '@react-pdf/renderer';
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 10,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    marginBottom: 20,
+  },
+  logo: {
+    width: 120,
+    height: 30,
+    marginBottom: 8,
+  },
+  companyInfo: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+    color: '#1f74bf',
+  },
+  address: {
+    fontSize: 8,
+    color: '#666666',
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    marginBottom: 15,
+  },
+  titleSection: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    flex: 3,
+    color: '#1f74bf',
+  },
+  poInfo: {
+    flex: 1,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1f74bf',
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#000000',
+    borderTopStyle: 'solid',
+  },
+  grandTotalLabel: {
+    flex: 3,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+  },
+  grandTotalValue: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 0,
+  },
+  allocationSection: {
+    marginBottom: 15,
+  },
+  allocationTable: {
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerTable: {
+    marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  innerCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  footer: {
+    marginTop: 30,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  footerCompany: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    flex: 1,
+    color: '#1f74bf',
+  },
+  specialInstructionTable: {
+    width: '60%',
+    maxWidth: 300,
+    borderWidth: 1,
+    borderColor: '#000000',
+    flex: 1,
+  },
+});
+
+export default pdfStyles;

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -23,7 +23,7 @@ import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -85,12 +85,19 @@ const KandangsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    initial: {
+      search: '',
+      nameSort: '',
+      locationSort: '',
+      capacitySort: '',
+      picSort: '',
+    },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       locationSort: 'sort_location',
+      capacitySort: 'sort_capacity',
       picSort: ' sort_pic',
     },
   });
@@ -130,6 +137,11 @@ const KandangsTable = () => {
       header: 'Lokasi',
       cell: (props) => props.row.original.location.name,
     },
+    {
+      accessorKey: 'capacity',
+      header: 'Kapasitas',
+      cell: (props) => formatNumber(props.row.original.capacity ?? 0),
+    },
     {
       accessorKey: 'pic',
       header: 'PIC',

src/components/pages/master-data/kandang/form/KandangForm.schema.ts

@@ -1,22 +1,48 @@
 import * as Yup from 'yup';
 
-export const KandangFormSchema = Yup.object({
+type KandangFormSchemaType = {
-  name: Yup.string().required('Nama wajib diisi!'),
+  name: string;
+  locationId: number | undefined;
+  location:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  capacity: number | undefined;
+  picId: number | undefined;
+  pic:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+};
 
-  locationId: Yup.number()
+export const KandangFormSchema: Yup.ObjectSchema<KandangFormSchemaType> =
-    .min(1, 'Lokasi wajib diisi!')
+  Yup.object({
-    .required('Lokasi wajib diisi!'),
+    name: Yup.string().required('Nama wajib diisi!'),
-  location: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
 
-  picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
+    locationId: Yup.number()
-  pic: Yup.object({
+      .min(1, 'Lokasi wajib diisi!')
-    value: Yup.number().min(1).required(),
+      .required('Lokasi wajib diisi!'),
-    label: Yup.string().required(),
+    location: Yup.object({
-  }).nullable(),
+      value: Yup.number().min(1).required(),
-});
+      label: Yup.string().required(),
+    }).nullable(),
+
+    capacity: Yup.number()
+      .min(1, 'Kapasitas wajib diisi!')
+      .required('Kapasitas wajib diisi!'),
+
+    picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
+    pic: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+  });
 
 export const UpdateKandangFormSchema = KandangFormSchema;