feat(FE-331): implement permission guard in project flock

[FEAT/FE][US#334] Slicing and Integrate API Expedition HPP Report Table

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

.gitlab-ci.yml

@@ -73,8 +73,8 @@ stages:
 
       if [ "$CI_COMMIT_BRANCH" = "development" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-PROD"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -122,8 +122,6 @@ build:dev:
   environment:
     name: development
   variables:
-    # NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-    # NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
     NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
     NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
     NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
@@ -141,6 +139,32 @@ deploy:dev:
   environment:
     name: development
     url: https://dev-lti-erp.mbugroup.id
+
+# ====== STAGING (Branch staging) ======
+build:staging:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  environment:
+    name: staging
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
+
+deploy:staging:
+  <<: *deploy_template
+  needs: ['build:staging']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  variables:
+    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
+  environment:
+    name: staging
+    url: https://stg-lti-erp.mbugroup.id
 # ====== PRODUCTION ======
 # build:production:
 #   <<: *build_template

package-lock.json

@@ -14,8 +14,10 @@
         "axios": "^1.12.2",
         "clsx": "^2.1.1",
         "formik": "^2.4.6",
+        "jspdf": "^3.0.4",
+        "jspdf-autotable": "^5.0.2",
         "moment": "^2.30.1",
-        "next": "^15.5.7",
+        "next": "15.5.9",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
@@ -26,6 +28,7 @@
         "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
         "use-debounce": "^10.0.6",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
         "yup": "^1.7.0",
         "zustand": "^5.0.8"
       },
@@ -1082,9 +1085,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
-      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
+      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1844,12 +1847,25 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
@@ -1879,6 +1895,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
@@ -2778,6 +2801,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2927,6 +2960,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3022,6 +3075,18 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3059,6 +3124,16 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
       "license": "MIT"
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3279,6 +3354,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4000,6 +4085,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fast-png/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -4010,6 +4112,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4497,6 +4605,20 @@
       "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
       "license": "ISC"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -4576,6 +4698,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5111,6 +5239,33 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5660,12 +5815,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
-      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
+      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.7",
+        "@next/env": "15.5.9",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -6015,6 +6170,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -6168,6 +6330,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -6328,6 +6500,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -6420,6 +6599,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6769,6 +6958,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6988,6 +7187,16 @@
       "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
       "license": "ISC"
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/swr": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
@@ -7032,6 +7241,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -7406,6 +7625,16 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite-compatible-readable-stream": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
@@ -7535,6 +7764,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.20.3",
+      "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+      "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",

package.json

@@ -17,8 +17,10 @@
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
     "moment": "^2.30.1",
-    "next": "^15.5.7",
+    "next": "15.5.9",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
@@ -29,6 +31,7 @@
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },

src/app/closing/detail/page.tsx

@@ -24,6 +24,11 @@ const ClosingDetailPage = () => {
     () => ClosingApi.getPenjualan(Number(closingId))
   );
 
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -39,7 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -50,6 +55,11 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
         />
       )}
     </div>

src/app/finance/add/page.tsx

@@ -1,16 +0,0 @@
-import FinanceForm from '@/components/pages/finance/form/FinanceForm';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'Finance | Add',
-};
-
-const FinanceAddPage = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <FinanceForm formType='add' />
-    </div>
-  );
-};
-
-export default FinanceAddPage;

src/app/finance/page.tsx

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

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

@@ -14,13 +14,13 @@ const ProjectFlockClosingPage = () => {
   const projectFlockKandangId = searchParams.get('projectFlockKandangId');
 
   const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
-    useSWR(projectFlockKandangId, (id: number) =>
-      ProjectFlockKandangApi.getSingle(id)
+    useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
+      ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
     );
 
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
+    `get-flock-id/${projectFlockId}`,
+    () => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
   );
 
   if (!projectFlockId || !projectFlockKandangId) {

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

@@ -15,7 +15,7 @@ export default function ProjectFlockLayout({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
 
-  const isAdd = pathname.endsWith('/add');
+  const isAdd = pathname.includes('/add');
   const isEdit = pathname.includes('/detail/edit');
   const isDetail = pathname.includes('/detail');
   const isChickin = pathname.includes('/chickin/add/kandang');

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

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

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

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

src/app/report/expense/detail/layout.tsx

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

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

@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;

src/app/report/expense/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+
+const ReportExpense = () => {
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable />
+    </div>
+  );
+};
+
+export default ReportExpense;

src/app/report/logistic-stock/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/report/logistic-stock/page.tsx

@@ -0,0 +1,7 @@
+import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
+
+const LogisticStock = () => {
+  return <LogisticStockTabs />;
+};
+
+export default LogisticStock;

src/app/report/marketing/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/report/marketing/page.tsx

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

src/components/Dropdown.tsx

@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/FloatingActionsButton.tsx

@@ -5,6 +5,8 @@ import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
+import { useAuth } from '@/services/hooks/useAuth';
+
 type FloatingActionsButtonProps = {
   actions: {
     action: 'DETAIL' | 'EDIT' | 'DELETE';
@@ -13,6 +15,7 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -20,6 +23,7 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -31,9 +35,12 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
+  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
-    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';
+    selectedRowIds.length > 0
+      ? 'bottom-[10%] opacity-100'
+      : 'bottom-[-10%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -69,7 +76,18 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .filter((action) => !action.hidden)
+                .filter((action) => {
+                  if (action.hidden) return false;
+                  if (action.permissions) {
+                    if (typeof action.permissions === 'string') {
+                      return permissionCheck(action.permissions);
+                    }
+                    return action.permissions.some((permission) =>
+                      permissionCheck(permission)
+                    );
+                  }
+                  return true;
+                })
                 .map((action, index) => {
                   return (
                     <Button
@@ -109,29 +127,41 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals.map((approval, index) => (
-            <Button
-              key={index}
-              onClick={approval.onClick}
-              className={cn(
-                'btn btn-lg w-full',
-                'bg-white/20 border-white/30',
-                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
-                approval.disabled
-                  ? 'cursor-not-allowed'
-                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
-              )}
-              disabled={approval.disabled}
-            >
-              <Icon
-                icon={approval.icon}
-                width={20}
-                height={20}
-                className={`text-${getApprovalColor(approval.action)}`}
-              />
-              {approval.label || approval.action}
-            </Button>
-          ))}
+          {approvals
+            .filter((approval) => {
+              if (approval.permissions) {
+                if (typeof approval.permissions === 'string') {
+                  return permissionCheck(approval.permissions);
+                }
+                return approval.permissions.some((permission) =>
+                  permissionCheck(permission)
+                );
+              }
+              return true;
+            })
+            .map((approval, index) => (
+              <Button
+                key={index}
+                onClick={approval.onClick}
+                className={cn(
+                  'btn btn-lg w-full',
+                  'bg-white/20 border-white/30',
+                  'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                  approval.disabled
+                    ? 'cursor-not-allowed'
+                    : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
+                )}
+                disabled={approval.disabled}
+              >
+                <Icon
+                  icon={approval.icon}
+                  width={20}
+                  height={20}
+                  className={`text-${getApprovalColor(approval.action)}`}
+                />
+                {approval.label || approval.action}
+              </Button>
+            ))}
         </div>
       </div>
     </div>

src/components/MainDrawer.tsx

@@ -9,10 +9,13 @@ import Drawer from '@/components/Drawer';
 import Navbar from '@/components/Navbar';
 import Button from '@/components/Button';
 import SidebarMenu from '@/components/molecules/SidebarMenu';
+import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
 import { isPathActive } from '@/lib/helper';
+import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const MainDrawerContent = () => {
   const pathname = usePathname();
@@ -62,6 +65,11 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
+  const { permissionCheck } = useAuth();
+
+  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+    permissionCheck(permission)
+  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -101,6 +109,10 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
+  if (!isPermitted) {
+    return <PermissionNotFound />;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@iconify/react';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
+import Dropdown from '@/components/Dropdown';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
@@ -54,7 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          position='bottom-end'
+          align='end'
+          direction='bottom'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -62,9 +63,11 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          contentClassName='w-52 mt-3'
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+          <Menu>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

src/components/Table.tsx

@@ -60,6 +60,12 @@ export interface TableProps<TData extends object> {
   renderFooter?: boolean;
   withCheckbox?: boolean;
   rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -112,6 +118,7 @@ const Table = <TData extends object>({
   renderFooter = false,
   withCheckbox = false,
   rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -305,24 +312,35 @@ const Table = <TData extends object>({
           </thead>
 
           <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={tableClassNames.bodyRowClassName}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={cn(
-                      { 'first:w-9 first:pr-0': withCheckbox },
-                      tableClassNames.bodyColumnClassName
-                    )}
-                  >
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+            {table.getRowModel().rows.map((row) => {
+              const customRowContent = renderCustomRow?.(row);
 
-                    {isLoading && <div className='skeleton w-full h-4' />}
-                  </td>
-                ))}
-              </tr>
-            ))}
+              if (customRowContent) {
+                return renderCustomRow?.(row);
+              }
+
+              return (
+                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={cn(
+                        { 'first:w-9 first:pr-0': withCheckbox },
+                        tableClassNames.bodyColumnClassName
+                      )}
+                    >
+                      {!isLoading &&
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+
+                      {isLoading && <div className='skeleton w-full h-4' />}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
           </tbody>
           <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (

src/components/Tabs.tsx

@@ -21,6 +21,7 @@ export interface TabsProps
   className?:
     | string
     | {
+        container?: string;
         wrapper?: string;
         tab?: string;
         content?: string;
@@ -53,10 +54,14 @@ const Tabs = ({
     onTabChange?.(tabId);
   };
 
-  const { wrapper: wrapperClassName, tab: tabClassName } =
-    typeof className === 'object'
-      ? className
-      : { wrapper: className, tab: undefined };
+  const {
+    container: containerClassName,
+    wrapper: wrapperClassName,
+    tab: tabClassName,
+    content: contentClassName,
+  } = typeof className === 'object'
+    ? className
+    : { wrapper: className, tab: undefined };
 
   const getTabsClasses = () => {
     const variantClasses: Record<string, string> = {
@@ -104,7 +109,7 @@ const Tabs = ({
       {...props}
       className={cn(
         'w-full',
-        typeof className === 'string' ? className : undefined
+        typeof className === 'string' ? className : containerClassName
       )}
     >
       <div role='tablist' className={getTabsClasses()}>
@@ -121,7 +126,9 @@ const Tabs = ({
         ))}
       </div>
 
-      {activeContent && <div className='mt-4'>{activeContent}</div>}
+      {activeContent && (
+        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
+      )}
     </div>
   );
 };

src/components/dropdown/Dropdown.tsx

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

src/components/helper/PermissionNotFound.tsx

@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+  return (
+    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <p className='text-gray-600 text-center'>
+        You do not have permission to access this page.
+      </p>
+    </div>
+  );
+};
+
+export default PermissionNotFound;

src/components/helper/RequireAuth.tsx

@@ -27,6 +27,9 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
+
+    // refresh every 13 minutes
+    refreshInterval: 13 * 60 * 1000,
   });
 
   useEffect(() => {

src/components/helper/RequirePermission.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+  children: React.ReactNode;
+  permissions: string | string[];
+}
+
+const RequirePermission = ({
+  children,
+  permissions,
+}: RequirePermissionProps) => {
+  const { permissionCheck } = useAuth();
+
+  const isPermitted =
+    typeof permissions === 'string'
+      ? permissionCheck(permissions)
+      : permissions.some((permission) => permissionCheck(permission));
+
+  if (!isPermitted) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequirePermission;

src/components/input/DebouncedTextInput.tsx

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

src/components/menu/MenuItem.tsx

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

src/components/molecules/SidebarMenu.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import Menu from '@/components/menu/Menu';
 import { Icon } from '@iconify/react';
 import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
 
 export interface SidebarMenuItem {
   type?: 'item' | 'title';
@@ -9,6 +10,7 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
+  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -22,8 +24,17 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
   const isItemActive = isPathActive(activeLink, item.link);
 
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
   const menuItemWithoutSubmenu = (
     <li>
       <Link
@@ -78,13 +89,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => (
-        <SidebarMenuItem
-          key={menuIdx}
-          item={menuItem}
-          activeLink={activeLink}
-        />
-      ))}
+      {menu.map((menuItem, menuIdx) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
     </Menu>
   );
 };

src/components/pages/ApprovalSteps.tsx

@@ -144,33 +144,45 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
 
 export const formatGroupedApprovalsToApprovalSteps = (
   approvalLine: ApprovalLine,
-  groupedApprovals: BaseGroupedApproval[],
-  latestApproval: BaseApproval
+  groupedApprovals: BaseGroupedApproval[] | undefined,
+  latestApproval: BaseApproval | undefined
 ): ApprovalStepsProps['approvals'] => {
   const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
     approvalLine.map((approvalLineItem) => {
-      const approvalGroup = groupedApprovals.find(
+      const approvalGroup = groupedApprovals?.find(
         (approvalGroupItem) =>
           approvalGroupItem.step_number === approvalLineItem.step_number
       );
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1]?.step_number;
+        groupedApprovals?.[groupedApprovals.length - 1]?.step_number;
 
-      const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
+      const isLatestApprovalRejected = latestApproval?.action === 'REJECTED';
 
-      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
-        throw new Error(
-          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
-        );
+      // Only throw error if we have a valid lastStepNumber to compare against
+      if (
+        !approvalGroup &&
+        lastStepNumber !== undefined &&
+        currentStepNumber <= lastStepNumber
+      ) {
+        // throw new Error(
+        //   `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        // );
       }
 
       if (!approvalGroup) {
-        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+        // Check if this step is waiting (only if we have latestApproval)
+        const isWaiting =
+          latestApproval?.step_number !== undefined &&
+          currentStepNumber === latestApproval.step_number + 1;
+
+        // Check if previous approval was rejected
         const isPreviousApprovalRejected =
-          groupedApprovals[groupedApprovals.length - 1].approvals[0].action ===
-          'REJECTED';
+          groupedApprovals &&
+          groupedApprovals.length > 0 &&
+          groupedApprovals[groupedApprovals.length - 1]?.approvals?.[0]
+            ?.action === 'REJECTED';
 
         return {
           name: approvalLineItem.step_name,
@@ -184,7 +196,11 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       let approvalStatus: ApprovalStepStatus = 'IDLE';
 
-      if (approvalGroup.step_number <= latestApproval.step_number) {
+      // Only compare if latestApproval and its step_number exist
+      if (
+        latestApproval?.step_number !== undefined &&
+        approvalGroup.step_number <= latestApproval.step_number
+      ) {
         if (approvalGroup.approvals) {
           switch (approvalGroup?.approvals[0]?.action) {
             case 'CREATED':
@@ -203,6 +219,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
           }
         }
       } else if (
+        latestApproval?.step_number !== undefined &&
         approvalGroup.step_number === latestApproval.step_number + 1 &&
         !isLatestApprovalRejected
       ) {
@@ -353,14 +370,33 @@ const useApprovalSteps = ({
 
   // Formatting Akhir
   const approvals = useMemo(() => {
-    if (isLoading || !approvalLines.length || !latestApproval) {
+    if (isLoading || !approvalLines.length) {
       return [];
     }
+
+    // Try to derive latestApproval from groupedApprovals if not provided
+    let effectiveLatestApproval = latestApproval;
+
+    if (!effectiveLatestApproval && groupedApprovals.length > 0) {
+      // Get all approvals from grouped data
+      const allApprovals = groupedApprovals.flatMap((group) => group.approvals);
+
+      if (allApprovals.length > 0) {
+        // Use the most recent approval (last in array)
+        effectiveLatestApproval = allApprovals[allApprovals.length - 1];
+      }
+    }
+
+    // If still no latestApproval, return empty
+    if (!effectiveLatestApproval) {
+      return [];
+    }
+
     try {
       return formatGroupedApprovalsToApprovalSteps(
         approvalLines,
         groupedApprovals,
-        latestApproval
+        effectiveLatestApproval
       );
     } catch (error) {
       console.warn('Gagal memformat approval steps:', error);

src/components/pages/closing/ClosingDetail.tsx

@@ -6,24 +6,32 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
+import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
 
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
-import ClosingSapronakTabContent from './ClosingSapronakTabContent';
-import SalesReportTable from './sale/SalesReportTable';
+import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
+import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
+import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
 
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
 }
 
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
   salesData,
+  hppExpeditionData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -37,7 +45,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'perhitunganSapronak',
         label: 'Perhitungan Sapronak',
-        content: 'Perhitungan Sapronak',
+        content: <ClosingSapronakCalculationTabContent projectFlockId={id} />,
       },
       {
         id: 'penjualan',
@@ -47,22 +55,22 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'overhead',
         label: 'Overhead',
-        content: 'Overhead',
+        content: <ClosingOverheadTabContent projectFlockId={id} />,
       },
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: 'HPP Ekspedisi',
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: 'Data Produksi',
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
       },
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: 'Keuangan',
+        content: <ClosingFinanceTabContent projectFlockId={id} />,
       },
     ];
 

src/components/pages/closing/ClosingFinanceTabContent.tsx

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

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -0,0 +1,495 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import {
+  DataSummarySubTotal,
+  HppPurchaseData,
+  ProfitLossDataAmount,
+} from '@/types/api/closing';
+import useSWR from 'swr';
+
+type HppTableRow =
+  | (HppPurchaseData & {
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      budgeting?: never;
+      realization?: never;
+    };
+
+type ProfitLossTableRow =
+  | (DataSummarySubTotal & {
+      type: string;
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      rp_per_bird?: never;
+      rp_per_kg?: never;
+      amount?: never;
+    };
+
+const ClosingFinanceTable = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  const { data: finance, isLoading } = useSWR(
+    `/closing/finance/${projectFlockId}`,
+    () => ClosingApi.getFinance(projectFlockId)
+  );
+
+  const hppTableData: HppTableRow[] = isResponseSuccess(finance)
+    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
+        // Group header row
+        {
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          isGroupHeader: true as const,
+        },
+        // Data rows
+        ...hpp.data.map((item) => ({
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          type: item.type,
+          budgeting: item.budgeting,
+          realization: item.realization,
+          isGroupHeader: false as const,
+        })),
+      ])
+    : [];
+
+  const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
+    ? [
+        // Pembelian group
+        ...finance.data.profit_loss.data.pembelian.map((item) => ({
+          label: 'Pembelian',
+          group_name: 'Pembelian',
+          group_index: 1,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.gross_profit.label,
+          group_name: 'Penjualan',
+          group_index: 0,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.gross_profit.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
+          rp_per_kg:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
+        },
+        // Penjualan group
+        ...finance.data.profit_loss.data.penjualan.map((item) => ({
+          label: 'Penjualan',
+          group_name: 'Penjualan',
+          group_index: 0,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.sub_total.label,
+          group_name: 'Pembelian',
+          group_index: 1,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.sub_total.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.sub_total.rp_per_bird,
+          rp_per_kg: finance.data.profit_loss.data.summary.sub_total.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.sub_total.amount,
+        },
+      ]
+    : [];
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-6'>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.gross_profit
+                        .label || '-'
+                    )
+                  : 'Laba Rugi Brutto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.gross_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.net_profit.label ||
+                        '-'
+                    )
+                  : 'Laba Rugi Netto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.net_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.hpp_purchases.title
+              : 'HPP Purchases'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<HppTableRow>
+              data={hppTableData}
+              columns={[
+                {
+                  header: 'No.',
+                  enableSorting: false,
+                  accessorFn: (item, index) => {
+                    if (item.isGroupHeader) return '-';
+                    const dataRowsBefore = hppTableData
+                      .slice(0, index)
+                      .filter((row) => !row.isGroupHeader).length;
+                    return dataRowsBefore + 1;
+                  },
+                  footer: (props) => {
+                    return 'HPP';
+                  },
+                },
+                {
+                  header: 'Type',
+                  enableSorting: false,
+                  accessorFn: (item) => formatTitleCase(item.type || '-'),
+                },
+                {
+                  header: 'Budgeting',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'budgeting_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'budgeting_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'budgeting_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+                {
+                  header: 'Realization',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'realization_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'realization_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'realization_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      ></td>
+                      <td
+                        colSpan={7}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.profit_loss.title
+              : 'Profit/Loss'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<ProfitLossTableRow>
+              data={profitLossTableData}
+              columns={[
+                {
+                  header: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => item.type,
+                  cell: (item) => (
+                    <div className=''>
+                      {formatTitleCase(item.row.original.type || '-')}
+                    </div>
+                  ),
+                  footer: (item) => (
+                    <div className='font-bold uppercase'>
+                      {isResponseSuccess(finance)
+                        ? formatTitleCase(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .label || '-'
+                          )
+                        : '-'}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Ekor',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_bird || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Kg',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_kg || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Jumlah (Rp)',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.amount || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .amount || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  if (rowData.amount) {
+                    return (
+                      <tr
+                        key={row.id}
+                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
+                      >
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold ps-6 uppercase'>
+                            {formatTitleCase(rowData.label ?? '-')}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_bird ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_kg ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.amount ?? 0)}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  }
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        colSpan={4}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              className={{
+                paginationClassName: 'hidden',
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+      </>
+    </div>
+  );
+};
+
+export default ClosingFinanceTable;

src/components/pages/closing/ClosingOverheadTabContent.tsx

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

src/components/pages/closing/ClosingOverheadTable.tsx

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

src/components/pages/closing/ClosingProductionDataTabContent.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+
+interface ClosingProductionDataTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingProductionDataTabContent = ({
+  projectFlockId,
+}: ClosingProductionDataTabContentProps) => {
+  const { data: productionData, isLoading } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
+    () => ClosingApi.getProductionData(projectFlockId)
+  );
+
+  if (isLoading) {
+    return (
+      <div className='w-full flex justify-center py-8'>
+        <span className='loading loading-spinner loading-lg' />
+      </div>
+    );
+  }
+
+  if (!productionData || !isResponseSuccess(productionData)) {
+    return (
+      <div className='w-full text-center py-8 text-gray-500'>
+        Gagal memuat data produksi.
+      </div>
+    );
+  }
+
+  const { purchase, sales, performance } = productionData.data;
+
+  // Helper for consistent row styling
+  const DataRow = ({
+    label,
+    value,
+    unit = '',
+    valueClassName = 'font-bold text-gray-800',
+    unitClassName = 'text-gray-500 w-12 text-right',
+  }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    valueClassName?: string;
+    unitClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <span className={valueClassName}>{value}</span>
+        {unit && <span className={unitClassName}>{unit}</span>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className='w-full rounded-xl p-8 shadow-sm'>
+      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+        {/* Left Column */}
+        <div className='space-y-10'>
+          {/* Purchase Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Pembelian
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Populasi Awal'
+                value={formatNumber(purchase.initial_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Claim Culling'
+                value={formatNumber(purchase.claim_culling)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Populasi Akhir'
+                value={formatNumber(purchase.final_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Pakan Masuk'
+                value={formatNumber(purchase.feed_in)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai'
+                value={formatNumber(purchase.feed_used)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai per Ekor'
+                value={formatNumber(purchase.feed_used_per_head)}
+                unit='Kg'
+              />
+            </div>
+          </section>
+
+          {/* Sales Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Penjualan
+            </h3>
+            <div className='space-y-4'>
+              {/* Chicken Sales */}
+              <div className='space-y-1'>
+                <DataRow
+                  label='Penjualan (Ekor)'
+                  value={formatNumber(sales.chicken.sales_population)}
+                  unit='Ekor'
+                />
+                <DataRow
+                  label='Penjualan (Kg)'
+                  value={formatNumber(sales.chicken.sales_weight)}
+                  unit='Kg'
+                />
+                <DataRow
+                  label='Bobot Rata-Rata'
+                  value={formatNumber(sales.chicken.average_weight)}
+                  unit='Kg/Ekor'
+                />
+                <DataRow
+                  label='Harga Jual Rata-Rata'
+                  value={formatNumber(
+                    sales.chicken.chicken_average_selling_price
+                  )}
+                  unit='Rupiah'
+                />
+              </div>
+
+              {/* Egg Sales (if available) */}
+              {sales.egg && (
+                <>
+                  <div className='h-px bg-gray-100 my-2' />
+                  <div className='space-y-1'>
+                    <DataRow
+                      label='Telur (Butir)'
+                      value={formatNumber(sales.egg.egg_pieces)}
+                      unit='Butir'
+                    />
+                    <DataRow
+                      label='Telur (Kg)'
+                      value={formatNumber(sales.egg.egg_mass_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Berat Telur Rata-Rata'
+                      value={formatNumber(sales.egg.average_egg_weight_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Harga Jual Telur Rata-Rata'
+                      value={formatNumber(sales.egg.egg_average_selling_price)}
+                      unit='Rupiah'
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </section>
+        </div>
+
+        {/* Divider Line (Absolute centered) */}
+        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+
+        {/* Right Column */}
+        <div className='space-y-10 flex flex-col h-full'>
+          {/* Performance Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Performance
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Deplesi'
+                value={formatNumber(performance.depletion)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Umur'
+                value={formatNumber(performance.age_day)}
+                unit='Hari'
+              />
+              <DataRow
+                label='Mortalitas Std'
+                value={formatNumber(performance.mortality_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Mortalitas Act'
+                value={formatNumber(performance.mortality_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF Mortalitas'
+                value={formatNumber(performance.deff_mortality)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Std'
+                value={formatNumber(performance.fcr_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Act'
+                value={formatNumber(performance.fcr_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF FCR'
+                value={formatNumber(performance.deff_fcr)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='AWG'
+                value={formatNumber(performance.awg)}
+                unit='Gr/Hari'
+              />
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingProductionDataTabContent;

src/components/pages/closing/ClosingSapronakCalculationTabContent.tsx

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

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

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

src/components/pages/closing/ClosingsTable.tsx

@@ -15,6 +15,8 @@ import SelectInput, {
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+
 import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -43,17 +45,18 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/closing/detail/?closingId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
+        <RequirePermission permissions='lti.closing.detail'>
+          <Button
+            href={`/closing/detail/?closingId=${props.row.original.id}`}
+            variant='ghost'
+            color='primary'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );

src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          cell: (props) => {
+            const value = props.getValue() as number;
+            return <div className='text-right'>{formatCurrency(value)}</div>;
+          },
+          footer: () => (
+            <div className='text-right font-semibold text-gray-900'>
+              {formatCurrency(totals.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default HppExpeditionReportTable;

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -4,6 +4,7 @@ import toast from 'react-hot-toast';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import DropFileInput from '@/components/input/DropFileInput';
 
@@ -62,16 +63,17 @@ const ExpenseRealizationContent = ({
     <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>
+          <RequirePermission permissions='lti.expense.update.realization'>
+            <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>
+          </RequirePermission>
         </div>
       </div>
 
@@ -124,36 +126,38 @@ const ExpenseRealizationContent = ({
                     )}
                 </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',
-                    }}
-                  />
+                <RequirePermission permissions='lti.expense.document.realization'>
+                  <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>
+                    {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>
+                </RequirePermission>
               </td>
             </tr>
           </tbody>

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -19,6 +19,7 @@ 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 RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { formatCurrency, formatDate } from '@/lib/helper';
@@ -255,100 +256,119 @@ const ExpenseRequestContent = ({
 
           <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>
+              <RequirePermission permissions='lti.expense.approve.manager'>
+                <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>
+              </RequirePermission>
             )}
 
             {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>
+              <RequirePermission permissions='lti.expense.approve.finance'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='tdesign:money' width={24} height={24} />
+                  Approve Finance
+                </Button>
+              </RequirePermission>
             )}
 
             {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>
+              <RequirePermission permissions='lti.expense.complete.expense'>
+                <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>
+              </RequirePermission>
             )}
 
             {showRejectButton && (
-              <Button
-                variant='outline'
-                color='error'
-                onClick={rejectClickHandler}
-                className='w-full:w-fit'
+              <RequirePermission
+                permissions={[
+                  'lti.expense.approve.manager',
+                  'lti.expense.approve.finance',
+                ]}
               >
-                <Icon icon='material-symbols:close' width={24} height={24} />
-                Reject
-              </Button>
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={rejectClickHandler}
+                  className='w-full:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             )}
 
             {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>
+              <RequirePermission permissions='lti.expense.create.realization'>
+                <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>
+              </RequirePermission>
             )}
 
             <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>
+                <RequirePermission permissions='lti.expense.update'>
+                  <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>
+                </RequirePermission>
               )}
 
-              <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>
+              <RequirePermission permissions='lti.expense.delete'>
+                <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>
+              </RequirePermission>
             </div>
           </div>
 
@@ -485,36 +505,42 @@ const ExpenseRequestContent = ({
                         )}
                     </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',
-                        }}
-                      />
+                    <RequirePermission permissions='lti.expense.document'>
+                      <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>
+                        {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>
+                    </RequirePermission>
                   </td>
                 </tr>
               </tbody>

src/components/pages/expense/ExpensesTable.tsx

@@ -28,6 +28,7 @@ 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 RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
@@ -67,58 +68,70 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/expense/detail/?expenseId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-
-        {showEditButton && (
+        <RequirePermission permissions='lti.expense.detail'>
           <Button
-            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+            href={`/expense/detail/?expenseId=${props.row.original.id}`}
             variant='ghost'
-            color='warning'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+
+        {showEditButton && (
+          <RequirePermission permissions='lti.expense.update'>
+            <Button
+              href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
 
         {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>
+          <RequirePermission permissions='lti.expense.create.realization'>
+            <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>
+          </RequirePermission>
         )}
 
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.expense.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -559,57 +572,70 @@ const ExpensesTable = () => {
           <div className='flex flex-col gap-2 mb-4'>
             <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
               <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-                <Button
-                  href='/expense/add'
-                  variant='outline'
-                  color='primary'
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
-                </Button>
+                <RequirePermission permissions='lti.expense.create'>
+                  <Button
+                    href='/expense/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
 
                 {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>
+                    <RequirePermission permissions='lti.expense.approve.manager'>
+                      <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>
+                    </RequirePermission>
 
-                    <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>
+                    <RequirePermission permissions='lti.expense.approve.finance'>
+                      <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>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={bulkRejectClickHandler}
-                      disabled={
-                        !isAllSelectedRowLatestApprovalOnManager &&
-                        !isAllSelectedRowLatestApprovalOnFinance
-                      }
-                      className='w-full sm:w-fit'
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.manager',
+                        'lti.expense.approve.finance',
+                      ]}
                     >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </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>
+                    </RequirePermission>
                   </>
                 )}
               </div>

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

@@ -16,6 +16,7 @@ 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 RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   CreateExpenseRealizationPayload,
@@ -290,21 +291,23 @@ const ExpenseRealizationForm = ({
             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',
-            }}
-          />
+          <RequirePermission permissions='lti.expense.document.realization'>
+            <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',
+              }}
+            />
+          </RequirePermission>
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -357,20 +360,22 @@ const ExpenseRealizationForm = ({
           {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>
+                <RequirePermission permissions='lti.expense.update'>
+                  <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>
+                </RequirePermission>
               )}
             </div>
           )}

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

@@ -18,6 +18,7 @@ import DateInput from '@/components/input/DateInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseRequestKandangDetailExpense from '@/components/pages/expense/form/ExpenseRequestKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ExpenseRequestFormSchema,
@@ -385,21 +386,23 @@ const ExpenseRequestForm = ({
               className={{ wrapper: 'col-span-12' }}
             />
 
-            <DropFileInput
-              label='Dokumen Pengajuan'
-              name='documents'
-              values={formik.values.documents}
-              onChange={requestDocumentsChangeHandler}
-              onDelete={requestDocumentsDeleteHandler}
-              accept={{
-                ...ACCEPTED_FILE_TYPE.PDF,
-                ...ACCEPTED_FILE_TYPE.IMAGE,
-              }}
-              className={{
-                wrapper: 'col-span-12',
-                inputWrapper: 'h-12 flex items-center',
-              }}
-            />
+            <RequirePermission permissions='lti.expense.document'>
+              <DropFileInput
+                label='Dokumen Pengajuan'
+                name='documents'
+                values={formik.values.documents}
+                onChange={requestDocumentsChangeHandler}
+                onDelete={requestDocumentsDeleteHandler}
+                accept={{
+                  ...ACCEPTED_FILE_TYPE.PDF,
+                  ...ACCEPTED_FILE_TYPE.IMAGE,
+                }}
+                className={{
+                  wrapper: 'col-span-12',
+                  inputWrapper: 'h-12 flex items-center',
+                }}
+              />
+            </RequirePermission>
 
             {formik.values.existing_documents &&
               formik.values.existing_documents.length > 0 && (
@@ -461,36 +464,40 @@ const ExpenseRequestForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteExpenseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.expense.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteExpenseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.expense.update'>
+                    <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>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/finance/FinancesTable.tsx

@@ -1,472 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useEffect, useState } from 'react';
-import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import Button from '@/components/Button';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import DateInput from '@/components/input/DateInput';
-import { cn, formatCurrency, formatDate } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { FinanceApi } from '@/services/api/finance';
-import { Finance } from '@/types/api/finance';
-import {
-  BankApi,
-  CustomerApi,
-  KandangApi,
-  SupplierApi,
-} from '@/services/api/master-data';
-import { Customer } from '@/types/api/master-data/customer';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Bank } from '@/types/api/master-data/bank';
-
-type FinanceTableFilter = {
-  search: string;
-  nameSort: string;
-  transactionType: string;
-  customerId: string;
-  supplierId: string;
-  kandangId: string;
-  bankId: string;
-  sortBy: string;
-  startDate: string;
-  endDate: string;
-};
-
-const TRANSACTION_TYPE_OPTIONS = [
-  { value: 'REVENUE', label: 'Pemasukan' },
-  { value: 'EXPENSE', label: 'Pengeluaran' },
-];
-
-const SORT_OPTIONS = [
-  { value: 'payment_date', label: 'Tanggal Pembayaran' },
-  { value: 'created_date', label: 'Tanggal Dibuat' },
-];
-
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Finance, unknown>;
-}) => {
-  return (
-    <RowOptionsMenuWrapper type={type}>
-      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/finance/edit/${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
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm'
-          // Implement delete handler later
-        >
-          <Icon icon='mdi:delete-outline' width={16} height={16} />
-          Delete
-        </Button>
-      </div>
-    </RowOptionsMenuWrapper>
-  );
-};
-
-const FinancesTable = () => {
-  const {
-    state: tableFilterState,
-    updateFilter,
-    reset: resetFilter,
-    setPage,
-    setPageSize,
-    toQueryString: getTableFilterQueryString,
-  } = useTableFilter<FinanceTableFilter>({
-    initial: {
-      search: '',
-      nameSort: '',
-      transactionType: '',
-      customerId: '',
-      supplierId: '',
-      kandangId: '',
-      bankId: '',
-      sortBy: '',
-      startDate: '',
-      endDate: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-      nameSort: 'sort_name',
-      transactionType: 'transaction_type',
-      customerId: 'customer_id',
-      supplierId: 'supplier_id',
-      kandangId: 'kandang_id',
-      bankId: 'bank_id',
-      sortBy: 'sort_by',
-      startDate: 'start_date',
-      endDate: 'end_date',
-    },
-  });
-
-  const { data: finances, isLoading: isLoadingFinances } = useSWR(
-    `${FinanceApi.basePath}${getTableFilterQueryString()}`,
-    FinanceApi.getAllFetcher
-  );
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-
-  // Filter Selection States
-  const [selectedTransactionType, setSelectedTransactionType] =
-    useState<OptionType | null>(null);
-  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
-    null
-  );
-  const [selectedSupplier, setSelectedSupplier] = useState<OptionType | null>(
-    null
-  );
-  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
-    null
-  );
-  const [selectedBank, setSelectedBank] = useState<OptionType | null>(null);
-  const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
-
-  // APIs for SelectInputs
-  const {
-    options: customerOptions,
-    isLoadingOptions: isLoadingCustomerOptions,
-    setInputValue: setCustomerInputValue,
-  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
-
-  const {
-    options: supplierOptions,
-    isLoadingOptions: isLoadingSupplierOptions,
-    setInputValue: setSupplierInputValue,
-  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
-
-  const {
-    options: kandangOptions,
-    isLoadingOptions: isLoadingKandangOptions,
-    setInputValue: setKandangInputValue,
-  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
-
-  const {
-    options: bankOptions,
-    isLoadingOptions: isLoadingBankOptions,
-    setInputValue: setBankInputValue,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name');
-
-  const financeColumns: ColumnDef<Finance>[] = [
-    {
-      header: '#',
-      cell: (props) => props.row.index + 1,
-    },
-    {
-      accessorKey: 'reference_number',
-      header: 'No Referensi',
-    },
-    {
-      accessorKey: 'transaction_type',
-      header: 'Jenis Transaksi',
-    },
-    {
-      accessorKey: 'customer_name',
-      header: 'Pelanggan',
-    },
-    {
-      accessorKey: 'payment_date',
-      header: 'Tanggal Pembayaran',
-      cell: (props) =>
-        formatDate(props.row.original.payment_date, 'DD MMM YYYY'),
-    },
-    {
-      accessorKey: 'created_date',
-      header: 'Tanggal Dibuat',
-      cell: (props) =>
-        formatDate(props.row.original.created_date, 'DD MMM YYYY'),
-    },
-    {
-      accessorKey: 'payment_method',
-      header: 'Metode Pembayaran',
-    },
-    {
-      accessorKey: 'bank_name',
-      header: 'Bank',
-    },
-    {
-      accessorKey: 'expense_amount',
-      header: 'Pengeluaran',
-      cell: (props) => (
-        <span className='text-error'>
-          {formatCurrency(props.row.original.expense_amount)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'revenue_amount',
-      header: 'Pemasukan',
-      cell: (props) => (
-        <span className='text-success'>
-          {formatCurrency(props.row.original.revenue_amount)}
-        </span>
-      ),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-        const currentRowRelativeIndex =
-          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
-
-        return (
-          <>
-            {currentPageSize > 3 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu type='dropdown' props={props} />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 3 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu type='collapse' props={props} />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
-  const handleFilterChange = (
-    value: OptionType | null,
-    setter: (val: OptionType | null) => void,
-    filterKey: keyof FinanceTableFilter
-  ) => {
-    setter(value);
-    updateFilter(filterKey, value ? String(value.value) : '');
-  };
-
-  const resetFilters = () => {
-    setSelectedTransactionType(null);
-    setSelectedCustomer(null);
-    setSelectedSupplier(null);
-    setSelectedKandang(null);
-    setSelectedBank(null);
-    setSelectedSortBy(null);
-
-    resetFilter();
-  };
-
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '');
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
-  return (
-    <div className='w-full p-0 sm:p-4'>
-      <div className='flex flex-col gap-4 mb-4'>
-        {/* Row 1: Search and Add Button */}
-        <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
-          <Button
-            href='/finance/add'
-            variant='outline'
-            color='primary'
-            className='w-full sm:w-fit'
-          >
-            <Icon icon='ic:round-plus' width={24} height={24} />
-            Tambah
-          </Button>
-          <DebouncedTextInput
-            name='search'
-            placeholder='Search'
-            value={tableFilterState.search}
-            onChange={searchChangeHandler}
-            className={{ wrapper: 'w-full sm:max-w-xs' }}
-          />
-        </div>
-
-        {/* Row 2: Transaction Type, Customer, Supplier, Mitra */}
-        <div className='grid grid-cols-12 gap-4'>
-          <SelectInput
-            label='Jenis Transaksi'
-            placeholder='Semua Jenis Transaksi'
-            options={TRANSACTION_TYPE_OPTIONS}
-            value={selectedTransactionType}
-            onChange={(val) =>
-              handleFilterChange(
-                val as OptionType,
-                setSelectedTransactionType,
-                'transactionType'
-              )
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <SelectInput
-            label='Customer'
-            placeholder='Pilih Customer'
-            options={customerOptions}
-            isLoading={isLoadingCustomerOptions}
-            onInputChange={setCustomerInputValue}
-            value={selectedCustomer}
-            onChange={(val) =>
-              handleFilterChange(
-                val as OptionType,
-                setSelectedCustomer,
-                'customerId'
-              )
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <SelectInput
-            label='Supplier'
-            placeholder='Pilih Supplier'
-            options={supplierOptions}
-            isLoading={isLoadingSupplierOptions}
-            onInputChange={setSupplierInputValue}
-            value={selectedSupplier}
-            onChange={(val) =>
-              handleFilterChange(
-                val as OptionType,
-                setSelectedSupplier,
-                'supplierId'
-              )
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <SelectInput
-            label='Mitra'
-            placeholder='Pilih Kandang Mitra'
-            options={kandangOptions}
-            isLoading={isLoadingKandangOptions}
-            onInputChange={setKandangInputValue}
-            value={selectedKandang}
-            onChange={(val) =>
-              handleFilterChange(
-                val as OptionType,
-                setSelectedKandang,
-                'kandangId'
-              )
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-        </div>
-
-        {/* Row 3: Bank, Sort By, Start Date, End Date */}
-        <div className='grid grid-cols-12 gap-4'>
-          <SelectInput
-            label='Bank'
-            placeholder='Pilih Bank'
-            options={bankOptions}
-            isLoading={isLoadingBankOptions}
-            onInputChange={setBankInputValue}
-            value={selectedBank}
-            onChange={(val) =>
-              handleFilterChange(val as OptionType, setSelectedBank, 'bankId')
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <SelectInput
-            label='Urutkan Berdasarkan'
-            placeholder='Tanggal Pembayaran'
-            options={SORT_OPTIONS}
-            value={selectedSortBy}
-            onChange={(val) =>
-              handleFilterChange(val as OptionType, setSelectedSortBy, 'sortBy')
-            }
-            isClearable
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <DateInput
-            name='startDate'
-            label='Tanggal Mulai'
-            placeholder='Pilih Tanggal Mulai'
-            value={tableFilterState.startDate}
-            onChange={(e) => updateFilter('startDate', e.target.value)}
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-          <DateInput
-            name='endDate'
-            label='Tanggal Akhir '
-            placeholder='Pilih Tanggal Selesai'
-            value={tableFilterState.endDate}
-            onChange={(e) => updateFilter('endDate', e.target.value)}
-            className={{ wrapper: 'col-span-12 sm:col-span-3' }}
-          />
-        </div>
-
-        <div className='flex flex-row justify-end items-center'>
-          <div className='flex flex-row gap-2'>
-            <Button
-              onClick={resetFilters}
-              variant='outline'
-              color='warning'
-              className='min-w-20'
-            >
-              Reset
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <Table<Finance>
-        data={isResponseSuccess(finances) ? finances?.data : []}
-        columns={financeColumns}
-        pageSize={tableFilterState.pageSize}
-        onPageSizeChange={setPageSize}
-        rowOptions={[10, 20, 50, 100]}
-        page={isResponseSuccess(finances) ? finances?.meta?.page : 0}
-        totalItems={
-          isResponseSuccess(finances) ? finances?.meta?.total_results : 0
-        }
-        onPageChange={setPage}
-        isLoading={isLoadingFinances}
-        sorting={sorting}
-        setSorting={setSorting}
-        rowSelection={rowSelection}
-        setRowSelection={setRowSelection}
-        className={{
-          containerClassName: cn({
-            'w-full mb-20':
-              isResponseSuccess(finances) && finances?.data?.length === 0,
-          }),
-        }}
-      />
-    </div>
-  );
-};
-
-export default FinancesTable;

src/components/pages/finance/form/FinanceForm.schema.ts

@@ -1,71 +0,0 @@
-'use client';
-import * as Yup from 'yup';
-
-import { OptionType } from '@/components/input/SelectInput';
-import { CreateFinancePayload } from '@/types/api/finance';
-
-export const FinanceFormSchema = Yup.object().shape({
-  transactionType: Yup.object()
-    .shape({
-      value: Yup.string().required(),
-      label: Yup.string().required(),
-    })
-    .nullable()
-    .required('Jenis Transaksi Wajib diisi'),
-  customerId: Yup.number()
-    .nullable()
-    .when('transactionType', {
-      is: (val: { value: string }) => val?.value === 'REVENUE',
-      then: (schema) => schema.required('Customer Wajib diisi'),
-      otherwise: (schema) => schema.notRequired(),
-    }),
-  paymentDate: Yup.string().required('Tanggal Pembayaran Wajib diisi'),
-  paymentMethod: Yup.object()
-    .shape({
-      value: Yup.string().required(),
-      label: Yup.string().required(),
-    })
-    .nullable()
-    .required('Metode Pembayaran Wajib diisi'),
-  bankId: Yup.number()
-    .nullable()
-    .test('required-if-transfer', 'Bank Wajib diisi', function (value) {
-      const paymentMethod = this.parent.paymentMethod;
-      if (paymentMethod?.value === 'TRANSFER' && !value) {
-        return false;
-      }
-      return true;
-    }),
-  supplierBankAccountNumber: Yup.string()
-    .nullable()
-    .test(
-      'required-if-transfer',
-      'Nomor Rekening Customer Wajib diisi',
-      function (value) {
-        const paymentMethod = this.parent.paymentMethod;
-        if (paymentMethod?.value === 'TRANSFER' && !value) {
-          return false;
-        }
-        return true;
-      }
-    ),
-  referenceNumber: Yup.string().nullable(),
-  amount: Yup.number()
-    .typeError('Nominal harus berupa angka')
-    .required('Nominal Wajib diisi'),
-  notes: Yup.string().nullable(),
-});
-
-export type FinanceFormValues = {
-  transactionType: OptionType | null;
-  customerId: number | null;
-  customer: OptionType | null;
-  paymentDate: string;
-  paymentMethod: OptionType | null;
-  bankId: number | null;
-  bank: OptionType | null;
-  supplierBankAccountNumber: string;
-  referenceNumber: string;
-  amount: string;
-  notes: string;
-};

src/components/pages/finance/form/FinanceForm.tsx

@@ -1,386 +0,0 @@
-'use client';
-
-import { useModal } from '@/components/Modal';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { FinanceApi } from '@/services/api/finance';
-import {
-  Finance,
-  CreateFinancePayload,
-  UpdateFinancePayload,
-} from '@/types/api/finance';
-import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-import Button from '@/components/Button';
-import { Icon } from '@iconify/react';
-import TextInput from '@/components/input/TextInput';
-import NumberInput from '@/components/input/NumberInput';
-import { cn } from '@/lib/helper';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import TextArea from '@/components/input/TextArea';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import DateInput from '@/components/input/DateInput';
-import { BankApi, CustomerApi } from '@/services/api/master-data';
-import { Customer } from '@/types/api/master-data/customer';
-import { Bank } from '@/types/api/master-data/bank';
-import {
-  FINANCE_PAYMENT_METHOD_OPTIONS,
-  FINANCE_TRANSACTION_TYPE_OPTIONS,
-} from '@/config/constant';
-import { FinanceFormSchema, FinanceFormValues } from './FinanceForm.schema';
-import Link from 'next/link';
-
-interface FinanceFormProps {
-  formType?: 'add' | 'edit' | 'detail';
-  initialValues?: Finance;
-}
-
-const FinanceForm = ({ formType = 'add', initialValues }: FinanceFormProps) => {
-  const router = useRouter();
-  const deleteModal = useModal();
-
-  const [financeFormErrorMessage, fileFormErrorMessage] = useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  // API Options
-  const {
-    options: customerOptions,
-    isLoadingOptions: isLoadingCustomerOptions,
-    setInputValue: setCustomerInputValue,
-  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
-
-  const {
-    options: bankOptions,
-    isLoadingOptions: isLoadingBankOptions,
-    setInputValue: setBankInputValue,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name');
-
-  const createFinanceHandler = useCallback(
-    async (payload: CreateFinancePayload) => {
-      const createFinanceRes = await FinanceApi.create(payload);
-
-      if (isResponseError(createFinanceRes)) {
-        fileFormErrorMessage(createFinanceRes.message);
-        return;
-      }
-
-      toast.success(createFinanceRes?.message as string);
-      router.push('/finance');
-    },
-    [router]
-  );
-
-  // Note: Update and Delete handlers are not strictly needed for "add" page but good practice to structure for future
-  const deleteFinanceHandler = () => {
-    deleteModal.openModal();
-  };
-
-  const confirmationModalDeleteclickHandler = async () => {
-    // Implement delete logic if needed
-    setIsDeleteLoading(true);
-    // await FinanceApi.delete(initialValues?.id as number);
-    deleteModal.closeModal();
-    setIsDeleteLoading(false);
-    router.push('/finance');
-  };
-
-  const formikInitialValues = useMemo<FinanceFormValues>(() => {
-    return {
-      transactionType: initialValues
-        ? {
-            value: initialValues.transaction_type,
-            label: initialValues.transaction_type,
-          } // Should map properly if labels differ
-        : null,
-      customerId: initialValues ? null : null, // ID not directly in BaseFinance without processing, assume add mode mostly
-      customer: initialValues
-        ? { value: 0, label: initialValues.customer_name }
-        : null,
-      paymentDate: initialValues?.payment_date ?? '',
-      paymentMethod: প্রাথমিকMethods(initialValues?.payment_method),
-      bankId: null,
-      bank: initialValues ? { value: 0, label: initialValues.bank_name } : null,
-      supplierBankAccountNumber: '',
-      referenceNumber: initialValues?.reference_number ?? '',
-      amount: initialValues
-        ? String(initialValues.revenue_amount || initialValues.expense_amount)
-        : '',
-      notes: '',
-    };
-  }, [initialValues]);
-
-  function প্রাথমিকMethods(method?: string) {
-    if (!method) return null;
-    return (
-      FINANCE_PAYMENT_METHOD_OPTIONS.find((o) => o.value === method) ?? {
-        value: method,
-        label: method,
-      }
-    );
-  }
-
-  const formik = useFormik<FinanceFormValues>({
-    initialValues: formikInitialValues,
-    validationSchema: FinanceFormSchema,
-    onSubmit: async (values) => {
-      fileFormErrorMessage('');
-
-      const payload: CreateFinancePayload = {
-        transaction_type: (values.transactionType as OptionType)
-          .value as string,
-        customer_id: values.customer ? (values.customer.value as number) : 0,
-        payment_date: values.paymentDate,
-        payment_method: (values.paymentMethod as OptionType).value as string,
-        bank_id: values.bank ? (values.bank.value as number) : 0,
-        supplier_bank_account_number: values.supplierBankAccountNumber,
-        reference_number: values.referenceNumber,
-        amount: Number(values.amount),
-        notes: values.notes,
-      };
-
-      if (formType === 'add') {
-        await createFinanceHandler(payload);
-      }
-    },
-  });
-
-  const { setValues: formikSetValues } = formik;
-
-  useEffect(() => {
-    if (formType !== 'add' && initialValues) {
-      // Hydrate logic would go here if editing
-    }
-  }, [formType, initialValues]);
-
-  // Helper for select changes
-  const handleSelectChange = (
-    fieldName: keyof FinanceFormValues,
-    val: OptionType | null
-  ) => {
-    formik.setFieldValue(fieldName, val);
-  };
-
-  return (
-    <>
-      <section className='w-full max-w-xl'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/finance'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-
-          <h1 className='text-2xl font-bold text-center'>
-            {formType === 'add' && 'Tambah Keuangan'}
-            {formType === 'edit' && 'Ubah Keuangan'}
-            {formType === 'detail' && 'Detail Keuangan'}
-          </h1>
-        </header>
-
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          <div className='flex flex-col gap-4'>
-            <SelectInput
-              required
-              label='Pilih Jenis Transaksi'
-              placeholder='Pilih Jenis Transaksi'
-              options={FINANCE_TRANSACTION_TYPE_OPTIONS}
-              value={formik.values.transactionType}
-              onChange={(val) =>
-                handleSelectChange('transactionType', val as OptionType)
-              }
-              isError={
-                formik.touched.transactionType &&
-                Boolean(formik.errors.transactionType)
-              }
-              errorMessage={formik.errors.transactionType as string}
-              isDisabled={formType === 'detail'}
-            />
-
-            <SelectInput
-              required
-              label='Customer'
-              placeholder='Pilih Customer'
-              options={customerOptions}
-              isLoading={isLoadingCustomerOptions}
-              onInputChange={setCustomerInputValue}
-              value={formik.values.customer}
-              onChange={(val) =>
-                handleSelectChange('customer', val as OptionType)
-              }
-              isError={
-                formik.touched.customer && Boolean(formik.errors.customer)
-              }
-              errorMessage={formik.errors.customer as string} // Schema logic handles this validation conditionally
-              isDisabled={formType === 'detail'}
-            />
-
-            <DateInput
-              required
-              label='Tanggal Pembayaran'
-              name='paymentDate'
-              placeholder='Pilih Tanggal Pembayaran'
-              value={formik.values.paymentDate}
-              onChange={(e) =>
-                formik.setFieldValue('paymentDate', e.target.value)
-              }
-              isError={
-                formik.touched.paymentDate && Boolean(formik.errors.paymentDate)
-              }
-              errorMessage={formik.errors.paymentDate}
-              readOnly={formType === 'detail'}
-            />
-
-            <SelectInput
-              required
-              label='Metode Pembayaran'
-              placeholder='Pilih Metode Pembayaran'
-              options={FINANCE_PAYMENT_METHOD_OPTIONS}
-              value={formik.values.paymentMethod}
-              onChange={(val) =>
-                handleSelectChange('paymentMethod', val as OptionType)
-              }
-              isError={
-                formik.touched.paymentMethod &&
-                Boolean(formik.errors.paymentMethod)
-              }
-              errorMessage={formik.errors.paymentMethod as string}
-              isDisabled={formType === 'detail'}
-            />
-
-            <SelectInput
-              label='Nomor Rekening'
-              placeholder='Pilih Bank'
-              options={bankOptions}
-              isLoading={isLoadingBankOptions}
-              onInputChange={setBankInputValue}
-              value={formik.values.bank}
-              onChange={(val) => handleSelectChange('bank', val as OptionType)}
-              isError={formik.touched.bank && Boolean(formik.errors.bank)} // Actually controlled by bankId in schema but logic applies
-              errorMessage={formik.errors.bankId as string} // bankId error mapping
-              isDisabled={formType === 'detail'}
-            />
-
-            <TextInput
-              required
-              label='Nomor Rekening Customer' // As per screenshot
-              name='supplierBankAccountNumber'
-              placeholder='Nomor Rekening'
-              value={formik.values.supplierBankAccountNumber}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.supplierBankAccountNumber &&
-                Boolean(formik.errors.supplierBankAccountNumber)
-              }
-              errorMessage={formik.errors.supplierBankAccountNumber}
-              readOnly={formType === 'detail'}
-            />
-
-            <TextInput
-              label='Nomor Referensi'
-              name='referenceNumber'
-              placeholder='Nomor Referensi'
-              value={formik.values.referenceNumber}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.referenceNumber &&
-                Boolean(formik.errors.referenceNumber)
-              }
-              errorMessage={formik.errors.referenceNumber}
-              readOnly={formType === 'detail'}
-            />
-
-            <NumberInput
-              required
-              label='Nominal'
-              name='amount'
-              placeholder='Nominal'
-              value={Number(formik.values.amount)}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.amount && Boolean(formik.errors.amount)}
-              errorMessage={formik.errors.amount}
-              readOnly={formType === 'detail'}
-              inputPrefix={
-                <span className='text-gray-600 font-medium'>Rp</span>
-              }
-            />
-
-            <TextArea
-              required
-              label='Catatan'
-              name='notes'
-              placeholder='Catatan'
-              value={formik.values.notes}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.notes && Boolean(formik.errors.notes)}
-              errorMessage={formik.errors.notes}
-              readOnly={formType === 'detail'}
-            />
-          </div>
-
-          <div className='flex flex-row gap-2'>
-            <Button
-              type='submit'
-              color='primary'
-              isLoading={formik.isSubmitting}
-              disabled={!formik.isValid || !formik.dirty || formik.isSubmitting}
-              className='w-24'
-            >
-              Simpan
-            </Button>
-            <Button
-              type='button'
-              variant='outline'
-              color='warning'
-              href='/finance'
-              className='w-24'
-            >
-              Batal
-            </Button>
-          </div>
-          {financeFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{financeFormErrorMessage}</span>
-            </div>
-          )}
-        </form>
-      </section>
-      {formType !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text={`Apakah anda yakin ingin menghapus data ini?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            onClick: confirmationModalDeleteclickHandler,
-            isLoading: isDeleteLoading,
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default FinanceForm;

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -77,46 +79,39 @@ const InventoryAdjustmentTable = () => {
           year: 'numeric',
         }),
     },
-    {
-      id: 'before_quantity',
-      header: 'Stok Sebelum',
-      accessorFn: (row) => formatNumber(String(row.before_quantity)),
-    },
-    {
-      id: 'after_quantity',
-      header: 'Stok Sesudah',
-      accessorFn: (row) => formatNumber(String(row.after_quantity)),
-    },
+    // {
+    //   id: 'before_quantity',
+    //   header: 'Stok Sebelum',
+    //   accessorFn: (row) =>
+    //     formatNumber(String(row.product_warehouse?.quantity)),
+    // },
+    // {
+    //   id: 'after_quantity',
+    //   header: 'Stok Sesudah',
+    //   accessorFn: (row) =>
+    //     formatNumber(String(row.product_warehouse?.quantity)),
+    // },
     {
       id: 'quantity',
       header: 'Kuantitas',
-      accessorFn: (row) => formatNumber(String(row.quantity)),
+      accessorFn: (row) => formatNumber(String(row.increase + row.decrease)),
     },
     {
       id: 'transaction_type',
       header: 'Tipe Transaksi',
       accessorFn: (row) => {
-        if (row.transaction_type === 'INCREASE') return 'Peningkatan';
-        if (row.transaction_type === 'DECREASE') return 'Penurunan';
+        if (row.increase > 0) return 'Peningkatan';
+        if (row.decrease > 0) return 'Penurunan';
         return '-';
       },
       cell: (props) => {
-        const type = props.row.original.transaction_type;
-        const label =
-          type === 'INCREASE'
-            ? 'Peningkatan'
-            : type === 'DECREASE'
-              ? 'Penurunan'
-              : '-';
+        const type = props.row.original.increase;
+        const label = type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
 
         return (
-          <div
-            className={`small mx-auto badge badge-soft ${
-              type === 'INCREASE' ? 'badge-success' : 'badge-error'
-            }`}
-          >
+          <Badge variant='soft' color={type > 0 ? 'success' : 'error'}>
             {label}
-          </div>
+          </Badge>
         );
       },
     },
@@ -181,15 +176,17 @@ const InventoryAdjustmentTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/inventory/adjustment/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.create'>
+                <Button
+                  href='/inventory/adjustment/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
 
               {/* <DebouncedTextInput
                 name='search'

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

@@ -76,7 +76,7 @@ const InventoryAdjustmentForm = ({
       product_category: undefined,
       product: undefined,
       warehouse: undefined,
-      quantity: initialValues?.quantity ?? 0,
+      quantity: initialValues?.increase ?? initialValues?.decrease ?? 0,
       transaction_type: undefined,
       note: initialValues?.note ?? '',
     };
@@ -214,16 +214,8 @@ const InventoryAdjustmentForm = ({
         'quantity',
         initialValues.product_warehouse.quantity
       );
-      formik.setFieldValue(
-        'transaction_type',
-        initialValues.transaction_type.toLowerCase()
-      );
       formik.setFieldValue('note', initialValues.note);
     }
-    if (initialValues?.transaction_type) {
-      const type = initialValues.transaction_type.toLowerCase();
-      setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
-    }
   }, [
     formik,
     initialValues,
@@ -278,26 +270,6 @@ const InventoryAdjustmentForm = ({
           className='w-full mt-8 flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
-            {/* Text Input Before Quantity */}
-            {type === 'detail' && initialValues && (
-              <>
-                <TextInput
-                  label='Stok Sebelum'
-                  name='before_quantity'
-                  type='text'
-                  value={formatNumber(String(initialValues.before_quantity))}
-                  readOnly={true}
-                />
-                <TextInput
-                  label='Stok Setelah'
-                  name='after_quantity'
-                  type='text'
-                  readOnly={true}
-                  value={formatNumber(String(initialValues.after_quantity))}
-                />
-              </>
-            )}
-
             {/* Select Input Product Category */}
             <SelectInput
               required

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

@@ -19,6 +19,7 @@ import SelectInput from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -28,15 +29,17 @@ const RowOptionsMenu = ({
   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>
+    <RequirePermission permissions='lti.inventory.transfer.detail'>
+      <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>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -145,15 +148,17 @@ const MovementTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row gap-2'>
-              <Button
-                href='/inventory/movement/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.transfer.create'>
+                <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>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/inventory/product/InventoryProductTable.tsx

@@ -7,6 +7,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
@@ -31,15 +32,17 @@ const RowOptionsMenu = ({
   props: CellContext<InventoryProduct, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
+    <RequirePermission permissions='lti.inventory.product_stock.detail'>
+      <Button
+        href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 

src/components/pages/inventory/product/detail/InventoryProductDetail.tsx

@@ -13,8 +13,12 @@ const InventoryProductDetail = ({
 }) => {
   const stockLogs = useMemo(() => {
     return (
-      inventoryProduct?.product_warehouses?.flatMap(
-        (warehouse) => warehouse.stock_logs || []
+      inventoryProduct?.product_warehouses?.flatMap((warehouse) =>
+        warehouse.stock_logs.map((log) => ({
+          ...log,
+          warehouse_name: warehouse.warehouse_name,
+          warehouse_id: warehouse.warehouse_id,
+        }))
       ) || []
     );
   }, [inventoryProduct]);

src/components/pages/inventory/product/detail/StockLogTable.tsx

@@ -3,7 +3,11 @@ import Table from '@/components/Table';
 import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
 import { StockLog } from '@/types/api/inventory/product';
 
-const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
+const StockLogTable = ({
+  stockLogs,
+}: {
+  stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[];
+}) => {
   return (
     <Card
       title='Informasi Stock Produk'
@@ -27,6 +31,10 @@ const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
               return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
             },
           },
+          {
+            header: 'Gudang',
+            accessorKey: 'warehouse_name',
+          },
           {
             header: 'Peningkatan',
             accessorKey: 'increase',

src/components/pages/marketing/MarketingTable.tsx

@@ -26,6 +26,8 @@ import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -50,57 +52,71 @@ const RowsOptionsMenu = ({
       )}
     >
       <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 && (
+        <RequirePermission permissions='lti.marketing.delivery_order.detail'>
           <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?.();
-              }
-            }}
+            href={`/marketing/detail?marketingId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:truck' width={16} height={16} />
-            Deliver
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+        {props.row.original.latest_approval.step_number != 1 && (
+          <RequirePermission
+            permissions={
+              props.row.original.latest_approval.step_number == 3
+                ? 'lti.marketing.delivery_order.update'
+                : 'lti.marketing.delivery_order.create'
+            }
+          >
+            <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>
+          </RequirePermission>
         )}
         {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>
+          <RequirePermission permissions='lti.marketing.sales_order.update'>
+            <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>
+          </RequirePermission>
         )}
-        <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>
+        <RequirePermission permissions='lti.marketing.sales_order.delete'>
+          <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>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -116,6 +132,7 @@ const MarketingTable = () => {
   );
   const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const { permissionCheck } = useAuth();
 
   const router = useRouter();
 
@@ -270,10 +287,14 @@ const MarketingTable = () => {
       <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',
-            }}
+            addButton={
+              permissionCheck('lti.marketing.sales_order.create')
+                ? {
+                    href: '/marketing/add/sales-orders',
+                    label: 'Tambah Sales Order',
+                  }
+                : undefined
+            }
             search={{
               value: search,
               onChange: searchChangeHandler,
@@ -281,25 +302,29 @@ const MarketingTable = () => {
             }}
           />
           <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>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                className='justify-start text-sm'
+                disabled={disableApprove}
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              color='error'
-              onClick={rejectClickHandler}
-              className='justify-start text-sm'
-              disabled={disableReject}
-            >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                className='justify-start text-sm'
+                disabled={disableReject}
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
           <TableRowSizeSelector
             value={pageSize}

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

@@ -33,6 +33,7 @@ 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';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MarketingDetail = ({
   initialValues,
@@ -134,45 +135,58 @@ const MarketingDetail = ({
         <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>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <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>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <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>
+              </RequirePermission>
             </>
           )}
           {initialValues?.latest_approval?.step_number != 1 && (
-            <Button
-              color='success'
-              href={
+            <RequirePermission
+              permissions={
                 initialValues?.latest_approval?.step_number == 3
-                  ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
-                  : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  ? 'lti.marketing.delivery_order.update'
+                  : 'lti.marketing.delivery_order.create'
               }
             >
-              <Icon icon='mdi:truck' width={24} height={24} />
-              {initialValues?.latest_approval?.step_number == 3
-                ? 'Edit '
-                : 'Tambah '}
-              Delivery Order
-            </Button>
+              <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>
+            </RequirePermission>
           )}
         </div>
 
@@ -413,19 +427,23 @@ const MarketingDetail = ({
         )}
         <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>
+            <RequirePermission permissions='lti.marketing.sales_order.update'>
+              <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>
+            </RequirePermission>
           )}
-          <Button color='error' onClick={deleteClickHandler}>
-            <Icon icon='mdi:delete' width={24} height={24} />
-            Hapus
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button color='error' onClick={deleteClickHandler}>
+              <Icon icon='mdi:delete' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
         </div>
       </div>
       <ConfirmationModal

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

@@ -47,6 +47,7 @@ import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-v
 import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -689,15 +690,17 @@ const MarketingForm = ({
       {/* 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>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button
+              type='button'
+              color='error'
+              onClick={handleDelete}
+              isLoading={isLoading}
+            >
+              <Icon icon='mdi:trash' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
         </div>
       )}
 

src/components/pages/master-data/area/AreasTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.area.detail'>
+        <Button
+          href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.update'>
+        <Button
+          href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,19 @@ const AreasTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/area/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.area.create'>
+                  <Button
+                    href='/master-data/area/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   AreaFormSchema,
@@ -160,36 +161,40 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteAreaClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.area.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteAreaClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.area.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/bank/BanksTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.banks.detail'>
+        <Button
+          href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.update'>
+        <Button
+          href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -205,15 +212,17 @@ const BanksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/bank/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.banks.create'>
+                <Button
+                  href='/master-data/bank/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   BankFormSchema,
@@ -208,36 +209,40 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteBankClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.banks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteBankClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.banks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,38 +33,44 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.customer.detail'>
+        <Button
+          href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.update'>
+        <Button
+          href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -200,15 +207,17 @@ const CustomersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/customer/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.customer.create'>
+                <Button
+                  href='/master-data/customer/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -27,6 +27,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
 import { TYPE_OPTIONS } from '@/config/constant';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -319,36 +320,40 @@ const CustomerForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteCustomerHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.customer.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteCustomerHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.customer.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/fcr/FcrsTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.fcr.detail'>
+        <Button
+          href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.fcr.update'>
+        <Button
+          href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.fcr.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ const FcrsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/fcr/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.fcr.create'>
+                <Button
+                  href='/master-data/fcr/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/fcr/form/FcrForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   FcrFormSchema,
@@ -296,36 +297,40 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteFcrClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.fcr.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteFcrClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.fcr.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -13,6 +13,7 @@ import { useModal } from '@/components/Modal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -32,48 +33,54 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.detail'>
+        <Button
+          href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -196,15 +203,17 @@ const FlockTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/flock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.flocks.create'>
+                <Button
+                  href='/master-data/flock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -16,6 +16,7 @@ import { Icon } from '@iconify/react';
 import TextInput from '@/components/input/TextInput';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -130,35 +131,39 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={() => deleteModal.openModal()}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.flocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={() => deleteModal.openModal()}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.flocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

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

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.kandangs.detail'>
+        <Button
+          href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.update'>
+        <Button
+          href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -243,15 +250,19 @@ const KandangsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/kandang/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.kandangs.create'>
+                  <Button
+                    href='/master-data/kandang/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/kandang/form/KandangForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   KandangFormSchema,
@@ -285,36 +286,40 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteKandangClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.kandangs.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteKandangClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.kandangs.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/location/LocationsTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.locations.detail'>
+        <Button
+          href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.update'>
+        <Button
+          href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -230,15 +237,19 @@ const LocationsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/location/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.locations.create'>
+                  <Button
+                    href='/master-data/location/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/location/form/LocationForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   LocationFormSchema,
@@ -229,36 +230,40 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteLocationClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.locations.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteLocationClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.locations.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/nonstock/NonstocksTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
+        <Button
+          href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.update'>
+        <Button
+          href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -242,15 +249,17 @@ const NonstocksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/nonstock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.nonstocks.create'>
+                <Button
+                  href='/master-data/nonstock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   NonstockFormSchema,
@@ -298,36 +299,40 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteNonstockClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.nonstocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteNonstockClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.nonstocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -34,38 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/product-category/detail/edit/?productCategoryId=${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='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='mdi:delete-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.product_categories.detail'>
+        <Button
+          href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.update'>
+        <Button
+          href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -193,15 +202,17 @@ const ProductCategoryTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/product-category/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.product_categories.create'>
+                <Button
+                  href='/master-data/product-category/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductCategoryFormSchema,
@@ -183,36 +184,40 @@ const ProductCategoryForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductCategoryClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.product_categories.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductCategoryClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.product_categories.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product/ProductTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -38,38 +39,44 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
-    <Button
-      href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='warning'
-      className='justify-start text-sm'
-    >
-      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-      Edit
-    </Button>
-    <Button
-      onClick={deleteClickHandler}
-      variant='ghost'
-      color='error'
-      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-    >
-      <Icon
-        icon='material-symbols:delete-outline-rounded'
-        width={16}
-        height={16}
+    <RequirePermission permissions='lti.master.products.detail'>
+      <Button
+        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
         className='justify-start text-sm'
-      />
-      Delete
-    </Button>
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.update'>
+      <Button
+        href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.delete'>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -273,15 +280,17 @@ const ProductsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/product/add'
-                variant='outline'
-                className='w-full sm:w-fit'
-                color='primary'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.products.create'>
+                <Button
+                  href='/master-data/product/add'
+                  variant='outline'
+                  className='w-full sm:w-fit'
+                  color='primary'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -16,6 +16,7 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductFormSchema,
@@ -413,35 +414,39 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.products.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.products.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,48 +33,54 @@ const RowOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.suppliers.detail'>
+        <Button
+          href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.update'>
+        <Button
+          href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -219,15 +226,17 @@ const SuppliersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/supplier/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.suppliers.create'>
+                <Button
+                  href='/master-data/supplier/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -24,6 +24,7 @@ import TextInput from '@/components/input/TextInput';
 import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface SupplierCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -406,36 +407,40 @@ const SupplierForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteSupplierHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.suppliers.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteSupplierHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.suppliers.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/uom/UomsTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.uoms.detail'>
+        <Button
+          href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.update'>
+        <Button
+          href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ const UomsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/uom/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.uoms.create'>
+                <Button
+                  href='/master-data/uom/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/uom/form/UomForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   UomFormSchema,
@@ -160,36 +161,40 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteUomClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.uoms.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteUomClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.uoms.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.warehouses.detail'>
+        <Button
+          href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.update'>
+        <Button
+          href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -270,15 +277,17 @@ const WarehousesTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/warehouse/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.warehouses.create'>
+                <Button
+                  href='/master-data/warehouse/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/warehouse/form/WarehouseForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   WarehouseFormSchema,
@@ -435,36 +436,40 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteWarehouseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.warehouses.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteWarehouseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.warehouses.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/production/chickin/form/ChickinForm.tsx

@@ -11,12 +11,12 @@ import { useState } from 'react';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
-import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
 import ChickinFormView from '@/components/pages/production/chickin/form/tabs/ChickinFormView';
 import ChickinLogsView from '@/components/pages/production/chickin/form/tabs/ChickLogsView';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { Icon } from '@iconify/react';
 import Badge from '@/components/Badge';
+import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -34,8 +34,8 @@ const ChickinFormKandang = ({
     refresh: refreshApprovals,
   } = useApprovalSteps({
     latestApproval: initialValues?.approval,
-    approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE,
-    moduleName: 'PROJECT_FLOCK_KANDANGS',
+    approvalLines: CHICKINS_APPROVAL_LINE,
+    moduleName: 'CHICKINS',
     moduleId: initialValues?.id.toString() ?? '',
   });
 

src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx

@@ -145,7 +145,7 @@ const ChickinLogsView = ({
           })
         )}
 
-        {initialValues?.approval?.step_number == 1 && (
+        {initialValues?.approval?.step_number <= 2 && (
           <Button
             color='success'
             onClick={handleClickApprove}

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -25,6 +25,8 @@ import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
+import RequirePermission from '@/components/helper/RequirePermission';
+
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
@@ -46,50 +48,58 @@ const RowOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
-        <Button
-          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-        {props.row.original.approval.step_name === 'Aktif' && (
+        <RequirePermission permissions='lti.production.project_flocks.detail'>
           <Button
-            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:home-import-outline' width={16} height={16} />
-            Chickin
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <RequirePermission permissions='lti.production.chickins.create'>
+            <Button
+              href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='success'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:home-import-outline' width={16} height={16} />
+              Chickin
+            </Button>
+          </RequirePermission>
         )}
         {props.row.original.approval.step_name === 'Pengajuan' && (
-          <Button
-            href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:pencil-outline' width={16} height={16} />
-            Edit
-          </Button>
+          <RequirePermission permissions='lti.production.project_flocks.update'>
+            <Button
+              href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:pencil-outline' width={16} height={16} />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit justify-start text-sm'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.production.project_flocks.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='text-error hover:text-inherit justify-start text-sm'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -287,14 +297,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
-              <Button
-                color='primary'
-                className='w-full sm:w-fit'
-                href='/production/project-flock/add'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.production.project_flocks.create'>
+                <Button
+                  color='primary'
+                  className='w-full sm:w-fit'
+                  href='/production/project-flock/add'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
               {/* <Button
                 variant='outline'
                 color='success'
@@ -630,6 +642,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               );
               setRowSelection({});
             },
+            permissions: 'lti.production.project_flocks.detail',
           },
           {
             action: 'DELETE',
@@ -639,6 +652,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
             onClick: () => {
               deleteModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.delete',
           },
         ]}
         approvals={[
@@ -651,6 +665,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               confirmModal.openModal();
             },
             disabled: !canApprove,
+            permissions: 'lti.production.project_flocks.approve',
           },
           {
             icon: 'mdi:times',
@@ -660,6 +675,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               setApprovalAction('REJECTED');
               confirmModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.approve',
           },
         ]}
         selectedRowIds={selectedRowIds}

src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx

@@ -22,6 +22,7 @@ import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import Link from 'next/link';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockChickinDetail = ({
   projectFlockId,
@@ -484,21 +485,23 @@ const ProjectFlockChickinDetail = ({
                             {kandang.kandang.name}
                           </span>
                         </div>
-                        <Button
-                          variant='outline'
-                          className='py-1 text-sm'
-                          onClick={() => {
-                            handleChickinClick(kandang);
-                          }}
-                          disabled={projectFlock?.approval?.step_number === 1}
-                        >
-                          Chick In{' '}
-                          <Icon
-                            icon='mdi:arrow-top-right-thin'
-                            width={11}
-                            height={11}
-                          />
-                        </Button>
+                        <RequirePermission permissions='lti.production.chickins.create'>
+                          <Button
+                            variant='outline'
+                            className='py-1 text-sm'
+                            onClick={() => {
+                              handleChickinClick(kandang);
+                            }}
+                            disabled={projectFlock?.approval?.step_number === 1}
+                          >
+                            Chick In{' '}
+                            <Icon
+                              icon='mdi:arrow-top-right-thin'
+                              width={11}
+                              height={11}
+                            />
+                          </Button>
+                        </RequirePermission>
                       </div>
                     ))}
                 </div>

src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx

@@ -9,6 +9,7 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
 import {
   ClosingExpense,
   ProjectFlockKandang,
+  StockItem,
 } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import useSWR from 'swr';
@@ -20,6 +21,7 @@ import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ApprovalApi } from '@/services/api/approval';
 
 const ProjectFlockClosingForm = ({
   projectFlock,
@@ -30,7 +32,7 @@ const ProjectFlockClosingForm = ({
 }) => {
   const router = useRouter();
   const closeModal = useModal();
-  const isCanClose = projectFlock.approval?.step_number <= 2;
+
   const [isClosingLoading, setIsClosingLoading] = useState(false);
 
   const { data: closingData, isLoading } = useSWR(
@@ -38,19 +40,35 @@ const ProjectFlockClosingForm = ({
     () => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
   );
 
+  const { data: projectFlockKandangApprovals } = useSWR(
+    `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`,
+    () =>
+      ApprovalApi.getAllFetcher(
+        `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`
+      )
+  );
+
+  const isCanClose = useMemo(() => {
+    return isResponseSuccess(projectFlockKandangApprovals)
+      ? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
+      : true;
+  }, [projectFlockKandangApprovals]);
+
   const confirmationModalCloseClickHandler = async () => {
     setIsClosingLoading(true);
     const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
-      projectFlock?.id as number,
+      projectFlockKandang?.id as number,
       {
-        closed_date: formatDate(new Date(), 'yyyy-MM-dd'),
+        closed_date: isCanClose ? formatDate(new Date(), 'YYYY-MM-DD') : '',
         action: isCanClose ? 'close' : 'unclose',
       }
     );
 
     if (isResponseSuccess(deleteProjectFlockRes)) {
       toast.success(deleteProjectFlockRes?.message as string);
-      router.push(`/production/project-flock`);
+      router.push(
+        `/production/project-flock/detail?projectFlockId=${projectFlock.id}`
+      );
     }
     if (isResponseError(deleteProjectFlockRes)) {
       toast.error(deleteProjectFlockRes?.message as string);
@@ -62,16 +80,16 @@ const ProjectFlockClosingForm = ({
   const errorStock = useMemo(() => {
     return isResponseSuccess(closingData)
       ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
-      : false;
+      : true;
   }, [closingData]);
 
   const errorExpense = useMemo(() => {
     return isResponseSuccess(closingData)
       ? closingData?.data?.expenses.every((expense) => expense.step < 5)
-      : false;
+      : true;
   }, [closingData]);
 
-  const isCanCloseValid = !errorStock && !errorExpense;
+  const isCanCloseValid = true;
 
   return (
     <>
@@ -192,7 +210,7 @@ const ProjectFlockClosingForm = ({
                         : 'error'
                     }
                   >
-                    {formatTitleCase(props.row.original.status)}
+                    {formatTitleCase(props.row.original.step_name)}
                   </Badge>
                 );
               },
@@ -211,18 +229,18 @@ const ProjectFlockClosingForm = ({
             paginationClassName: 'hidden',
           }}
         />
-        {errorExpense && (
-          <div className='text-center text-error'>
+        {/* {errorExpense && (
+          <div className='text-center text-error text-sm'>
             *Pastikan semua biaya sudah selesai sebelum melakukan closing.
           </div>
-        )}
+        )} */}
       </div>
 
       {/* Table Persediaan Gudang */}
       <div className='divider'></div>
       <div className='px-4 pb-4'>
         <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
-        <Table<ProductWarehouse>
+        <Table<StockItem>
           data={
             isResponseSuccess(closingData)
               ? closingData.data?.stock_remaining
@@ -231,11 +249,11 @@ const ProjectFlockClosingForm = ({
           columns={[
             {
               header: 'Product',
-              accessorKey: 'product.name',
+              accessorKey: 'product_name',
             },
             {
               header: 'Kategori',
-              accessorKey: 'product.product_category.name',
+              accessorKey: 'product_category',
             },
             {
               header: 'Quantity',
@@ -243,7 +261,7 @@ const ProjectFlockClosingForm = ({
             },
             {
               header: 'UOM',
-              accessorKey: 'product.uom.name',
+              accessorKey: 'uom',
             },
           ]}
           className={{
@@ -259,11 +277,11 @@ const ProjectFlockClosingForm = ({
             paginationClassName: 'hidden',
           }}
         />
-        {errorStock && (
-          <div className='text-center text-error'>
+        {/* {errorStock && (
+          <div className='text-center text-error text-sm'>
             *Masih ada sisa stock yang belum dihabiskan.
           </div>
-        )}
+        )} */}
       </div>
 
       <div className='p-4 mt-6'>

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -23,7 +23,13 @@ import toast from 'react-hot-toast';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
-import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
+import {
+  PROJECT_FLOCK_APPROVAL_LINE,
+  PROJECT_FLOCK_KANDANGS_APPROVAL_LINE,
+} from '@/config/approval-line';
+import useSWR from 'swr';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockDetail = ({
   projectFlock,
@@ -38,10 +44,23 @@ const ProjectFlockDetail = ({
     null
   );
 
-  const selectedKandang = projectFlock.kandangs.find(
+  const selectedKandang = projectFlock.kandangs?.find(
     (kandang) => kandang.id === Number(selectedKandangId)
   );
 
+  const { data: projectFlockKandang, isLoading: projectFlockKandangLoading } =
+    useSWR(
+      selectedKandangId
+        ? `${ProjectFlockKandangApi.basePath}/get-detail/${selectedKandangId}`
+        : null,
+      selectedKandangId
+        ? () =>
+            ProjectFlockKandangApi.getSingle(
+              Number(selectedKandang?.project_flock_kandang_id)
+            )
+        : null
+    );
+
   const {
     approvals,
     isLoading: approvalsLoading,
@@ -50,9 +69,23 @@ const ProjectFlockDetail = ({
     latestApproval: projectFlock?.approval,
     approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
     moduleName: 'PROJECT_FLOCKS',
-    moduleId: projectFlock?.id.toString() ?? '',
+    moduleId: projectFlock?.id?.toString() ?? '',
   });
 
+  const { approvals: kandangApprovals, isLoading: kandangApprovalsLoading } =
+    useApprovalSteps({
+      latestApproval:
+        selectedKandangId && isResponseSuccess(projectFlockKandang)
+          ? projectFlockKandang?.data?.approval
+          : undefined,
+      approvalLines: PROJECT_FLOCK_KANDANGS_APPROVAL_LINE,
+      moduleName: 'PROJECT_FLOCK_KANDANGS',
+      moduleId:
+        selectedKandangId && isResponseSuccess(projectFlockKandang)
+          ? projectFlockKandang?.data?.id?.toString()
+          : '',
+    });
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
     const deleteProjectFlockRes = await ProjectFlockApi.delete(
@@ -78,27 +111,31 @@ const ProjectFlockDetail = ({
           leftIconHref='/production/project-flock'
           subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
         >
-          <Link
-            href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
-            className='p-0'
-          >
-            <Tooltip content='Edit' position='bottom'>
-              <Button variant='link' className='p-0 text-neutral'>
-                <Icon icon='mdi:square-edit-outline' width={20} height={20} />
-              </Button>
-            </Tooltip>
-          </Link>
-          <Button
-            variant='link'
-            className='p-0 text-error'
-            onClick={() => {
-              deleteModal.openModal();
-            }}
-          >
-            <Tooltip content='Hapus' position='bottom'>
-              <Icon icon='mdi:trash-can-outline' width={20} height={20} />
-            </Tooltip>
-          </Button>
+          <RequirePermission permissions='lti.production.project_flocks.update'>
+            <Link
+              href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
+              className='p-0'
+            >
+              <Tooltip content='Edit' position='bottom'>
+                <Button variant='link' className='p-0 text-neutral'>
+                  <Icon icon='mdi:square-edit-outline' width={20} height={20} />
+                </Button>
+              </Tooltip>
+            </Link>
+          </RequirePermission>
+          <RequirePermission permissions='lti.production.project_flocks.delete'>
+            <Button
+              variant='link'
+              className='p-0 text-error'
+              onClick={() => {
+                deleteModal.openModal();
+              }}
+            >
+              <Tooltip content='Hapus' position='bottom'>
+                <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+              </Tooltip>
+            </Button>
+          </RequirePermission>
         </DrawerHeader>
 
         {/* Informasi Umum */}
@@ -151,7 +188,7 @@ const ProjectFlockDetail = ({
                 className={{ badge: 'rounded-lg px-2' }}
               >
                 <Icon icon='mdi:bookmark' width={12} height={12} />
-                {` ${formatTitleCase(projectFlock.category)}`}
+                {` ${formatTitleCase(projectFlock.category ?? '')}`}
               </Badge>
             </div>
             {/* Information Grid */}
@@ -168,7 +205,7 @@ const ProjectFlockDetail = ({
                   }}
                 >
                   <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
-                  {projectFlock.created_user.name}
+                  {projectFlock.created_user?.name}
                 </Badge>
               </div>
 
@@ -194,7 +231,7 @@ const ProjectFlockDetail = ({
               >
                 <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
               </div>
-              <div className='col-span-2'>{projectFlock.area.name}</div>
+              <div className='col-span-2'>{projectFlock?.area?.name}</div>
 
               {/* BARIS 2 */}
               <div
@@ -204,7 +241,7 @@ const ProjectFlockDetail = ({
               >
                 <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
               </div>
-              <div className='col-span-2'>{projectFlock.location.name}</div>
+              <div className='col-span-2'>{projectFlock?.location?.name}</div>
 
               <div
                 className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
@@ -213,7 +250,7 @@ const ProjectFlockDetail = ({
               >
                 <Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
               </div>
-              <div className='col-span-2'>{projectFlock.fcr.name}</div>
+              <div className='col-span-2'>{projectFlock?.fcr?.name}</div>
 
               {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
               <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
@@ -221,7 +258,7 @@ const ProjectFlockDetail = ({
                 Kategori
               </div>
               <div className='col-span-2'>
-                {formatTitleCase(projectFlock.category)}
+                {formatTitleCase(projectFlock.category ?? '')}
               </div>
             </div>
           </div>
@@ -231,6 +268,9 @@ const ProjectFlockDetail = ({
         <div className='border-t-1 border-gray-300'>
           <div className='p-4 flex flex-col gap-4'>
             <h2 className='text-2xl font-semibold'>Kandang Aktif</h2>
+            {kandangApprovals && !kandangApprovalsLoading && (
+              <ApprovalSteps approvals={kandangApprovals} />
+            )}
             {/* Badge Row  */}
             <div className='flex flex-row gap-2'>
               <Badge
@@ -246,7 +286,7 @@ const ProjectFlockDetail = ({
                   height={12}
                   color={'success'}
                 />{' '}
-                Kandang Aktif ({projectFlock.kandangs.length})
+                Kandang Aktif ({projectFlock.kandangs?.length})
               </Badge>
               <div className='divider divider-horizontal p-0 m-0'></div>
               <Badge
@@ -289,7 +329,7 @@ const ProjectFlockDetail = ({
                         <span>Jenis Produk</span>
                       </div>
                       <div className='text-end text-gray-500'>
-                        {budget.nonstock?.name}
+                        {budget?.nonstock?.name}
                       </div>
                     </div>
                     <div className='flex flex-row justify-between items-center'>
@@ -298,7 +338,7 @@ const ProjectFlockDetail = ({
                         <span>Nama Satuan</span>
                       </div>
                       <div className='text-end text-gray-500'>
-                        {budget.nonstock?.uom.name}
+                        {budget?.nonstock?.uom?.name}
                       </div>
                     </div>
                     <div className='flex flex-row justify-between items-center'>
@@ -353,21 +393,21 @@ const ProjectFlockDetail = ({
                 value={selectedKandangId?.toString()}
                 size='md'
                 color='neutral'
-                disabled={projectFlock.approval.step_number == 1}
+                disabled={projectFlock?.approval?.step_number == 1}
               >
-                {projectFlock.kandangs.map((kandang) => (
+                {projectFlock.kandangs?.map((kandang) => (
                   <div
                     key={kandang.id}
                     className={`grid grid-cols-2 gap-6 cursor-pointer hover:text-gray-800`}
                     onClick={() =>
-                      projectFlock.approval.step_number > 1 &&
-                      setSelectedKamdangId(kandang.id.toString())
+                      projectFlock?.approval?.step_number > 1 &&
+                      setSelectedKamdangId(kandang?.id?.toString())
                     }
                   >
                     <RadioGroupItem
-                      value={kandang.id.toString()}
-                      label={kandang.name}
-                      disabled={projectFlock.approval.step_number == 1}
+                      value={kandang?.id?.toString()}
+                      label={kandang?.name}
+                      disabled={projectFlock?.approval?.step_number == 1}
                     />
                     <div className='text-end'>
                       <Badge
@@ -375,7 +415,7 @@ const ProjectFlockDetail = ({
                           badge: 'rounded-lg',
                         }}
                       >
-                        Kapasitas {kandang.capacity} Ekor
+                        Kapasitas {kandang?.capacity} Ekor
                       </Badge>
                     </div>
                   </div>
@@ -383,36 +423,42 @@ const ProjectFlockDetail = ({
               </RadioGroup>
             </Card>
             <div className='grid grid-cols-4 gap-3'>
-              <Link
-                href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
-                className='m-0 p-0'
-              >
-                <Button
-                  className='w-full px-2 py-1 text-sm'
-                  variant='outline'
-                  color='success'
-                  disabled={
-                    !selectedKandangId || projectFlock.approval.step_number == 1
-                  }
+              <RequirePermission permissions='lti.production.chickins.create'>
+                <Link
+                  href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
+                  className='m-0 p-0'
                 >
-                  Chickin <Icon icon='mdi:checkbox-marked-outline' />
-                </Button>
-              </Link>
-              <Link
-                href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandangId}`}
-                className='m-0 p-0'
-              >
-                <Button
-                  className='w-full px-2 py-1 text-sm'
-                  variant='outline'
-                  color='error'
-                  disabled={
-                    !selectedKandangId || projectFlock.approval.step_number == 1
-                  }
+                  <Button
+                    className='w-full px-2 py-1 text-sm'
+                    variant='outline'
+                    color='success'
+                    disabled={
+                      !selectedKandangId ||
+                      projectFlock?.approval?.step_number == 1
+                    }
+                  >
+                    Chickin <Icon icon='mdi:checkbox-marked-outline' />
+                  </Button>
+                </Link>
+              </RequirePermission>
+              <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
+                <Link
+                  href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
+                  className='m-0 p-0'
                 >
-                  Close <Icon icon='mdi:checkbox-marked-circle-outline' />
-                </Button>
-              </Link>
+                  <Button
+                    className='w-full px-2 py-1 text-sm'
+                    variant='outline'
+                    color='error'
+                    disabled={
+                      !selectedKandangId ||
+                      projectFlock?.approval?.step_number == 1
+                    }
+                  >
+                    Close <Icon icon='mdi:checkbox-marked-circle-outline' />
+                  </Button>
+                </Link>
+              </RequirePermission>
             </div>
           </div>
         </div>

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -47,9 +47,8 @@ import Card from '@/components/Card';
 import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { useUiStore } from '@/stores/ui/ui.store';
-import Link from 'next/link';
+import RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
-import { formatDate } from '@/lib/helper';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -260,7 +259,9 @@ const ProjectFlockForm = ({
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('category', (val as OptionType)?.value);
     formik.setFieldValue('category_option', val);
-    formik.setFieldTouched('category', true);
+    if (val == null) {
+      formik.setFieldTouched('category', true);
+    }
   };
 
   // Submit Handler
@@ -734,36 +735,40 @@ const ProjectFlockForm = ({
         )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
-            <Button
-              variant='outline'
-              color='success'
-              onClick={() => {
-                if (initialValues?.id) {
-                  setApprovalAction('APPROVED');
-                  confirmModal.openModal();
-                }
-              }}
-              disabled={!initialValues?.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 (initialValues?.id) {
-                  setApprovalAction('REJECTED');
-                  confirmModal.openModal();
-                }
-              }}
-              disabled={!initialValues?.id || isRejectedDisabled}
-              className='w-full sm:w-fit'
-            >
-              <Icon icon='mdi:times' width={24} height={24} />
-              Reject
-            </Button>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={() => {
+                  if (initialValues?.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!initialValues?.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (initialValues?.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!initialValues?.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
         )}
         <form
@@ -788,7 +793,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.area_id as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -807,7 +812,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.location_id as string}
                 isClearable
-                isDisabled={formType === 'detail' || disabledLocation}
+                isDisabled={formType != 'add' || disabledLocation}
               />
               <SelectInput
                 required
@@ -837,7 +842,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.flock_name as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -851,7 +856,7 @@ const ProjectFlockForm = ({
                 isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
                 errorMessage={formik.errors.fcr_id as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -864,7 +869,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.category as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <NumberInput
                 name='period'
@@ -1127,16 +1132,24 @@ const ProjectFlockForm = ({
               </div>
             </div> */}
             {formType !== 'detail' && (
-              <Button
-                type='submit'
-                color='primary'
-                isLoading={formik.isSubmitting}
-                disabled={!formik.isValid || formik.isSubmitting}
-                className='px-4 w-full'
+              <RequirePermission
+                permissions={
+                  formType == 'add'
+                    ? 'lti.production.project_flocks.create'
+                    : 'lti.production.project_flocks.update'
+                }
               >
-                <Icon icon='mdi:plus' width={24} height={24} />
-                {formType == 'add' ? 'Add Flock' : 'Update Flock'}
-              </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4 w-full'
+                >
+                  <Icon icon='mdi:plus' width={24} height={24} />
+                  {formType == 'add' ? 'Add Flock' : 'Update Flock'}
+                </Button>
+              </RequirePermission>
             )}
           </div>
         </form>

src/components/pages/production/recording/RecordingTable.tsx

@@ -50,12 +50,17 @@ const RowOptionsMenu = ({
     );
   };
 
+  const isRecordingRejected = (recording: Recording) => {
+    return recording.approval?.action === 'REJECTED';
+  };
+
   const isApproved = isRecordingApproved(props.row.original);
+  const isRejected = isRecordingRejected(props.row.original);
 
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`recording/detail/?recordingId=${props.row.original.id}`}
+        href={`/production/recording/detail/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -64,7 +69,7 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
+        href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
         className='justify-start text-sm'
@@ -72,7 +77,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:pencil-outline' width={16} height={16} />
         Edit
       </Button>
-      {!isApproved && (
+      {!isApproved && !isRejected && (
         <Button
           onClick={approveClickHandler}
           variant='ghost'
@@ -83,7 +88,7 @@ const RowOptionsMenu = ({
           Approve
         </Button>
       )}
-      {!isApproved && (
+      {!isApproved && !isRejected && (
         <Button
           onClick={rejectClickHandler}
           variant='ghost'
@@ -510,7 +515,7 @@ const RecordingTable = () => {
         <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
           <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
             <Button
-              href='recording/add'
+              href='/production/recording/add'
               variant='outline'
               color='primary'
               className='w-full sm:w-fit'

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -112,6 +112,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     );
   }, []);
 
+  const isRecordingRejected = useCallback((recording?: Recording) => {
+    return recording?.approval?.action === 'REJECTED';
+  }, []);
+
   // ===== PAYLOAD CREATION HELPERS =====
   const createGrowingPayload = useCallback(
     (values: RecordingGrowingFormValues) => {
@@ -1483,37 +1487,48 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               Kembali
             </Button>
 
-            {type === 'detail' && !isRecordingApproved(initialValues) && (
-              <div className='flex flex-row gap-2'>
-                <Button
-                  variant='outline'
-                  color='success'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    approveModal.openModal();
-                  }}
-                  isLoading={isApproveLoading}
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:check' width={24} height={24} />
-                  Approve
-                </Button>
+            {type === 'detail' &&
+              initialValues?.approval &&
+              !isRecordingApproved(initialValues) &&
+              !isRecordingRejected(initialValues) && (
+                <div className='flex flex-row gap-2'>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
+                    isLoading={isApproveLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
 
-                <Button
-                  variant='outline'
-                  color='error'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    rejectModal.openModal();
-                  }}
-                  isLoading={isRejectLoading}
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
-                  Reject
-                </Button>
-              </div>
-            )}
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
+                    isLoading={isRejectLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
           </div>
 
           <h1 className='text-2xl font-bold text-center'>
@@ -2803,7 +2818,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Approve Confirmation Modal */}
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
-            !isRecordingApproved(initialValues) && (
+            !isRecordingApproved(initialValues) &&
+            !isRecordingRejected(initialValues) && (
               <ConfirmationModalWithNotes
                 ref={approveModal.ref}
                 type='success'

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts

@@ -226,9 +226,7 @@ export const getFilledTransferToLayingFormInitialValues = async (
           //   targetKandang.target_project_flock_kandang.kandang.capacity,
 
           // TODO: integrate this to real API kandang capacity
-          maxQuantity:
-            targetKandang.target_project_flock_kandang.kandang.capacity ??
-            Infinity,
+          maxQuantity: Infinity,
         }))
       : [],
 

src/components/pages/purchase/PurchaseTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -38,15 +39,17 @@ const RowOptionsMenu = ({
 }: RowOptionsMenuProps) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
+      <RequirePermission permissions='lti.purchase.detail'>
+        <Button
+          href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
       {/*<Button*/}
       {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
@@ -58,20 +61,22 @@ const RowOptionsMenu = ({
       {/*  Edit*/}
       {/*</Button>*/}
 
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+      <RequirePermission permissions='lti.purchase.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -227,15 +232,17 @@ const PurchaseTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
             <div className='w-full flex flex-row gap-2'>
-              <Button
-                href='/purchase/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.purchase.create'>
+                <Button
+                  href='/purchase/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -32,6 +32,7 @@ import {
 } from '@/types/api/purchase/purchase';
 import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
 import { useRouter } from 'next/navigation';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -897,20 +898,25 @@ const PurchaseOrderStaffApprovalForm = ({
                                     <div className='flex justify-center'>
                                       {canUpdatePurchaseItems &&
                                         canShowDeleteAddButtons && (
-                                          <Button
-                                            type='button'
-                                            color='error'
-                                            onClick={() =>
-                                              removePurchaseItem(formItemIndex)
-                                            }
-                                            title='Hapus item'
-                                          >
-                                            <Icon
-                                              icon='mdi:trash-can'
-                                              width={16}
-                                              height={16}
-                                            />
-                                          </Button>
+                                          <RequirePermission permissions='lti.purchase.delete.item'>
+                                            <Button
+                                              type='button'
+                                              color='error'
+                                              className='text-sm w-fit'
+                                              onClick={() =>
+                                                removePurchaseItem(
+                                                  formItemIndex
+                                                )
+                                              }
+                                              title='Hapus item'
+                                            >
+                                              <Icon
+                                                icon='mdi:trash-can'
+                                                width={16}
+                                                height={16}
+                                              />
+                                            </Button>
+                                          </RequirePermission>
                                         )}
                                     </div>
                                   </td>

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -39,19 +39,22 @@ import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
     <RowOptionsMenuWrapper type='dropdown'>
-      <Button
-        onClick={onEdit}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
+      <RequirePermission permissions='lti.purchase.update'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -59,15 +62,17 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
 const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
     <RowOptionsMenuWrapper type='dropdown'>
-      <Button
-        onClick={onEdit}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
+      <RequirePermission permissions='lti.purchase.receive'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -496,14 +501,16 @@ const PurchaseOrderDetail = ({
               };
 
               return (
-                <Button
-                  type='button'
-                  color='error'
-                  className='text-sm'
-                  onClick={deleteClickHandler}
-                >
-                  <Icon icon='mdi:trash-can' width={16} height={16} />
-                </Button>
+                <RequirePermission permissions='lti.purchase.delete.item'>
+                  <Button
+                    type='button'
+                    color='error'
+                    className='text-sm'
+                    onClick={deleteClickHandler}
+                  >
+                    <Icon icon='mdi:trash-can' width={16} height={16} />
+                  </Button>
+                </RequirePermission>
               );
             },
           },
@@ -632,25 +639,45 @@ const PurchaseOrderDetail = ({
 
         {showApprovalButton && (
           <div className='flex flex-row gap-2'>
-            <Button
-              onClick={handleApprovalClick}
-              variant='outline'
-              color='success'
-              className='w-full sm:w-fit'
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
+              <Button
+                onClick={handleApprovalClick}
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              variant='outline'
-              color='error'
-              className='w-full sm:w-fit'
-              onClick={handleRejectionClick}
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+              <Button
+                variant='outline'
+                color='error'
+                className='w-full sm:w-fit'
+                onClick={handleRejectionClick}
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
         )}
       </div>

src/components/pages/report/DailyMarketingReportContent.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import { pdf } from '@react-pdf/renderer';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import DailyMarketingsTable from '@/components/pages/report/DailyMarketingsTable';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import DailyMarketingReportPDF from '@/components/pages/report/DailyMarketingReportPDF';
+
+import { Area } from '@/types/api/master-data/area';
+import {
+  AreaApi,
+  CustomerApi,
+  LocationApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Customer } from '@/types/api/master-data/customer';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+import { MARKETING_TYPE_OPTIONS } from '@/config/constant';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { isResponseError } from '@/lib/api-helper';
+
+const DailyMarketingReportContent = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      area_id: '',
+      location_id: '',
+      warehouse_id: '',
+      customer_id: '',
+      start_date: '',
+      end_date: '',
+      marketing_type: '',
+      filter_by: '',
+      sort_by: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      area_id: 'area_id',
+      location_id: 'location_id',
+      warehouse_id: 'warehouse_id',
+      customer_id: 'customer_id',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      marketing_type: 'marketing_type',
+      filter_by: 'filter_by',
+      sort_by: 'sort_by',
+    },
+  });
+
+  const dailyMarketingsReportUrl = `${MarketingReportApi.basePath}${getTableFilterQueryString()}`;
+
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+  const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
+
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedArea(val as OptionType);
+    updateFilter('area_id', val ? ((val as OptionType).value as string) : '');
+  };
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'location_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedWarehouse, setSelectedWarehouse] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setWarehouseInputValue,
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedWarehouse(val as OptionType);
+    updateFilter(
+      'warehouse_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setCustomerInputValue,
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedCustomer(val as OptionType);
+    updateFilter(
+      'customer_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('start_date', e.target.value ? e.target.value : '');
+  };
+
+  const endDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('end_date', e.target.value ? e.target.value : '');
+  };
+
+  const [selectedMarketingType, setSelectedMarketingType] =
+    useState<OptionType | null>(null);
+  const marketingTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedMarketingType(val as OptionType);
+    updateFilter(
+      'marketing_type',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const filterByChangeHandler = (filterBy: string) => {
+    updateFilter('filter_by', filterBy);
+  };
+
+  const sortByChangeHandler = (sort: 'asc' | 'desc' | '') => {
+    updateFilter('sort_by', sort);
+  };
+
+  const exportToExcelHandler = async () => {
+    setIsLoadingExportingToExcel(true);
+
+    await MarketingReportApi.exportDailyMarketingToExcel(
+      getTableFilterQueryString()
+    );
+
+    setIsLoadingExportingToExcel(false);
+  };
+
+  const exportToPdfHandler = async () => {
+    setIsLoadingExportingToPdf(true);
+
+    const params = new URLSearchParams(getTableFilterQueryString());
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const dailyMarketingsReport = await httpClient<
+        BaseApiResponse<DailyMarketingReport>
+      >(`${MarketingReportApi.basePath}${queryString}`);
+
+      if (isResponseError(dailyMarketingsReport)) {
+        toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+        return;
+      }
+
+      const openPdf = async () => {
+        const dailyMarketingReportPdfBlob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+
+        const dailyMarketingReportPdfUrl = URL.createObjectURL(
+          dailyMarketingReportPdfBlob
+        );
+        window.open(dailyMarketingReportPdfUrl, '_blank');
+      };
+
+      const downloadPdf = async () => {
+        const blob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+        const url = URL.createObjectURL(blob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'laporan-penjualan-harian.pdf';
+        link.click();
+
+        URL.revokeObjectURL(url);
+      };
+
+      await openPdf();
+    } catch (error) {
+      toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+    }
+
+    setIsLoadingExportingToPdf(false);
+  };
+
+  const handleReset = () => {
+    setSelectedArea(null);
+    setSelectedLocation(null);
+    setSelectedWarehouse(null);
+    setSelectedCustomer(null);
+    setSelectedMarketingType(null);
+    resetFilter();
+  };
+
+  return (
+    <div className='w-full border border-gray-200 p-4'>
+      <div>
+        <h2 className='text-xl font-bold text-center'>Penjualan Harian</h2>
+      </div>
+
+      {/* Filters */}
+      <div className='flex flex-col gap-4 mb-6'>
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={areaOptions}
+            isLoading={isLoadingAreaOptions}
+            value={selectedArea}
+            onChange={areaChangeHandler}
+            onInputChange={setAreaInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
+            value={selectedLocation}
+            onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Gudang'
+            placeholder='Pilih Gudang'
+            options={warehouseOptions}
+            isLoading={isLoadingWarehouseOptions}
+            value={selectedWarehouse}
+            onChange={warehouseChangeHandler}
+            onInputChange={setWarehouseInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Customer'
+            placeholder='Pilih Customer'
+            options={customerOptions}
+            isLoading={isLoadingCustomerOptions}
+            value={selectedCustomer}
+            onChange={customerChangeHandler}
+            onInputChange={setCustomerInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='startDate'
+            label='Tanggal Awal'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.start_date}
+            onChange={startDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='endDate'
+            label='Tanggal Akhir'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.end_date}
+            onChange={endDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+        </div>
+
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Tipe Marketing'
+            placeholder='Pilih Tipe Marketing'
+            options={MARKETING_TYPE_OPTIONS}
+            value={selectedMarketingType}
+            onChange={marketingTypeChangeHandler}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <div className='col-span-12 sm:col-span-6 lg:col-span-8 flex flex-wrap sm:justify-end items-end gap-2'>
+            <Button
+              color='primary'
+              // onClick={handleSearch}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+              Cari
+            </Button>
+
+            <Button
+              color='warning'
+              onClick={handleReset}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+              Reset
+            </Button>
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              trigger={
+                <Button>
+                  Export{' '}
+                  <Icon
+                    icon='heroicons-outline:download'
+                    width={20}
+                    height={20}
+                  />
+                </Button>
+              }
+            >
+              <Menu>
+                <MenuItem
+                  title='Export to Excel'
+                  icon='icon-park-outline:excel'
+                  isLoading={isLoadingExportingToExcel}
+                  onClick={exportToExcelHandler}
+                  className='text-nowrap'
+                />
+                <MenuItem
+                  title='Export to PDF'
+                  icon='icon-park-outline:file-pdf-one'
+                  onClick={exportToPdfHandler}
+                  className='text-nowrap'
+                />
+              </Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      <DailyMarketingsTable
+        dailyMarketingsReportUrl={dailyMarketingsReportUrl}
+        onSetPage={setPage}
+        pageSize={tableFilterState.pageSize}
+        onSetPageSize={setPageSize}
+        searchValue={tableFilterState.search}
+        onSearchChange={searchChangeHandler}
+        onFilterByChange={filterByChangeHandler}
+        onSortByChange={sortByChangeHandler}
+      />
+    </div>
+  );
+};
+
+export default DailyMarketingReportContent;

src/components/pages/report/DailyMarketingReportPDF.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+import {
+  Document,
+  Image,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+
+interface DailyMarketingReportPDFProps {
+  data?: DailyMarketingReport;
+}
+
+const DailyMarketingReportPDFStyle = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 16, // Reduce padding to fit more columns
+    orientation: 'landscape',
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 10,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 14,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // Table Styles
+  table: {
+    width: '100%',
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 7, // Smaller font for report
+  },
+  tableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    alignItems: 'center',
+    minHeight: 20,
+  },
+  tableHeader: {
+    backgroundColor: '#f0f0f0',
+    fontWeight: 'bold',
+  },
+
+  // Columns definition (Total 100%)
+  colNo: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colDoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAging: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colWarehouse: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colCustomer: {
+    width: '9%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colSales: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colProduct: {
+    width: '8%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colDoNumber: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colVehicle: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colMarketingType: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colQty: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAvgWeight: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colTotalWeight: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesAmount: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppAmount: { width: '6%', padding: 2, textAlign: 'right' }, // Last column
+
+  // Text inside columns
+  cellText: {
+    fontSize: 6,
+  },
+  headerText: {
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+  // Utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
+  },
+
+  // Summary
+  summaryContainer: {
+    marginTop: 12,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+  summaryTable: {
+    width: '30%',
+    borderWidth: 1,
+    borderColor: '#000000',
+    fontSize: 8,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    padding: 2,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  summaryLabel: {
+    width: '50%',
+    fontWeight: 'bold',
+  },
+  summaryValue: {
+    width: '50%',
+    textAlign: 'right',
+  },
+});
+
+const DailyMarketingReportPDF = ({ data }: DailyMarketingReportPDFProps) => {
+  const rows = data?.rows || [];
+  const summary = data?.summary;
+
+  return (
+    <Document>
+      <Page
+        style={DailyMarketingReportPDFStyle.page}
+        orientation='landscape'
+        size='A4'
+      >
+        <View>
+          <View style={DailyMarketingReportPDFStyle.companyInfoHeader}>
+            <Image
+              style={DailyMarketingReportPDFStyle.companyLogo}
+              src='/assets/img/lti-logo.png'
+            />
+
+            <Text style={DailyMarketingReportPDFStyle.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={DailyMarketingReportPDFStyle.companyName}>
+              PT LUMBUNG TELUR INDONESIA
+            </Text>
+            <Text style={DailyMarketingReportPDFStyle.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={DailyMarketingReportPDFStyle.doubleDivider} />
+          </View>
+        </View>
+
+        <Text style={DailyMarketingReportPDFStyle.title}>
+          Laporan Penjualan Harian
+        </Text>
+
+        {/* Data Table */}
+        <View style={DailyMarketingReportPDFStyle.table}>
+          {/* Header */}
+          <View
+            style={[
+              DailyMarketingReportPDFStyle.tableRow,
+              DailyMarketingReportPDFStyle.tableHeader,
+            ]}
+          >
+            <View style={DailyMarketingReportPDFStyle.colNo}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl SO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl DO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAging}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Aging</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Gudang
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colCustomer}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Pelanggan
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSales}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Sales</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colProduct}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Produk
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No DO</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colVehicle}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Plat No
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Tipe</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colQty}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Qty</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Rerata
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Berat</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Hrg Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                HPP/kg
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total HPP
+              </Text>
+            </View>
+          </View>
+
+          {/* Rows */}
+          {rows.map((row, index) => (
+            <View style={DailyMarketingReportPDFStyle.tableRow} key={index}>
+              <View style={DailyMarketingReportPDFStyle.colNo}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {index + 1}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.so_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.do_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAging}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.aging_days}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.warehouse?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colCustomer}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.customer?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSales}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.sales}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colProduct}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.product?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.do_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colVehicle}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.vehicle_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.marketing_type}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colQty}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.qty)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.average_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.total_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_amount)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_amount)}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* Summary */}
+        <View style={DailyMarketingReportPDFStyle.summaryContainer}>
+          <View style={DailyMarketingReportPDFStyle.summaryTable}>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Qty:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_qty ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Berat (kg):
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_weight_kg ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Penjualan:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_sales_amount ?? 0)}
+              </Text>
+            </View>
+            <View
+              style={[
+                DailyMarketingReportPDFStyle.summaryRow,
+                { borderBottomWidth: 0 },
+              ]}
+            >
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total HPP:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_hpp_amount ?? 0)}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={DailyMarketingReportPDFStyle.footer} fixed>
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default DailyMarketingReportPDF;

src/components/pages/report/DailyMarketingsTable.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { DailyMarketingRow } from '@/types/api/report/marketing';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+
+interface DailyMarketingsTableProps {
+  dailyMarketingsReportUrl: string;
+  onSetPage: (page: number) => void;
+  pageSize: number;
+  onSetPageSize: (pageSize: number) => void;
+  searchValue: string;
+  onSearchChange: ChangeEventHandler<HTMLInputElement>;
+  onFilterByChange: (filterBy: string) => void;
+  onSortByChange: (sort: 'asc' | 'desc' | '') => void;
+}
+
+const DailyMarketingsTable = ({
+  dailyMarketingsReportUrl,
+  onSetPage,
+  pageSize,
+  onSetPageSize,
+  searchValue,
+  onSearchChange,
+  onFilterByChange,
+  onSortByChange,
+}: DailyMarketingsTableProps) => {
+  const { data: dailyMarketings, isLoading: isLoadingDailyMarketings } = useSWR(
+    dailyMarketingsReportUrl,
+    MarketingReportApi.getAllDailyMarketingFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const dailyMarketingColumns: ColumnDef<DailyMarketingRow>[] = [
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'so_date',
+      header: 'Tanggal Jual',
+      cell: (props) => formatDate(props.row.original.so_date, 'DD-MMM-YYYY'),
+      footer: 'Total',
+    },
+    {
+      accessorKey: 'do_date',
+      header: 'Tanggal DO',
+      cell: (props) => formatDate(props.row.original.do_date, 'DD-MMM-YYYY'),
+    },
+    {
+      accessorKey: 'aging_days',
+      header: 'Aging',
+      cell: (props) => `${props.row.original.aging_days} hari`,
+    },
+    {
+      accessorKey: 'warehouse.name',
+      header: 'Gudang',
+    },
+    {
+      accessorKey: 'customer.name',
+      header: 'Pelanggan',
+    },
+    {
+      accessorKey: 'do_number',
+      header: 'No. DO',
+    },
+    {
+      accessorKey: 'sales',
+      header: 'Sales/Marketing',
+    },
+    {
+      accessorKey: 'vehicle_number',
+      header: 'No. Polisi',
+      cell: (props) => (
+        <span className='text-nowrap'>{props.row.original.vehicle_number}</span>
+      ),
+    },
+    {
+      accessorKey: 'marketing_type',
+      header: 'Marketing Type',
+    },
+    {
+      accessorKey: 'product.name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'qty',
+      header: 'Kuantitas',
+      cell: (props) => formatNumber(props.row.original.qty),
+      footer: () => {
+        const totalQty = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_qty
+          : 0;
+
+        return formatNumber(totalQty);
+      },
+    },
+    {
+      accessorKey: 'average_weight_kg',
+      header: 'Bobot Rata-Rata (Kg)',
+      cell: (props) => formatNumber(props.row.original.average_weight_kg),
+    },
+    {
+      accessorKey: 'total_weight_kg',
+      header: 'Bobot Total (Kg)',
+      cell: (props) => formatNumber(props.row.original.total_weight_kg),
+      footer: () => {
+        const totalWeightKg = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_weight_kg
+          : 0;
+
+        return formatNumber(totalWeightKg);
+      },
+    },
+    {
+      accessorKey: 'sales_price_per_kg',
+      header: 'Harga Jual (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
+    },
+    {
+      accessorKey: 'hpp_price_per_kg',
+      header: 'HPP (Rp)',
+      cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
+    },
+    {
+      accessorKey: 'sales_amount',
+      header: 'Total (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_amount),
+      footer: () => {
+        const totalSalesAmount = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_sales_amount
+          : 0;
+
+        return formatCurrency(totalSalesAmount);
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (sorting.length === 1) {
+      onFilterByChange(sorting[0].id);
+      onSortByChange(sorting[0].desc ? 'desc' : 'asc');
+    } else {
+      onFilterByChange('');
+      onSortByChange('');
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.rows.length > 0
+          : false
+      );
+    }
+  }, [dailyMarketings, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Penjualan Harian</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Penjualan Harian'
+                value={searchValue}
+                onChange={onSearchChange}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<DailyMarketingRow>
+            data={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.data.rows
+                : []
+            }
+            columns={dailyMarketingColumns}
+            pageSize={pageSize}
+            onPageSizeChange={onSetPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.total_results
+                : 0
+            }
+            onPageChange={onSetPage}
+            isLoading={isLoadingDailyMarketings}
+            sorting={sorting}
+            setSorting={setSorting}
+            renderFooter={true}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(dailyMarketings) &&
+                  dailyMarketings?.data?.rows.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default DailyMarketingsTable;