diff --git a/package-lock.json b/package-lock.json
index 45371cbc..56d046a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,13 +72,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
-      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -119,21 +119,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -166,17 +166,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
-      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.4",
+        "@babel/parser": "^7.28.5",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4",
+        "@babel/types": "^7.28.5",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -184,22 +184,22 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -209,9 +209,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
-      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
+      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -376,9 +376,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -386,13 +386,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -401,19 +401,22 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.1.tgz",
+      "integrity": "sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -448,9 +451,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.35.0.tgz",
-      "integrity": "sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
+      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -461,9 +464,9 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -471,13 +474,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
+      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.16.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -584,10 +587,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
-      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
       "cpu": [
         "arm64"
       ],
@@ -603,13 +616,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
-      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
       "cpu": [
         "x64"
       ],
@@ -625,13 +638,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.0"
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
-      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
       "cpu": [
         "arm64"
       ],
@@ -645,9 +658,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
-      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
       "cpu": [
         "x64"
       ],
@@ -661,9 +674,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
-      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
       "cpu": [
         "arm"
       ],
@@ -677,9 +690,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
-      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
       "cpu": [
         "arm64"
       ],
@@ -693,9 +706,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
-      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
       "cpu": [
         "ppc64"
       ],
@@ -709,9 +722,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
-      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
       "cpu": [
         "s390x"
       ],
@@ -725,9 +738,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
-      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
       "cpu": [
         "x64"
       ],
@@ -741,9 +754,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
-      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
       "cpu": [
         "arm64"
       ],
@@ -757,9 +770,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
-      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
       "cpu": [
         "x64"
       ],
@@ -773,9 +786,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
-      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
       "cpu": [
         "arm"
       ],
@@ -791,13 +804,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.0"
+        "@img/sharp-libvips-linux-arm": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
-      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
       "cpu": [
         "arm64"
       ],
@@ -813,13 +826,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.0"
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
-      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
       "cpu": [
         "ppc64"
       ],
@@ -835,13 +848,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
-      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
       "cpu": [
         "s390x"
       ],
@@ -857,13 +870,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.0"
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
-      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
       "cpu": [
         "x64"
       ],
@@ -879,13 +892,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.0"
+        "@img/sharp-libvips-linux-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
-      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
       "cpu": [
         "arm64"
       ],
@@ -901,13 +914,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
-      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
       "cpu": [
         "x64"
       ],
@@ -923,20 +936,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
-      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.4.4"
+        "@emnapi/runtime": "^1.5.0"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -946,9 +959,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
-      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
       "cpu": [
         "arm64"
       ],
@@ -965,9 +978,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
-      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
       "cpu": [
         "ia32"
       ],
@@ -984,9 +997,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
-      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
       "cpu": [
         "x64"
       ],
@@ -1002,19 +1015,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1274,9 +1274,9 @@
       "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.14.1.tgz",
+      "integrity": "sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1290,54 +1290,49 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
-      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.18",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
-      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-x64": "4.1.13",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
-      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
       "cpu": [
         "arm64"
       ],
@@ -1352,9 +1347,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
-      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
       "cpu": [
         "arm64"
       ],
@@ -1369,9 +1364,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
-      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
       "cpu": [
         "x64"
       ],
@@ -1386,9 +1381,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
-      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
       "cpu": [
         "x64"
       ],
@@ -1403,9 +1398,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
-      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
       "cpu": [
         "arm"
       ],
@@ -1420,9 +1415,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
-      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
       "cpu": [
         "arm64"
       ],
@@ -1437,9 +1432,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
-      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1454,9 +1449,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
-      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
       "cpu": [
         "x64"
       ],
@@ -1471,9 +1466,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
-      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
       "cpu": [
         "x64"
       ],
@@ -1488,9 +1483,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
-      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1506,21 +1501,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
-      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
       "cpu": [
         "arm64"
       ],
@@ -1535,9 +1530,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
-      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
       "cpu": [
         "x64"
       ],
@@ -1552,17 +1547,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
-      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.16.tgz",
+      "integrity": "sha512-Qn3SFGPXYQMKR/UtqS+dqvPrzEeBZHrFA92maT4zijCVggdsXnDBMsPFJo1eArX3J+O+Gi+8pV4PkqjLCNBk3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.13",
-        "@tailwindcss/oxide": "4.1.13",
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tanstack/match-sorter-utils": {
@@ -1666,9 +1661,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.14.tgz",
-      "integrity": "sha512-gqiKWld3YIkmtrrg9zDvg9jfksZCcPywXVN7IauUGhilwGV/yOyeUsvpR796m/Jye0zUzMXPKe8Ct1B79A7N5Q==",
+      "version": "20.19.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.23.tgz",
+      "integrity": "sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1682,23 +1677,22 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.13",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
-      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -1711,17 +1705,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.43.0.tgz",
-      "integrity": "sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
+      "integrity": "sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/type-utils": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/type-utils": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -1735,7 +1729,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.43.0",
+        "@typescript-eslint/parser": "^8.46.2",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -1751,17 +1745,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.43.0.tgz",
-      "integrity": "sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
+      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1777,14 +1770,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.43.0.tgz",
-      "integrity": "sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+      "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.43.0",
-        "@typescript-eslint/types": "^8.43.0",
+        "@typescript-eslint/tsconfig-utils": "^8.46.2",
+        "@typescript-eslint/types": "^8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1799,14 +1792,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.43.0.tgz",
-      "integrity": "sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
+      "integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0"
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1817,9 +1810,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.43.0.tgz",
-      "integrity": "sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+      "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1834,15 +1827,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.43.0.tgz",
-      "integrity": "sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.2.tgz",
+      "integrity": "sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -1859,9 +1852,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.43.0.tgz",
-      "integrity": "sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+      "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1873,16 +1866,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.43.0.tgz",
-      "integrity": "sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+      "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.43.0",
-        "@typescript-eslint/tsconfig-utils": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/project-service": "8.46.2",
+        "@typescript-eslint/tsconfig-utils": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1958,16 +1951,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.43.0.tgz",
-      "integrity": "sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.2.tgz",
+      "integrity": "sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0"
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1982,13 +1975,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.43.0.tgz",
-      "integrity": "sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+      "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2274,7 +2267,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2542,9 +2534,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -2677,9 +2669,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001741",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
-      "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
+      "version": "1.0.30001751",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2713,16 +2705,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2738,25 +2720,11 @@
         "node": ">=6"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2769,20 +2737,9 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2843,13 +2800,12 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/daisyui": {
-      "version": "5.1.12",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.12.tgz",
-      "integrity": "sha512-wPk6TfH6cPjYFcJIj1Zn2IYjrXLHtKbHD7GesfTDpH86d6Mgy1GTgl8mhKUqpbnVnTUNgkV7L2diPsvOGSpBIw==",
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.3.10.tgz",
+      "integrity": "sha512-vmjyPmm0hvFhA95KB6uiGmWakziB2pBv6CUcs5Ka/3iMBMn9S+C3SZYx9G9l2JrgTZ1EFn61F/HrPcwaUm2kLQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -3005,9 +2961,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
-      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3081,12 +3037,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/error-ex/node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -3273,26 +3223,24 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz",
-      "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.38.0.tgz",
+      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.1",
-        "@eslint/core": "^0.15.2",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.1",
+        "@eslint/core": "^0.16.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.35.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/js": "9.38.0",
+        "@eslint/plugin-kit": "^0.4.0",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
@@ -3453,7 +3401,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3948,6 +3895,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -4004,9 +3961,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
-      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4286,11 +4243,10 @@
       }
     },
     "node_modules/is-arrayish": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
-      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
-      "license": "MIT",
-      "optional": true
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
     },
     "node_modules/is-async-function": {
       "version": "2.1.1",
@@ -4445,14 +4401,15 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
         "has-tostringtag": "^1.0.2",
         "safe-regex-test": "^1.1.0"
       },
@@ -4707,9 +4664,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4848,9 +4805,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
@@ -4864,22 +4821,44 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
       "cpu": [
         "arm64"
       ],
@@ -4898,9 +4877,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
       "cpu": [
         "x64"
       ],
@@ -4919,9 +4898,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
       "cpu": [
         "x64"
       ],
@@ -4940,9 +4919,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
       "cpu": [
         "arm"
       ],
@@ -4961,9 +4940,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
       "cpu": [
         "arm64"
       ],
@@ -4982,9 +4961,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
       "cpu": [
         "arm64"
       ],
@@ -5003,9 +4982,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
       "cpu": [
         "x64"
       ],
@@ -5024,9 +5003,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
       "cpu": [
         "x64"
       ],
@@ -5045,9 +5024,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
       "cpu": [
         "arm64"
       ],
@@ -5066,9 +5045,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
       "cpu": [
         "x64"
       ],
@@ -5140,9 +5119,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5232,45 +5211,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -5305,9 +5245,9 @@
       }
     },
     "node_modules/napi-postinstall": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
-      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5805,7 +5745,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5815,7 +5754,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -5950,12 +5888,12 @@
       "license": "MIT"
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -6085,9 +6023,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -6147,15 +6085,15 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
-      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.4",
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
         "semver": "^7.7.2"
       },
       "engines": {
@@ -6165,28 +6103,28 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.3",
-        "@img/sharp-darwin-x64": "0.34.3",
-        "@img/sharp-libvips-darwin-arm64": "1.2.0",
-        "@img/sharp-libvips-darwin-x64": "1.2.0",
-        "@img/sharp-libvips-linux-arm": "1.2.0",
-        "@img/sharp-libvips-linux-arm64": "1.2.0",
-        "@img/sharp-libvips-linux-ppc64": "1.2.0",
-        "@img/sharp-libvips-linux-s390x": "1.2.0",
-        "@img/sharp-libvips-linux-x64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
-        "@img/sharp-linux-arm": "0.34.3",
-        "@img/sharp-linux-arm64": "0.34.3",
-        "@img/sharp-linux-ppc64": "0.34.3",
-        "@img/sharp-linux-s390x": "0.34.3",
-        "@img/sharp-linux-x64": "0.34.3",
-        "@img/sharp-linuxmusl-arm64": "0.34.3",
-        "@img/sharp-linuxmusl-x64": "0.34.3",
-        "@img/sharp-wasm32": "0.34.3",
-        "@img/sharp-win32-arm64": "0.34.3",
-        "@img/sharp-win32-ia32": "0.34.3",
-        "@img/sharp-win32-x64": "0.34.3"
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
       }
     },
     "node_modules/shebang-command": {
@@ -6288,16 +6226,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
-      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6551,16 +6479,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
-      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6571,24 +6499,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -6642,7 +6552,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6805,12 +6714,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6917,9 +6825,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -7040,16 +6948,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -7073,9 +6971,9 @@
       }
     },
     "node_modules/yup": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.0.tgz",
-      "integrity": "sha512-VJce62dBd+JQvoc+fCVq+KZfPHr+hXaxCcVgotfwWvlR0Ja3ffYKaJBT8rptPOSKOGJDCUnW2C2JWpud7aRP6Q==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
       "license": "MIT",
       "dependencies": {
         "property-expr": "^2.0.5",
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index e7fa4c24..3ef73396 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -33,6 +34,10 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
@@ -41,44 +46,26 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
-      search: searchProjectFlock,
-    }).toString()}`, ProjectFlockApi.getAllFetcher);
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoadingProjectFlockKandang,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(getProjectFlockKandangUrl, () =>
-    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
-      getProjectFlockKandangUrl,
-      {
-        method: 'GET',
-        params: {
-          project_flock_id: projectFlockId ?? 0,
-          kandang_id: selectedKandang?.id,
-        },
-      }
-    )
-  );
-
   // Mapping Options
   const options = isResponseSuccess(listProjectFlock)
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
 
   const chickinModal = useModal();
-
-  // Use Effect
-  useEffect(() => {
-    refreshProjectFlockKandang();
-  }, [selectedKandang, refreshProjectFlockKandang]);
+  const alertModal = useModal();
 
   if (!projectFlockId) {
     router.back();
@@ -99,13 +86,33 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = (kandang: Kandang) => {
+  const handleChickinClick = async (kandang: Kandang) => {
+    setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
-    refreshProjectFlockKandang();
-    chickinModal.openModal();
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      } else {
+        alertModal.openModal();
+      }
+    }
   };
   const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
@@ -126,7 +133,7 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-1/4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                   <SelectInput
                     required
                     isSearchable
@@ -134,8 +141,8 @@ const AddChickin = () => {
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
-                      value: projectFlock.data.id,
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
                     }}
                     onChange={(val) =>
                       router.push(
@@ -152,7 +159,7 @@ const AddChickin = () => {
               </div>
             </header>
             <Table<Kandang>
-              data={projectFlock.data.kandangs}
+              data={projectFlock.data?.kandangs}
               columns={[
                 {
                   header: '#',
@@ -173,10 +180,10 @@ const AddChickin = () => {
                         <Button
                           color='success'
                           variant='outline'
-                          isLoading={isLoadingProjectFlockKandang}
                           onClick={() => {
                             handleChickinClick(props.row.original);
                           }}
+                          disabled={isLoadingProjectFlockKandang}
                         >
                           <Icon
                             icon='mdi:home-import-outline'
@@ -195,7 +202,7 @@ const AddChickin = () => {
                 containerClassName: cn({
                   'mb-20':
                     isResponseSuccess(projectFlock) &&
-                    projectFlock.data.kandangs?.length === 0,
+                    projectFlock.data?.kandangs?.length === 0,
                 }),
                 tableWrapperClassName: 'overflow-x-auto min-h-full!',
                 tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -232,14 +239,28 @@ const AddChickin = () => {
                 <ChickinForm
                   initialValues={{
                     project_flock_kandang: projectFlockKandang.data,
-                    created_user: projectFlock.data.created_user,
-                    created_at: projectFlock.data.created_at,
-                    updated_at: projectFlock.data.updated_at,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />
               )}
           </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
         </>
       )}
     </>
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/chickin/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/chickin/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;
\ No newline at end of file
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
new file mode 100644
index 00000000..96647c55
--- /dev/null
+++ b/src/app/production/chickin/detail/page.tsx
@@ -0,0 +1,351 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+/**
+ * TODO: Refactor code - pindahin detail ke reuseable component
+ *       setelah implement approval and reject 
+ */
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  if (!chickinId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!chickin || isResponseError(chickin))) {
+    router.replace('/404');
+    return;
+  }
+
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+              </div>
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
+                </div>
+              </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default DetailChickin;
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 5efe83d8..bea96b84 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -1,46 +1,51 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  if(!projectFlockId){
+  if (!projectFlockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockDetail;
\ No newline at end of file
+export default ProjectFlockDetail;
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
index fdb8775d..d264d9e4 100644
--- a/src/app/production/project-flock/page.tsx
+++ b/src/app/production/project-flock/page.tsx
@@ -1,4 +1,3 @@
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
 import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
 
 const ProjectFlock = () => {
diff --git a/src/app/production/transfer-to-laying/add/page.tsx b/src/app/production/transfer-to-laying/add/page.tsx
new file mode 100644
index 00000000..6f29085f
--- /dev/null
+++ b/src/app/production/transfer-to-laying/add/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+const AddTransferToLaying = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <TransferToLayingForm />
+    </div>
+  );
+};
+
+export default AddTransferToLaying;
diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
new file mode 100644
index 00000000..9003dbba
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/edit/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;
diff --git a/src/app/production/transfer-to-laying/detail/layout.tsx b/src/app/production/transfer-to-laying/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
new file mode 100644
index 00000000..de5426c8
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;
diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
new file mode 100644
index 00000000..84513542
--- /dev/null
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <TransferToLayingsTable />
+    </section>
+  );
+};
+
+export default TransferToLaying;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 82f90ef5..2b8350d5 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -148,4 +148,4 @@ const Card = ({
   );
 };
 
-export default Card;
\ No newline at end of file
+export default Card;
diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index be87f069..4a3b44b0 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
 import Collapse from '@/components/Collapse';
+import Button from '@/components/Button';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
 };
 
 const MainDrawerContent = () => {
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
       <MainDrawerMenu />
diff --git a/src/components/PillBadge.tsx b/src/components/PillBadge.tsx
new file mode 100644
index 00000000..827177a9
--- /dev/null
+++ b/src/components/PillBadge.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+  content: ReactNode;
+  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+  className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
+        {
+          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
+          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
+          'border-green-200 bg-green-50 text-green-500': color === 'green',
+          'border-red-200 bg-red-50 text-red-500': color === 'red',
+          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
+          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
+        },
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default PillBadge;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 9f1ef6e5..d3498e33 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -63,34 +63,34 @@ const emptyContentDefaultValue = (
 );
 
 const Table = <TData extends object>({
-                                       data = [],
-                                       columns = [],
-                                       pageSize = 10,
-                                       totalItems,
-                                       page,
-                                       onPageChange,
-                                       isLoading = false,
-                                       fuzzySearchValue,
-                                       onFuzzySearchValueChange,
-                                       className = {
-                                         containerClassName: '',
-                                         tableWrapperClassName: '',
-                                         tableClassName: '',
-                                         tableHeaderClassName: '',
-                                         headerRowClassName: '',
-                                         headerColumnClassName: '',
-                                         tableBodyClassName: '',
-                                         bodyRowClassName: '',
-                                         bodyColumnClassName: '',
-                                         paginationClassName: '',
-                                       },
-                                       emptyContent = emptyContentDefaultValue,
-                                       sorting,
-                                       setSorting,
-                                       manualSorting = false,
-                                       rowSelection,
-                                       setRowSelection,
-                                     }: TableProps<TData>) => {
+  data = [],
+  columns = [],
+  pageSize = 10,
+  totalItems,
+  page,
+  onPageChange,
+  isLoading = false,
+  fuzzySearchValue,
+  onFuzzySearchValueChange,
+  className = {
+    containerClassName: '',
+    tableWrapperClassName: '',
+    tableClassName: '',
+    tableHeaderClassName: '',
+    headerRowClassName: '',
+    headerColumnClassName: '',
+    tableBodyClassName: '',
+    bodyRowClassName: '',
+    bodyColumnClassName: '',
+    paginationClassName: '',
+  },
+  emptyContent = emptyContentDefaultValue,
+  sorting,
+  setSorting,
+  manualSorting = false,
+  rowSelection,
+  setRowSelection,
+}: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
     page !== undefined &&
@@ -188,72 +188,72 @@ const Table = <TData extends object>({
       <div className={className.tableWrapperClassName}>
         <table className={className.tableClassName}>
           <thead className={className.tableHeaderClassName}>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id} className={className.headerRowClassName}>
-              {headerGroup.headers.map((header) => (
-                <th
-                  key={header.id}
-                  colSpan={header.colSpan}
-                  onClick={header.column.getToggleSortingHandler()}
-                  className={cn(
-                    header.column.getCanSort()
-                      ? 'cursor-pointer select-none'
-                      : '',
-                    className.headerColumnClassName
-                  )}
-                >
-                  <div className='flex items-center gap-1'>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} className={className.headerRowClassName}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={cn(
+                      header.column.getCanSort()
+                        ? 'cursor-pointer select-none'
+                        : '',
+                      className.headerColumnClassName
                     )}
+                  >
+                    <div className='flex items-center gap-1'>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
 
-                    {header.column.getCanSort() && (
-                      <div className='flex items-center'>
-                        <Icon
-                          icon='lucide:arrow-up'
-                          width={12}
-                          height={12}
-                          className={cn(
-                            'transition-all ease-in-out duration-200',
-                            header.column.getIsSorted() === 'asc'
-                              ? 'text-black'
-                              : 'text-black/30'
-                          )}
-                        />
-                        <Icon
-                          icon='lucide:arrow-down'
-                          width={12}
-                          height={12}
-                          className={cn(
-                            'transition-all ease-in-out duration-200',
-                            header.column.getIsSorted() === 'desc'
-                              ? 'text-black'
-                              : 'text-black/30'
-                          )}
-                        />
-                      </div>
-                    )}
-                  </div>
-                </th>
-              ))}
-            </tr>
-          ))}
+                      {header.column.getCanSort() && (
+                        <div className='flex items-center'>
+                          <Icon
+                            icon='lucide:arrow-up'
+                            width={12}
+                            height={12}
+                            className={cn(
+                              'transition-all ease-in-out duration-200',
+                              header.column.getIsSorted() === 'asc'
+                                ? 'text-black'
+                                : 'text-black/30'
+                            )}
+                          />
+                          <Icon
+                            icon='lucide:arrow-down'
+                            width={12}
+                            height={12}
+                            className={cn(
+                              'transition-all ease-in-out duration-200',
+                              header.column.getIsSorted() === 'desc'
+                                ? 'text-black'
+                                : 'text-black/30'
+                            )}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
           </thead>
 
           <tbody className={className.tableBodyClassName}>
-          {table.getRowModel().rows.map((row) => (
-            <tr key={row.id} className={className.bodyRowClassName}>
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} className={className.bodyColumnClassName}>
-                  {!isLoading &&
-                    flexRender(cell.column.columnDef.cell, cell.getContext())}
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className={className.bodyRowClassName}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className={className.bodyColumnClassName}>
+                    {!isLoading &&
+                      flexRender(cell.column.columnDef.cell, cell.getContext())}
 
-                  {isLoading && <div className='skeleton w-full h-4' />}
-                </td>
-              ))}
-            </tr>
-          ))}
+                    {isLoading && <div className='skeleton w-full h-4' />}
+                  </td>
+                ))}
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 1d9d86b4..dbd4b6bc 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
 
   const { data: userResponse, isLoading: isLoadingUserResponse } =
     useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
+      '/auth/sso/userinfo',
       httpClientFetcher,
       {
         shouldRetryOnError: false,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   return <>{children}</>;
 };
 
-export default RequireAuth;
\ No newline at end of file
+export default RequireAuth;
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 0ef80fee..be485b75 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -88,7 +88,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 6218970c..86100e40 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -70,7 +70,7 @@ const FileInput = ({
         onBlur={onBlur}
         disabled={disabled}
         className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
+          'grow file-input w-full h-12 rounded',
           className?.input
         )}
         readOnly={readOnly}
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index d4d8045d..e6e0e773 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -17,15 +17,15 @@ interface NumberInputProps extends Omit<TextInputProps, 'type'> {
 }
 
 const NumberInput = ({
-                       thousandSeparator = ',',
-                       decimalSeparator = '.',
-                       decimalScale = 5,
-                       allowNegative = true,
-                       onChange,
-                       inputPrefix,
-                       inputSuffix,
-                       ...restProps
-                     }: NumberInputProps) => {
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
   const valueChangeHandler: OnValueChange = (
     numberFormatValues,
     sourceInfo
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 32d26866..f3eca7d1 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
 import Select, {
   OptionProps,
   GroupBase,
@@ -11,7 +13,10 @@ import Select, {
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-import { cn } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
@@ -162,7 +167,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -178,16 +183,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -195,7 +200,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
@@ -246,4 +251,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T,
+  labelKey: keyof T,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 03bf7c0b..0e7891f7 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 7d791d2f..5936c85a 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -131,10 +131,14 @@ const TextInput = ({
               onChange={onChange}
               onBlur={onBlur}
               disabled={disabled}
-              className={cn('grow bg-transparent outline-none', {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              }, className?.input)}
+              className={cn(
+                'grow bg-transparent outline-none',
+                {
+                  'cursor-not-allowed': disabled,
+                  'text-gray-500': disabled,
+                },
+                className?.input
+              )}
               readOnly={readOnly}
             />
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 76d7ae30..883572e0 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -40,10 +40,14 @@ interface MovementFormProps {
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   // ===== STATE MANAGEMENT =====
   const [, setMovementFormErrorMessage] = useState('');
-  const [productWarehouseSelectInputValue, setProductWarehouseSelectInputValue] = useState('');
+  const [
+    productWarehouseSelectInputValue,
+    setProductWarehouseSelectInputValue,
+  ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] = useState('');
+  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
+    useState('');
   const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
 
   // ===== FORM HANDLERS =====
@@ -112,9 +116,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const warehouseOptions = isResponseSuccess(warehouses)
     ? warehouses?.data.map((w) => {
-      warehouseStockMap.get(w.id);
-      return {
-        value: w.id,
+        warehouseStockMap.get(w.id);
+        return {
+          value: w.id,
           label: w.name,
           area: w.area?.name,
           location:
@@ -400,10 +404,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const handleDeliveryCostPerItemChange = useCallback(
     (idx: number, value: number) => {
-      formik.setFieldValue(
-        `deliveries.${idx}.delivery_cost_per_item`,
-        value
-      );
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -520,9 +521,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       if (!stockInfo) {
         return (
           <Badge
-            variant="ghost"
-            color="neutral"
-            size="sm"
+            variant='ghost'
+            color='neutral'
+            size='sm'
             className={{ badge: 'whitespace-nowrap font-semibold' }}
           >
             Kosong
@@ -537,9 +538,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
       return (
         <Badge
-          variant="soft"
+          variant='soft'
           color={color}
-          size="sm"
+          size='sm'
           className={{ badge: 'whitespace-nowrap font-semibold' }}
         >
           Tersedia {productCount} produk
@@ -806,7 +807,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isClearable
                   startAdornment={
                     formik.values.source_warehouse_id
-                      ? getWarehouseStockAdornment(formik.values.source_warehouse_id)
+                      ? getWarehouseStockAdornment(
+                          formik.values.source_warehouse_id
+                        )
                       : undefined
                   }
                 />
@@ -873,7 +876,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isClearable
                   startAdornment={
                     formik.values.destination_warehouse_id
-                      ? getWarehouseStockAdornment(formik.values.destination_warehouse_id)
+                      ? getWarehouseStockAdornment(
+                          formik.values.destination_warehouse_id
+                        )
                       : undefined
                   }
                 />
@@ -925,31 +930,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                            <CheckboxInput
-                              name='select-all-products'
-                              checked={
-                                formik.values.products?.length ===
-                                  selectedProducts.length &&
-                                formik.values.products?.length > 0
+                          <CheckboxInput
+                            name='select-all-products'
+                            checked={
+                              formik.values.products?.length ===
+                                selectedProducts.length &&
+                              formik.values.products?.length > 0
+                            }
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedProducts(
+                                  formik.values.products?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedProducts([]);
                               }
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedProducts(
-                                    formik.values.products?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedProducts([]);
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
                         </th>
                       )}
                       <th>
@@ -977,12 +982,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.products?.map((product, idx) => (
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
-                          <td className="!align-middle">
+                          <td className='!align-middle'>
                             <CheckboxInput
                               name={`product-${idx}`}
                               checked={selectedProducts.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>,
+                                e: React.ChangeEvent<HTMLInputElement>
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedProducts([
@@ -991,7 +996,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   ]);
                                 } else {
                                   setSelectedProducts(
-                                    selectedProducts.filter((i) => i !== idx),
+                                    selectedProducts.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -1057,8 +1062,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             onBlur={formik.handleBlur}
                             decimalScale={0}
                             allowNegative={false}
-                            thousandSeparator=","
-                            decimalSeparator="."
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             bottomLabel={getProductQtyBottomLabel(idx)}
                             isError={
                               isRepeaterInputError(
@@ -1146,31 +1151,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                            <CheckboxInput
-                              name='select-all-deliveries'
-                              checked={
-                                formik.values.deliveries?.length ===
-                                  selectedDeliveries.length &&
-                                formik.values.deliveries?.length > 0
+                          <CheckboxInput
+                            name='select-all-deliveries'
+                            checked={
+                              formik.values.deliveries?.length ===
+                                selectedDeliveries.length &&
+                              formik.values.deliveries?.length > 0
+                            }
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedDeliveries(
+                                  formik.values.deliveries?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedDeliveries([]);
                               }
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedDeliveries(
-                                    formik.values.deliveries?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedDeliveries([]);
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
                         </th>
                       )}
                       <th>
@@ -1244,12 +1249,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.deliveries?.map((delivery, idx) => (
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
-                          <td className="!align-middle">
+                          <td className='!align-middle'>
                             <CheckboxInput
                               name={`delivery-${idx}`}
                               checked={selectedDeliveries.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>,
+                                e: React.ChangeEvent<HTMLInputElement>
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedDeliveries([
@@ -1258,9 +1263,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   ]);
                                 } else {
                                   setSelectedDeliveries(
-                                    selectedDeliveries.filter(
-                                      (i) => i !== idx,
-                                    ),
+                                    selectedDeliveries.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -1319,8 +1322,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             onBlur={formik.handleBlur}
                             decimalScale={0}
                             allowNegative={false}
-                            thousandSeparator=","
-                            decimalSeparator="."
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             isError={
                               isDeliveryProductInputError(idx, 0, 'product_qty')
                                 .isError || Boolean(getDeliveryQtyError(idx, 0))
@@ -1331,7 +1334,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               getDeliveryQtyError(idx, 0) ||
                               undefined
                             }
-                            bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
+                            bottomLabel={getDeliveryProductQtyBottomLabel(
+                              idx,
+                              0
+                            )}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-48',
@@ -1464,7 +1470,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
-                            inputPrefix="Rp"
+                            inputPrefix='Rp'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1482,13 +1488,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={delivery.delivery_cost_per_item || ''}
-                            onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
+                            onChange={handleDeliveryCostPerItemChangeWrapper(
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
                             decimalScale={0}
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
-                            inputPrefix="Rp"
+                            inputPrefix='Rp'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index e2b527d3..65ab3c16 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { cn, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -57,13 +57,6 @@ const ChickinTable = () => {
     `${ChickinApi.basePath}${getTableFilterQueryString()}`,
     ChickinApi.getAllFetcher
   );
-  const {
-    data: projectFlocks,
-    isLoading: isLoadingProjectFlocks,
-  } = useSWR(
-    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
-  );
 
   const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateFilter('search', event.target.value);
@@ -131,6 +124,13 @@ const ChickinTable = () => {
           {
             accessorFn: (row) => row.quantity,
             header: 'Jumlah Chickin',
+            cell: (props) => {
+              if (props.row.original.quantity) {
+                return formatNumber(props.row.original.quantity);
+              } else {
+                return '-';
+              }
+            }
           },
           {
             accessorFn: (row) => row.chick_in_date,
@@ -166,7 +166,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () => {
+              const editClickHandler = () =>  {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
       )}
     >
       <Button
-        href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
+        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index c6674df4..8ac6b6ee 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -11,7 +11,7 @@ import {
   ChickinFormValues,
   UpdateChickinFormSchema,
 } from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { ChickinApi } from '@/services/api/production';
 import DateInput from '@/components/input/DateInput';
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -45,8 +46,11 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
-      quantity: initialValues?.quantity ?? 1,
+      note: initialValues?.note ?? '',
+      quantity:
+        initialValues?.quantity ??
+        initialValues?.project_flock_kandang?.available_quantity ??
+        0,
     };
   }, [initialValues]);
 
@@ -71,10 +75,7 @@ const ChickinForm = ({
       payload: UpdateChickinPayload,
       afterSubmit: (() => void) | undefined
     ) => {
-      const res = await ChickinApi.update(
-        payload.project_flock_kandang_id as number,
-        payload
-      );
+      const res = await ChickinApi.update(payload.id, payload);
       if (isResponseError(res)) {
         setChickinFormErrorMessage(res.message);
         return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
       // reset error message
       setChickinFormErrorMessage('');
 
-      if (initialValues?.project_flock_kandang?.id == undefined) {
+      if (
+        initialValues?.project_flock_kandang?.id == undefined ||
+        (formType == 'edit' && initialValues?.id == undefined)
+      ) {
         return;
       }
 
@@ -103,9 +107,13 @@ const ChickinForm = ({
       const payload = {
         chick_in_date: values.chick_in_date,
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+        note: values.note,
+        quantity: values.quantity,
+        id: initialValues.id ?? 0,
       };
 
       // cek type form yang disubmit
+      console.log(formType);
       switch (formType) {
         case 'add':
           handleCreate(payload, afterSubmit);
@@ -144,28 +152,34 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
-        <TextInput
+        <NumberInput
           value={formik.values.quantity}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           name='quantity'
-          label='Jumlah Chickin'
+          label='Jumlah (Ekor)'
           required
-          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
-          errorMessage={formik.errors.quantity}
-          type='number'
-          disabled
+          isError={
+            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
+            formik.values.quantity == 0
+          }
+          errorMessage={
+            formik.values.quantity == 0
+              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
+              : formik.errors.quantity
+          }
+          readOnly
         />
         <TextArea
           required
           label='Catatan'
           name='note'
+          placeholder='Masukan catatan chickin'
           value={formik.values.note}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           isError={formik.touched.note && Boolean(formik.errors.note)}
           errorMessage={formik.errors.note}
-
         />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 412c47ed..99f26721 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
@@ -16,13 +17,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Icon } from '@iconify/react';
 import {
-  CellContext,
-  ColumnDef,
-  SortingState,
-} from '@tanstack/react-table';
+  ProjectFlockApprovalPayload,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { CellContext, SortingState } from '@tanstack/react-table';
 import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -56,24 +56,28 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
-      <Button
-        href={`/production/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>
-      {/* <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> */}
+      {props.row.original.approval.step_name === 'Aktif' && (
+        <Button
+          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          variant='ghost'
+          color='success'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:home-import-outline' width={16} height={16} />
+          Chickin
+        </Button>
+      )}
+      {props.row.original.approval.step_name === 'Pengajuan' && (
+        <Button
+          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      )}
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -117,10 +121,15 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+
+  // State
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection)
+    .filter((id) => rowSelection[id])
+    .map((id) => parseInt(id));
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
   const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -129,6 +138,13 @@ const ProjectFlockTable = () => {
     null
   );
   const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock>();
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
   const {
@@ -144,20 +160,20 @@ const ProjectFlockTable = () => {
     search: areaSelectInputValue,
     limit: '100',
   }).toString()}`;
-  const {
-    data: areas,
-    isLoading: isLoadingAreas,
-  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSelectInputValue,
     area_id: selectedArea != null ? selectedArea.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: locations,
-    isLoading: isLoadingLocations,
-  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: kandangSelectInputValue,
@@ -165,10 +181,10 @@ const ProjectFlockTable = () => {
       selectedLocation != null ? selectedLocation.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: kandangs,
-    isLoading: isLoadingKandang,
-  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+  const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
 
   // Data to Options Mapping
   const optionsArea = isResponseSuccess(areas)
@@ -190,139 +206,6 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // State
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock>();
-  const deleteModal = useModal();
-  const confirmModal = useModal();
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-
-  // Columns
-  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
-    {
-      id: 'select',
-      header: () => {
-        const allSelected =
-          isResponseSuccess(projectFlocks) &&
-          projectFlocks.data.length > 0 &&
-          selectedIds.length === projectFlocks.data.length;
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={allSelected}
-            onChange={(e) => handleSelectAll(e.target.checked)}
-          />
-        );
-      },
-      cell: (props) => {
-        const id = props.row.original.id;
-        const isChecked = selectedIds.includes(id);
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={isChecked}
-            onChange={(e) => handleSelectRow(id, e.target.checked)}
-          />
-        );
-      },
-    },
-
-    {
-      accessorKey: 'flock.name',
-      header: 'Flock',
-    },
-    {
-      accessorKey: 'area.name',
-      header: 'Area',
-    },
-    {
-      accessorKey: 'location.name',
-      header: 'Lokasi',
-    },
-    {
-      accessorKey: 'fcr.name',
-      header: 'FCR',
-    },
-    {
-      accessorKey: 'category',
-      header: 'Kategori',
-    },
-    {
-      header: 'Kandang',
-      cell: (props) => {
-        const kandang = props.row.original.kandangs;
-        if (kandang) {
-          const kandangNames = kandang.map((k: Kandang) => k.name);
-          return (
-            <div>
-              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-            </div>
-          );
-        } else {
-          return '-';
-        }
-      },
-    },
-    {
-      accessorKey: 'period',
-      header: 'Periode',
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Dibuat pada',
-      cell: (props) =>
-        new Date(props.row.original.created_at).toLocaleDateString(),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-        const currentRowRelativeIndex =
-          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-        const deleteClickHandler = () => {
-          setSelectedProjectFlock(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -341,45 +224,17 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const handleSelectAll = (checked: boolean) => {
-    if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data.map((item) => item.id);
-      setSelectedIds(allIds);
-      setSelectedFlocks(projectFlocks.data);
-    } else {
-      setSelectedIds([]);
-      setSelectedFlocks([]);
-    }
-  };
-
-  const handleSelectRow = (id: number, checked: boolean) => {
-    if (!isResponseSuccess(projectFlocks)) return;
-
-    const targetFlock = projectFlocks.data.find((item) => item.id === id);
-
-    if (!targetFlock) return;
-
-    if (checked) {
-      setSelectedIds((prev) => [...prev, id]);
-      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
-    } else {
-      setSelectedIds((prev) => prev.filter((val) => val !== id));
-      setSelectedFlocks((prev) =>
-        (prev || []).filter((flock) => flock.id !== id)
-      );
-    }
-  };
 
   const confirmationModalApproveClickHandler = async () => {
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
-      payload: 'POST',
-      params: {
-        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedRowIds.map((id) => id),
       },
     });
 
@@ -391,6 +246,8 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
+    setRowSelection({});
+    refreshProjectFlocks();
     setIsApproveLoading(false);
   };
 
@@ -412,11 +269,9 @@ const ProjectFlockTable = () => {
                 variant='outline'
                 color='success'
                 onClick={() => {
-                  if (selectedIds.length > 0) {
-                    confirmModal.openModal();
-                  }
+                  confirmModal.openModal();
                 }}
-                disabled={!(selectedIds.length > 0)}
+                disabled={selectedRowIds.length === 0}
                 className='w-full sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
@@ -508,7 +363,162 @@ const ProjectFlockTable = () => {
 
           <Table<ProjectFlock>
             data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
-            columns={projectFlocksColumns}
+            columns={[
+              {
+                id: 'select',
+                header: ({ table }) => {
+                  const allRows = table.getRowModel().rows;
+                  const selectableRows = allRows.filter(
+                    (row) => row.original?.approval?.step_number == 1
+                  );
+                  
+                  const allSelected = selectableRows.every((row) =>
+                    row.getIsSelected()
+                  ) && selectableRows.length != 0;
+
+                  const someSelected =
+                    selectableRows.some((row) => row.getIsSelected()) &&
+                    !allSelected;
+
+                  const toggleSelectableRows = () => {
+                    const shouldSelect = !allSelected;
+                    selectableRows.forEach((row) =>
+                      row.toggleSelected(shouldSelect)
+                    );
+                  };
+
+                  return (
+                    <div className='w-full flex flex-row justify-center'>
+                      <CheckboxInput
+                        name='allRow'
+                        checked={allSelected}
+                        indeterminate={someSelected}
+                        onChange={toggleSelectableRows}
+                        disabled={
+                          isResponseSuccess(projectFlocks) &&
+                          projectFlocks?.data?.filter(
+                            (flock) => flock.approval.step_number == 1
+                          ).length == 0
+                        }
+                      />
+                    </div>
+                  );
+                },
+                cell: ({ row }) => {
+                  return (
+                    <CheckboxInput
+                      name='row'
+                      checked={
+                        row.getIsSelected() &&
+                        row.original.approval.step_number == 1
+                      }
+                      disabled={
+                        !row.getCanSelect() ||
+                        row.original.approval.step_number != 1
+                      }
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
+                    />
+                  );
+                },
+              },
+
+              {
+                accessorKey: 'flock.name',
+                header: 'Flock',
+              },
+              {
+                accessorKey: 'area.name',
+                header: 'Area',
+              },
+              {
+                accessorKey: 'location.name',
+                header: 'Lokasi',
+              },
+              {
+                accessorKey: 'fcr.name',
+                header: 'FCR',
+              },
+              {
+                accessorKey: 'category',
+                header: 'Kategori',
+              },
+              {
+                accessorKey: 'approval.step_name',
+                header: 'Status',
+              },
+              {
+                header: 'Kandang',
+                cell: (props) => {
+                  const kandang = props.row.original.kandangs;
+                  if (kandang) {
+                    const kandangNames = kandang.map((k: Kandang) => k.name);
+                    return (
+                      <div>
+                        {kandangNames.length > 0
+                          ? kandangNames.join(', ')
+                          : 'Tidak ada'}
+                      </div>
+                    );
+                  } else {
+                    return '-';
+                  }
+                },
+              },
+              {
+                accessorKey: 'period',
+                header: 'Periode',
+              },
+              {
+                accessorKey: 'created_at',
+                header: 'Dibuat pada',
+                cell: (props) =>
+                  new Date(props.row.original.created_at).toLocaleDateString(),
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  const currentPageSize =
+                    props.table.getPaginationRowModel().rows.length;
+                  const currentPageRows =
+                    props.table.getPaginationRowModel().flatRows;
+                  const currentRowRelativeIndex =
+                    currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                  const isLast2Rows =
+                    currentRowRelativeIndex > currentPageSize - 2;
+
+                  const deleteClickHandler = () => {
+                    setSelectedProjectFlock(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -522,6 +532,8 @@ const ProjectFlockTable = () => {
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
                 'mb-20':
@@ -559,18 +571,19 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={
-          selectedFlocks.length > 0
-            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-                .map(
-                  (flock) =>
-                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-                      flock.area?.name ?? '-'
-                    }`
-                )
-                .join(', ')})`
-            : 'Tidak ada Project Flock yang dipilih.'
-        }
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        // text={
+        //   selectedFlocks.length > 0
+        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
+        //         .map(
+        //           (flock) =>
+        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
+        //               flock.area?.name ?? '-'
+        //             }`
+        //         )
+        //         .join(', ')})`
+        //     : 'Tidak ada Project Flock yang dipilih.'
+        // }
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index ccc3fadc..14eee9b7 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,13 +14,14 @@ import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
+import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
   UpdateProjectFlockFormSchema,
 } from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
+  ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
   PeriodFlock,
   ProjectFlock,
@@ -34,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
+  refreshProjectFlocks?: KeyedMutator<
+    BaseApiResponse<ProjectFlock> | undefined
+  >;
 }
 
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
+  refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
@@ -70,6 +76,34 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
+    () =>
+      Object.fromEntries(
+        (initialValues?.kandangs ?? []).map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      )
+  );
+
+  useEffect(() => {
+    if (initialValues?.approval?.step_name) {
+      const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+      setIsApprovedDisabled(approvedDisabled);
+      setIsRejectedDisabled(!approvedDisabled);
+      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+    }
+  }, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -109,7 +143,7 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
     kandangUrl,
     KandangApi.getAllFetcher
   );
@@ -167,6 +201,20 @@ const ProjectFlockForm = ({
       }
     }
   }, [kandang]);
+  useEffect(() => {
+    if (initialValues?.kandangs) {
+      refreshKandang();
+      setOpenSelectKandangs(true);
+
+      const newRowSelection = Object.fromEntries(
+        initialValues.kandangs.map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      );
+      setRowSelection(newRowSelection);
+    }
+  }, [initialValues, refreshKandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -211,38 +259,6 @@ const ProjectFlockForm = ({
     formik.setFieldTouched('category', true);
   };
 
-  const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value, checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.concat(parseInt(value))
-      );
-    } else {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.filter((id) => id !== parseInt(value))
-      );
-    }
-  };
-  const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        optionsKandang
-          .filter(
-            (kandang) =>
-              kandang.status === 'NON_ACTIVE' ||
-              formik.values.kandang_ids.includes(kandang.id)
-          )
-          .map((kandang) => kandang.id)
-      );
-    } else {
-      formik.setFieldValue('kandang_ids', []);
-    }
-  };
-
   // Submit Handler
   const createProjectFlockHandler = async (
     payload: CreateProjectFlockPayload
@@ -375,7 +391,7 @@ const ProjectFlockForm = ({
       formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
-  
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
@@ -400,11 +416,21 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    if(isResponseSuccess(periodFlocks)){
+    if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
   }, [periodFlocks]);
 
+  useEffect(() => {
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formikSetValues({
+      ...formik.values,
+      kandang_ids: selectedRowIds,
+    });
+  }, [rowSelection, formikSetValues]);
+
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -422,23 +448,42 @@ const ProjectFlockForm = ({
     setIsDeleteLoading(false);
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (initialValues?.id === undefined) return;
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/${initialValues?.id}/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [initialValues.id],
+      },
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      toast.success('Project Flock berhasil di-approve!');
-      confirmModal.closeModal();
+      if (refreshProjectFlocks) {
+        await refreshProjectFlocks();
+      }
+      // if (action == 'APPROVED') {
+      //   setIsApprovedDisabled(true);
+      //   setIsRejectedDisabled(false);
+      // }
+      // if (action == 'REJECTED') {
+      //   setIsRejectedDisabled(true);
+      //   setIsApprovedDisabled(false);
+      // }
+      toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
-      confirmModal.closeModal();
     }
+    confirmModal.closeModal();
     setIsApproveLoading(false);
   };
 
@@ -481,21 +526,37 @@ const ProjectFlockForm = ({
           </div>
         )}
         {formType == 'detail' && (
-          <div className='w-full py-4'>
+          <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}
+              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>
           </div>
         )}
         <form
@@ -505,9 +566,7 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>
-                Informasi Umum
-              </div>
+              <div className='card-title mb-4'>Informasi Umum</div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -614,7 +673,7 @@ const ProjectFlockForm = ({
                       variant='link'
                       className={`text-primary rotate-${
                         openSelectKandangs ? '180' : '0'
-                      } transition-transform hover:text-inherit`}
+                      } transition-transform hover:text-inherit me-3`}
                     >
                       <Icon
                         icon='material-symbols:keyboard-arrow-down'
@@ -631,102 +690,15 @@ const ProjectFlockForm = ({
               >
                 <div className='overflow-x-auto'>
                   {isLoadingKandang && (
-                    <span className="loading loading-dots loading-xl"></span>
+                    <span className='loading loading-dots loading-xl'></span>
                   )}
-                  <table className='table'>
-                    {/* head */}
-                    <thead>
-                      <tr>
-                        <th>
-                          <label>
-                            <input
-                              type='checkbox'
-                              checked={
-                                optionsKandang
-                                  .filter(
-                                    (k) =>
-                                      k.status === 'NON_ACTIVE' ||
-                                      formik.values.kandang_ids.includes(k.id)
-                                  )
-                                  .every((k) =>
-                                    formik.values.kandang_ids.includes(k.id)
-                                  ) &&
-                                optionsKandang.filter(
-                                  (k) =>
-                                    k.status === 'NON_ACTIVE' ||
-                                    formik.values.kandang_ids.includes(k.id)
-                                ).length > 0
-                              }
-                              className='checkbox transition-none'
-                              disabled={
-                                formType === 'detail' ||
-                                optionsKandang.filter(
-                                  (k) => k.status === 'NON_ACTIVE'
-                                ).length == 0
-                              }
-                              onChange={
-                                formType === 'detail'
-                                  ? () => {}
-                                  : kandangCheckAll
-                              }
-                            />
-                          </label>
-                        </th>
-                        <th>Kandang</th>
-                        <th>Status</th>
-                        <th>Penanggung Jawab</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {/* rows */}
-                      {selectedLocation != '' &&
-                        optionsKandang.map((kandang) => (
-                          <tr key={kandang.id}>
-                            <th>
-                              <label>
-                                <input
-                                  value={kandang.id}
-                                  type='checkbox'
-                                  className='checkbox transition-none'
-                                  checked={formik.values.kandang_ids.includes(
-                                    kandang.id
-                                  )}
-                                  onChange={
-                                    formType === 'detail'
-                                      ? () => {}
-                                      : kandangChangeHandler
-                                  }
-                                  disabled={
-                                    formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
-                                  }
-                                />
-                              </label>
-                            </th>
-                            <td>{kandang.name}</td>
-                            <td>{kandang.status}</td>
-                            <td>{kandang.pic?.name}</td>
-                          </tr>
-                        ))}
-                      {selectedLocation == '' && (
-                        <tr>
-                          <td colSpan={3} className='text-center text-muted'>
-                            Data tidak tersedia
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                    {/* foot */}
-                    {selectedLocation != '' && (
-                      <tfoot>
-                        <tr>
-                          <th></th>
-                          <th>Kandang</th>
-                          <th>Penanggung Jawab</th>
-                        </tr>
-                      </tfoot>
-                    )}
-                  </table>
+                  <ProjectFlockKandangTable
+                    listKandang={optionsKandang}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
+                    selectedIds={formik.values.kandang_ids}
+                    formType={formType}
+                  />
                 </div>
               </Collapse>
             </div>
@@ -795,16 +767,24 @@ const ProjectFlockForm = ({
 
       <ConfirmationModal
         ref={confirmModal.ref}
-        type='success'
-        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } Project Flock berikut? (${initialValues?.flock?.name} - ${
+          initialValues?.area?.name
+        })?`}
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'success',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
           isLoading: isApproveLoading,
-          onClick: confirmationModalApproveClickHandler,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
         }}
       />
     </>
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
new file mode 100644
index 00000000..bf930eec
--- /dev/null
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import CheckboxInput from '@/components/input/CheckboxInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { cn } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { OnChangeFn } from '@tanstack/react-table';
+
+const ProjectFlockKandangTable = ({
+  listKandang,
+  rowSelection,
+  setRowSelection,
+  selectedIds,
+  formType = 'add',
+}: {
+  listKandang: Kandang[];
+  rowSelection: Record<string, boolean>;
+  setRowSelection: OnChangeFn<Record<string, boolean>>;
+  selectedIds: (number | undefined)[];
+  formType: 'add' | 'edit' | 'detail';
+}) => {
+  console.log('selectedIds');
+  console.log(selectedIds);
+  return (
+    <Table<Kandang>
+      data={listKandang}
+      columns={[
+        {
+          id: 'select',
+          header: ({ table }) => {
+            const allRows = table.getRowModel().rows;
+            const selectableRows = allRows.filter(
+              (row) =>
+                row.original.status == 'NON_ACTIVE' ||
+                row.original.status == 'PENGAJUAN'
+            );
+
+            const allSelected =
+              selectableRows.every((row) => row.getIsSelected()) &&
+              selectableRows.length != 0 && formType != 'detail';
+
+            const someSelected =
+              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+
+            const toggleSelectableRows = () => {
+              const shouldSelect = !allSelected;
+              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+            };
+
+            return (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  onChange={toggleSelectableRows}
+                  disabled={
+                    listKandang.filter(
+                      (kandang) =>
+                        kandang.status == 'NON_ACTIVE' ||
+                        kandang.status == 'PENGAJUAN'
+                    ).length == 0 || formType == 'detail'
+                  }
+                />
+              </div>
+            );
+          },
+          cell: ({ row }) => {
+            return (
+              <CheckboxInput
+                name='row'
+                checked={
+                  (row.getIsSelected() &&
+                    (row.original.status == 'NON_ACTIVE' ||
+                      row.original.status == 'PENGAJUAN')) ||
+                  selectedIds.includes(row.original.id)
+                }
+                disabled={
+                  !row.getCanSelect() ||
+                  (row.original.status != 'NON_ACTIVE' &&
+                    row.original.status != 'PENGAJUAN') ||
+                  formType == 'detail'
+                }
+                indeterminate={row.getIsSomeSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.name,
+          header: 'Kandang',
+        },
+        {
+          accessorFn: (row) => row.status,
+          header: 'Status',
+          cell: (props) => {
+            return (
+              <PillBadge
+                color={(() => {
+                  switch (props.row.original.status) {
+                    case 'ACTIVE':
+                      return 'red';
+                    case 'PENGAJUAN':
+                      return 'green';
+                    case 'NON_ACTIVE':
+                      return 'blue';
+                    default:
+                      return 'gray';
+                  }
+                })()}
+                content={props.row.original.status
+                  .toLowerCase()
+                  .replace(/_/g, ' ')
+                  .replace(/\b\w/g, (char) => char.toUpperCase())}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.pic?.name,
+          header: 'Penanggung Jawab',
+        },
+      ]}
+      className={{
+        containerClassName: cn({
+          'mb-20': listKandang?.length === 0,
+        }),
+        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+        tableClassName: 'font-inter w-full table-auto min-h-full!',
+        headerRowClassName: 'border-b border-b-gray-200',
+        headerColumnClassName:
+          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+        bodyRowClassName: 'border-b border-b-gray-200',
+        bodyColumnClassName:
+          'px-6 py-3 last:flex last:flex-row last:justify-end',
+        paginationClassName: 'hidden',
+      }}
+      rowSelection={rowSelection}
+      setRowSelection={setRowSelection}
+    />
+  );
+};
+
+export default ProjectFlockKandangTable;
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 4abd74d3..7f3e6e85 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -47,11 +47,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
 
-  const [editingAverageIndex, setEditingAverageIndex] = useState<number | null>(null);
-  const [manuallyEditedRows, setManuallyEditedRows] = useState<Set<number>>(new Set());
+  const [editingAverageIndex, setEditingAverageIndex] = useState<number | null>(
+    null
+  );
+  const [manuallyEditedRows, setManuallyEditedRows] = useState<Set<number>>(
+    new Set()
+  );
 
   const [locationSearchValue, setLocationSearchValue] = useState('');
-  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
   const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
@@ -71,7 +77,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
     search: projectFlockSearchValue || '',
-    ...(selectedLocation ? { location_id: selectedLocation.value.toString() } : {}),
+    ...(selectedLocation
+      ? { location_id: selectedLocation.value.toString() }
+      : {}),
   }).toString()}`;
   const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR(
     projectFlocksUrl,
@@ -100,12 +108,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const flockPeriodsUrls = useMemo(() => {
     if (!isResponseSuccess(projectFlocks)) return [];
-    return projectFlocks?.data.map(pf => `${ProjectFlockApi.basePath}/flocks/${pf.flock.id}/periods`) || [];
+    return (
+      projectFlocks?.data.map(
+        (pf) => `${ProjectFlockApi.basePath}/flocks/${pf.flock.id}/periods`
+      ) || []
+    );
   }, [projectFlocks]);
 
   const { data: flockPeriodsData } = useSWR<BaseApiResponse<PeriodFlock>[]>(
     flockPeriodsUrls.length > 0 ? flockPeriodsUrls : null,
-    (urls: string[]) => Promise.all(urls.map(url => fetch(url).then(res => res.json()))),
+    (urls: string[]) =>
+      Promise.all(urls.map((url) => fetch(url).then((res) => res.json()))),
     {
       revalidateOnFocus: false,
       dedupingInterval: 60000,
@@ -118,19 +131,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const todayRecordings = existingRecordings?.data || [];
     const recordedIds = new Set<number>();
 
-    todayRecordings.forEach(recording => {
+    todayRecordings.forEach((recording) => {
       const recordingDate = recording.record_date?.split('T')[0];
 
       const isRecordedToday = recordingDate === today;
 
       let isCorrectPeriod = false;
-      if (isRecordedToday && flockPeriodsData && isResponseSuccess(projectFlocks)) {
-        const flockIndex = projectFlocks.data.findIndex(pf => pf.id === recording.project_flock_kandang_id);
-        if (flockIndex !== undefined && flockIndex >= 0 && flockPeriodsData[flockIndex]) {
+      if (
+        isRecordedToday &&
+        flockPeriodsData &&
+        isResponseSuccess(projectFlocks)
+      ) {
+        const flockIndex = projectFlocks.data.findIndex(
+          (pf) => pf.id === recording.project_flock_kandang_id
+        );
+        if (
+          flockIndex !== undefined &&
+          flockIndex >= 0 &&
+          flockPeriodsData[flockIndex]
+        ) {
           const flockPeriod = flockPeriodsData[flockIndex];
           const currentProjectFlock = projectFlocks.data[flockIndex];
 
-          if (currentProjectFlock && isResponseSuccess(flockPeriod) && flockPeriod.data?.next_period) {
+          if (
+            currentProjectFlock &&
+            isResponseSuccess(flockPeriod) &&
+            flockPeriod.data?.next_period
+          ) {
             const expectedDay = flockPeriod.data.next_period - 1;
             isCorrectPeriod = recording.day === expectedDay;
           }
@@ -153,10 +180,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== DATA PROCESSING =====
   const locationOptions = useMemo(() => {
     if (!isResponseSuccess(locations)) return [];
-    return locations?.data.map((location) => ({
-      value: location.id,
-      label: location.name,
-    })) || [];
+    return (
+      locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      })) || []
+    );
   }, [locations]);
 
   const projectFlockKandangOptions = useMemo(() => {
@@ -191,20 +220,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         if (hasPakanFlag) {
           options.push({
             value: product.id,
-            label: `${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`,
           });
         }
 
         if (hasOvkFlag) {
           options.push({
             value: product.id,
-            label: `${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`,
           });
         }
       });
     }
 
-    if (initialValues && 'stocks' in initialValues && initialValues.stocks && type !== 'add') {
+    if (
+      initialValues &&
+      'stocks' in initialValues &&
+      initialValues.stocks &&
+      type !== 'add'
+    ) {
       const initialValuesWithStocks = initialValues as Recording & {
         stocks?: Array<{
           product_warehouse_id: number;
@@ -222,11 +256,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
       initialValuesWithStocks.stocks?.forEach((stock) => {
         if (stock.product_warehouse && stock.product_warehouse.product_name) {
-          const existingOption = options.find(opt => opt.value === stock.product_warehouse_id);
+          const existingOption = options.find(
+            (opt) => opt.value === stock.product_warehouse_id
+          );
           if (!existingOption) {
             options.push({
               value: stock.product_warehouse_id,
-              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`
+              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`,
             });
           }
         }
@@ -302,15 +338,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // ===== HELPER FUNCTIONS =====
   useCallback((): OptionType | null => {
-    if (!formik.values.project_flock_kandang || !isResponseSuccess(projectFlocks)) {
+    if (
+      !formik.values.project_flock_kandang ||
+      !isResponseSuccess(projectFlocks)
+    ) {
       return selectedLocation;
     }
     const projectFlockId = formik.values.project_flock_kandang.value;
-    const projectFlock = projectFlocks.data.find(pf => pf.id === projectFlockId);
+    const projectFlock = projectFlocks.data.find(
+      (pf) => pf.id === projectFlockId
+    );
     if (projectFlock && projectFlock.location) {
       return {
         value: projectFlock.location.id,
-        label: projectFlock.location.name
+        label: projectFlock.location.name,
       };
     }
     return selectedLocation;
@@ -371,7 +412,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     (projectFlockId: number) => {
       if (!isResponseSuccess(projectFlocks)) return null;
 
-      const projectFlock = projectFlocks.data.find(pf => pf.id === projectFlockId);
+      const projectFlock = projectFlocks.data.find(
+        (pf) => pf.id === projectFlockId
+      );
       if (!projectFlock) return null;
 
       const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlockId);
@@ -385,10 +428,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
       return (
         <Badge
-          variant="soft"
+          variant='soft'
           color={color}
-          size="sm"
-          className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+          size='sm'
+          className={{
+            badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+          }}
         >
           Periode {projectFlock.period}
         </Badge>
@@ -401,7 +446,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     (productWarehouseId: number) => {
       if (!isResponseSuccess(stockProducts)) return null;
 
-      const productWarehouse = stockProducts.data.find(pw => pw.id === productWarehouseId);
+      const productWarehouse = stockProducts.data.find(
+        (pw) => pw.id === productWarehouseId
+      );
       if (!productWarehouse) return null;
 
       const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
@@ -410,10 +457,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       if (hasPakanFlag) {
         return (
           <Badge
-            variant="soft"
-            color="info"
-            size="sm"
-            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+            variant='soft'
+            color='info'
+            size='sm'
+            className={{
+              badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+            }}
           >
             PAKAN
           </Badge>
@@ -423,10 +472,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       if (hasOvkFlag) {
         return (
           <Badge
-            variant="soft"
-            color="secondary"
-            size="sm"
-            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+            variant='soft'
+            color='secondary'
+            size='sm'
+            className={{
+              badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+            }}
           >
             OVK
           </Badge>
@@ -492,8 +543,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('project_flock_kandang_id', 0);
   };
 
-  const projectFlockKandangChangeHandler = (val: OptionType | OptionType[] | null) => {
-    if (type === 'add' && val && recordedProjectFlockIds.has((val as OptionType).value as number)) {
+  const projectFlockKandangChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    if (
+      type === 'add' &&
+      val &&
+      recordedProjectFlockIds.has((val as OptionType).value as number)
+    ) {
       toast.error('Project Flock ini sudah direcord hari ini!');
       return;
     }
@@ -501,7 +558,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldTouched('project_flock_kandang', true);
     formik.setFieldValue('project_flock_kandang', val);
     formik.setFieldTouched('project_flock_kandang_id', true);
-    formik.setFieldValue('project_flock_kandang_id', (val as OptionType)?.value || 0);
+    formik.setFieldValue(
+      'project_flock_kandang_id',
+      (val as OptionType)?.value || 0
+    );
   };
 
   const approveHandler = async () => {
@@ -525,7 +585,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         window.location.href = '/production/recording';
       }
     } else {
-      toast.error(approveResponse?.message as string || 'Gagal menyetujui recording');
+      toast.error(
+        (approveResponse?.message as string) || 'Gagal menyetujui recording'
+      );
       approveModal.closeModal();
     }
 
@@ -553,7 +615,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         window.location.href = '/production/recording';
       }
     } else {
-      toast.error(rejectResponse?.message as string || 'Gagal menolak recording');
+      toast.error(
+        (rejectResponse?.message as string) || 'Gagal menolak recording'
+      );
       rejectModal.closeModal();
     }
 
@@ -576,7 +640,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const handleWeightChange = (idx: number, value: number) => {
     formik.setFieldValue(`body_weights.${idx}.weight`, value);
 
-    setManuallyEditedRows(prev => {
+    setManuallyEditedRows((prev) => {
       const newSet = new Set(prev);
       newSet.delete(idx);
       return newSet;
@@ -587,7 +651,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       const qty = currentWeight.qty;
       if (qty > 0 && value > 0) {
         const averageWeight = parseFloat((value / qty).toFixed(2));
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+        formik.setFieldValue(
+          `body_weights.${idx}.average_weight`,
+          averageWeight
+        );
       } else {
         formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
       }
@@ -597,7 +664,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const handleQtyChange = (idx: number, value: number) => {
     formik.setFieldValue(`body_weights.${idx}.qty`, value);
 
-    setManuallyEditedRows(prev => {
+    setManuallyEditedRows((prev) => {
       const newSet = new Set(prev);
       newSet.delete(idx);
       return newSet;
@@ -608,7 +675,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       const weight = currentWeight.weight;
       if (value > 0 && weight > 0) {
         const averageWeight = parseFloat((weight / value).toFixed(2));
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+        formik.setFieldValue(
+          `body_weights.${idx}.average_weight`,
+          averageWeight
+        );
       } else {
         formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
       }
@@ -630,23 +700,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   };
 
-  const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseFloat(e.target.value) || 0;
-    handleWeightChange(idx, value);
-  };
+  const handleWeightChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleWeightChange(idx, value);
+    };
 
-  const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseFloat(e.target.value) || 0;
-    handleQtyChange(idx, value);
-  };
+  const handleQtyChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleQtyChange(idx, value);
+    };
 
-  const handleAverageWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEditingAverageIndex(idx);
-    setManuallyEditedRows(prev => new Set(prev).add(idx));
+  const handleAverageWeightChangeWrapper =
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setEditingAverageIndex(idx);
+      setManuallyEditedRows((prev) => new Set(prev).add(idx));
 
-    const value = parseFloat(e.target.value) || 0;
-    handleAverageWeightChange(idx, value);
-  };
+      const value = parseFloat(e.target.value) || 0;
+      handleAverageWeightChange(idx, value);
+    };
 
   const handleAverageWeightBlur = (idx: number) => {
     setEditingAverageIndex(null);
@@ -739,24 +812,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== EFFECTS =====
   useEffect(() => {
     if (formik.values.body_weights && editingAverageIndex === null) {
-      const updatedBodyWeights = formik.values.body_weights.map((weight, idx) => {
-        if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
-          return weight;
+      const updatedBodyWeights = formik.values.body_weights.map(
+        (weight, idx) => {
+          if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
+            return weight;
+          }
+          return {
+            ...weight,
+            average_weight:
+              weight.qty > 0 && weight.weight > 0
+                ? parseFloat((weight.weight / weight.qty).toFixed(2))
+                : 0,
+          };
         }
-        return {
-          ...weight,
-          average_weight:
-            weight.qty > 0 && weight.weight > 0
-              ? parseFloat((weight.weight / weight.qty).toFixed(2))
-              : 0,
-        };
-      });
+      );
       const hasChanges = updatedBodyWeights.some(
         (updated, idx) =>
           idx !== editingAverageIndex &&
           !manuallyEditedRows.has(idx) &&
           updated.average_weight !==
-          (formik.values.body_weights[idx]?.average_weight || 0)
+            (formik.values.body_weights[idx]?.average_weight || 0)
       );
       if (hasChanges) {
         formik.setFieldValue('body_weights', updatedBodyWeights, false);
@@ -789,7 +864,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               body: 'flex flex-col gap-6',
             }}
           >
-            <div className={type === 'detail' ? 'flex flex-col gap-6' : 'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+            <div
+              className={
+                type === 'detail'
+                  ? 'flex flex-col gap-6'
+                  : 'grid grid-cols-1 md:grid-cols-2 gap-6'
+              }
+            >
               {type === 'detail' ? null : (
                 <SelectInput
                   required
@@ -818,7 +899,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     formik.touched.project_flock_kandang_id &&
                     Boolean(formik.errors.project_flock_kandang_id)
                   }
-                  errorMessage={formik.errors.project_flock_kandang_id as string}
+                  errorMessage={
+                    formik.errors.project_flock_kandang_id as string
+                  }
                   isDisabled={type === 'detail' || !selectedLocation}
                   placeholder={
                     selectedLocation
@@ -829,7 +912,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   isSearchable
                   startAdornment={
                     formik.values.project_flock_kandang_id
-                      ? getProjectFlockBadgeAdornment(formik.values.project_flock_kandang_id)
+                      ? getProjectFlockBadgeAdornment(
+                          formik.values.project_flock_kandang_id
+                        )
                       : undefined
                   }
                 />
@@ -848,82 +933,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <CheckboxInput
-                        name='select-all-body-weights'
-                        checked={
-                          formik.values.body_weights?.length ===
-                          selectedBodyWeights.length &&
-                          formik.values.body_weights?.length > 0
-                        }
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          if (e.target.checked) {
-                            setSelectedBodyWeights(
-                              formik.values.body_weights?.map(
-                                (_, idx) => idx
-                              ) ?? []
-                            );
-                          } else {
-                            setSelectedBodyWeights([]);
-                          }
-                        }}
-                        classNames={{
-                          wrapper: 'flex justify-center',
-                          checkbox: 'checkbox checkbox-sm',
-                        }}
-                      />
-                    </th>
-                  )}
-                  <th>
-                    Berat Ayam (gram)
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Jumlah Ayam
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Rata-rata Berat Ayam (gram)
-                    <span
-                      className='tooltip tooltip-info tooltip-bottom z-[9999]'
-                      data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
-                    >
-                        <Icon icon="material-symbols:info-outline" width={16} height={16} />
-                    </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.body_weights?.map((bw, idx) => (
-                  <tr key={`body-weight-${idx}`}>
+                  <tr>
                     {type !== 'detail' && (
-                      <td className="!align-middle">
+                      <th>
                         <CheckboxInput
-                          name={`body-weight-${idx}`}
-                          checked={selectedBodyWeights.includes(idx)}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          name='select-all-body-weights'
+                          checked={
+                            formik.values.body_weights?.length ===
+                              selectedBodyWeights.length &&
+                            formik.values.body_weights?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
                             if (e.target.checked) {
-                              setSelectedBodyWeights([
-                                ...selectedBodyWeights,
-                                idx,
-                              ]);
-                            } else {
                               setSelectedBodyWeights(
-                                selectedBodyWeights.filter((i) => i !== idx),
+                                formik.values.body_weights?.map(
+                                  (_, idx) => idx
+                                ) ?? []
                               );
+                            } else {
+                              setSelectedBodyWeights([]);
                             }
                           }}
                           classNames={{
@@ -931,102 +961,175 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
-                    )}
-                    <td>
-                      <NumberInput
-                        required
-                        name={`body_weights.${idx}.weight`}
-                        value={bw.weight}
-                        onChange={handleWeightChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        decimalScale={2}
-                        allowNegative={false}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputSuffix="gram"
-                        isError={
-                          isRepeaterInputError('body_weights', 'weight', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('body_weights', 'weight', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`body_weights.${idx}.qty`}
-                        value={bw.qty}
-                        onChange={handleQtyChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        decimalScale={0}
-                        allowNegative={false}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError('body_weights', 'qty', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('body_weights', 'qty', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        name={`body_weights.${idx}.average_weight`}
-                        value={bw.average_weight || 0}
-                        onChange={handleAverageWeightChangeWrapper(idx)}
-                        onBlur={(e) => {
-                          handleAverageWeightBlur(idx);
-                          formik.handleBlur(e);
-                        }}
-                        decimalScale={2}
-                        allowNegative={false}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputSuffix="gram"
-                        isError={
-                          isRepeaterInputError('body_weights', 'average_weight', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('body_weights', 'average_weight', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex justify-center'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeBodyWeight(idx)}
-                          >
-                            <Icon icon='mdi:trash-can' width={24} height={24} />
-                          </Button>
-                        </div>
-                      </td>
+                      </th>
                     )}
+                    <th>
+                      Berat Ayam (gram)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Rata-rata Berat Ayam (gram)
+                      <span
+                        className='tooltip tooltip-info tooltip-bottom z-[9999]'
+                        data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
+                      >
+                        <Icon
+                          icon='material-symbols:info-outline'
+                          width={16}
+                          height={16}
+                        />
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
                   </tr>
-                ))}
+                </thead>
+                <tbody>
+                  {formik.values.body_weights?.map((bw, idx) => (
+                    <tr key={`body-weight-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`body-weight-${idx}`}
+                            checked={selectedBodyWeights.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedBodyWeights([
+                                  ...selectedBodyWeights,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedBodyWeights(
+                                  selectedBodyWeights.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weights.${idx}.weight`}
+                          value={bw.weight}
+                          onChange={handleWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={2}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputSuffix='gram'
+                          isError={
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weights.${idx}.qty`}
+                          value={bw.qty}
+                          onChange={handleQtyChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          name={`body_weights.${idx}.average_weight`}
+                          value={bw.average_weight || 0}
+                          onChange={handleAverageWeightChangeWrapper(idx)}
+                          onBlur={(e) => {
+                            handleAverageWeightBlur(idx);
+                            formik.handleBlur(e);
+                          }}
+                          decimalScale={2}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputSuffix='gram'
+                          isError={
+                            isRepeaterInputError(
+                              'body_weights',
+                              'average_weight',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weights',
+                              'average_weight',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeBodyWeight(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1068,68 +1171,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <CheckboxInput
-                        name='select-all-stocks'
-                        checked={
-                          formik.values.stocks?.length ===
-                          selectedStocks.length &&
-                          formik.values.stocks?.length > 0
-                        }
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          if (e.target.checked) {
-                            setSelectedStocks(
-                              formik.values.stocks?.map((_, idx) => idx) ??
-                              []
-                            );
-                          } else {
-                            setSelectedStocks([]);
-                          }
-                        }}
-                        classNames={{
-                          wrapper: 'flex justify-center',
-                          checkbox: 'checkbox checkbox-sm',
-                        }}
-                      />
-                    </th>
-                  )}
-                  <th>
-                    Persediaan
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
-                  <th>Jumlah Pakai
-                    <span
-                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
-                      data-tip="required"
-                    >
-                        <span className="text-error">*</span>
-                      </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.stocks?.map((stock, idx) => (
-                  <tr key={`stock-${idx}`}>
+                  <tr>
                     {type !== 'detail' && (
-                      <td className="!align-middle">
+                      <th>
                         <CheckboxInput
-                          name={`stock-${idx}`}
-                          checked={selectedStocks.includes(idx)}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          name='select-all-stocks'
+                          checked={
+                            formik.values.stocks?.length ===
+                              selectedStocks.length &&
+                            formik.values.stocks?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
                             if (e.target.checked) {
-                              setSelectedStocks([...selectedStocks, idx]);
-                            } else {
                               setSelectedStocks(
-                                selectedStocks.filter((i) => i !== idx),
+                                formik.values.stocks?.map((_, idx) => idx) ?? []
                               );
+                            } else {
+                              setSelectedStocks([]);
                             }
                           }}
                           classNames={{
@@ -1137,112 +1197,174 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
+                      </th>
                     )}
-                    <td>
-                      <SelectInput
-                        required
-                        value={
-                          unifiedStockProducts.find(
-                            (product) =>
-                              product.value === stock.product_warehouse_id
-                          ) || null
-                        }
-                        onChange={(selectedOption) => {
-                          const option = selectedOption as OptionType | null;
-                          formik.setFieldValue(
-                            `stocks.${idx}.product_warehouse_id`,
-                            option?.value || 0
-                          );
-
-                          if (option?.value && isResponseSuccess(stockProducts)) {
-                            const selectedProduct = stockProducts.data.find(
-                              (product) => product.id === option.value
-                            );
-                            if (selectedProduct) {
-                              formik.setFieldValue(
-                                `stocks.${idx}.notes`,
-                                selectedProduct.product.name
-                              );
-                            }
-                          }
-                        }}
-                        options={unifiedStockProducts}
-                        placeholder='Pilih Produk'
-                        isLoading={isLoadingStockProducts}
-                        isError={
-                          isRepeaterInputError(
-                            'stocks',
-                            'product_warehouse_id',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'stocks',
-                            'product_warehouse_id',
-                            idx
-                          ).errorMessage
-                        }
-                        className={{
-                          wrapper: 'w-full min-w-48',
-                        }}
-                        isSearchable
-                        isDisabled={type === 'detail'}
-                        isClearable={type !== 'detail'}
-                        startAdornment={
-                          stock.product_warehouse_id
-                            ? getProductFlagBadgeAdornment(stock.product_warehouse_id)
-                            : undefined
-                        }
-                      />
-                    </td>
-                    <td>
-                      <div className="flex flex-col gap-1">
-                        <NumberInput
+                    <th>
+                      Persediaan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Pakai
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.stocks?.map((stock, idx) => (
+                    <tr key={`stock-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`stock-${idx}`}
+                            checked={selectedStocks.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedStocks([...selectedStocks, idx]);
+                              } else {
+                                setSelectedStocks(
+                                  selectedStocks.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
                           required
-                          name={`stocks.${idx}.usage_amount`}
-                          value={stock.usage_amount}
-                          onChange={handleStockUsageAmountChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          decimalScale={0}
-                          allowNegative={false}
-                          thousandSeparator=','
-                          decimalSeparator='.'
+                          value={
+                            unifiedStockProducts.find(
+                              (product) =>
+                                product.value === stock.product_warehouse_id
+                            ) || null
+                          }
+                          onChange={(selectedOption) => {
+                            const option = selectedOption as OptionType | null;
+                            formik.setFieldValue(
+                              `stocks.${idx}.product_warehouse_id`,
+                              option?.value || 0
+                            );
+
+                            if (
+                              option?.value &&
+                              isResponseSuccess(stockProducts)
+                            ) {
+                              const selectedProduct = stockProducts.data.find(
+                                (product) => product.id === option.value
+                              );
+                              if (selectedProduct) {
+                                formik.setFieldValue(
+                                  `stocks.${idx}.notes`,
+                                  selectedProduct.product.name
+                                );
+                              }
+                            }
+                          }}
+                          options={unifiedStockProducts}
+                          placeholder='Pilih Produk'
+                          isLoading={isLoadingStockProducts}
                           isError={
-                            isRepeaterInputError('stocks', 'usage_amount', idx)
-                              .isError || Boolean(getStockUsageError(idx))
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).isError
                           }
                           errorMessage={
-                            isRepeaterInputError('stocks', 'usage_amount', idx)
-                              .errorMessage ||
-                            getStockUsageError(idx) ||
-                            undefined
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).errorMessage
                           }
-                          readOnly={type === 'detail'}
                           className={{
-                            wrapper: 'w-full min-w-24',
+                            wrapper: 'w-full min-w-48',
                           }}
-                          placeholder="Jumlah Pakai"
+                          isSearchable
+                          isDisabled={type === 'detail'}
+                          isClearable={type !== 'detail'}
+                          startAdornment={
+                            stock.product_warehouse_id
+                              ? getProductFlagBadgeAdornment(
+                                  stock.product_warehouse_id
+                                )
+                              : undefined
+                          }
                         />
-                        {type !== 'detail' && getStockUsageAdornment(idx)}
-                      </div>
-                    </td>
-                    {type !== 'detail' && (
+                      </td>
                       <td>
-                        <div className='flex justify-center'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeStock(idx)}
-                          >
-                            <Icon icon='mdi:trash-can' width={24} height={24} />
-                          </Button>
+                        <div className='flex flex-col gap-1'>
+                          <NumberInput
+                            required
+                            name={`stocks.${idx}.usage_amount`}
+                            value={stock.usage_amount}
+                            onChange={handleStockUsageAmountChangeWrapper(idx)}
+                            onBlur={formik.handleBlur}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            isError={
+                              isRepeaterInputError(
+                                'stocks',
+                                'usage_amount',
+                                idx
+                              ).isError || Boolean(getStockUsageError(idx))
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'stocks',
+                                'usage_amount',
+                                idx
+                              ).errorMessage ||
+                              getStockUsageError(idx) ||
+                              undefined
+                            }
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                            placeholder='Jumlah Pakai'
+                          />
+                          {type !== 'detail' && getStockUsageAdornment(idx)}
                         </div>
                       </td>
-                    )}
-                  </tr>
-                ))}
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeStock(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1284,73 +1406,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                <tr>
-                  {type !== 'detail' && (
-                    <th>
-                      <CheckboxInput
-                        name='select-all-depletions'
-                        checked={
-                          formik.values.depletions?.length ===
-                          selectedDepletions.length &&
-                          formik.values.depletions?.length > 0
-                        }
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          if (e.target.checked) {
-                            setSelectedDepletions(
-                              formik.values.depletions?.map(
-                                (_, idx) => idx
-                              ) ?? []
-                            );
-                          } else {
-                            setSelectedDepletions([]);
-                          }
-                        }}
-                        classNames={{
-                          wrapper: 'flex justify-center',
-                          checkbox: 'checkbox checkbox-sm',
-                        }}
-                      />
-                    </th>
-                  )}
-                  <th>
-                    Kondisi
-                    <span
-                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
-                      data-tip="required"
-                    >
-                        <span className="text-error">*</span>
-                      </span>
-                  </th>
-                  <th>
-                    Total
-                    <span
-                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
-                      data-tip="required"
-                    >
-                        <span className='text-error'>*</span>
-                    </span>
-                  </th>
-                  {type !== 'detail' && <th>Action</th>}
-                </tr>
-                </thead>
-                <tbody>
-                {formik.values.depletions?.map((depletion, idx) => (
-                  <tr key={`depletion-${idx}`}>
+                  <tr>
                     {type !== 'detail' && (
-                      <td className="!align-middle">
+                      <th>
                         <CheckboxInput
-                          name={`depletion-${idx}`}
-                          checked={selectedDepletions.includes(idx)}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          name='select-all-depletions'
+                          checked={
+                            formik.values.depletions?.length ===
+                              selectedDepletions.length &&
+                            formik.values.depletions?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
                             if (e.target.checked) {
-                              setSelectedDepletions([
-                                ...selectedDepletions,
-                                idx,
-                              ]);
-                            } else {
                               setSelectedDepletions(
-                                selectedDepletions.filter((i) => i !== idx),
+                                formik.values.depletions?.map(
+                                  (_, idx) => idx
+                                ) ?? []
                               );
+                            } else {
+                              setSelectedDepletions([]);
                             }
                           }}
                           classNames={{
@@ -1358,79 +1434,135 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </td>
-                    )}
-                    <td>
-                      <SelectInput
-                        value={RECORDING_FLAG_OPTIONS.find(
-                          (option) => option.value === depletion.notes
-                        ) || null}
-                        onChange={(selectedOption) => {
-                          const option = selectedOption as OptionType | null;
-                          formik.setFieldValue(
-                            `depletions.${idx}.notes`,
-                            option?.value || ''
-                          );
-                        }}
-                        options={RECORDING_FLAG_OPTIONS}
-                        placeholder='Pilih Kondisi'
-                        isError={
-                          isRepeaterInputError('depletions', 'notes', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('depletions', 'notes', idx)
-                            .errorMessage
-                        }
-                        isDisabled={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                        isSearchable={false}
-                        isClearable={type !== 'detail'}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`depletions.${idx}.total`}
-                        value={depletion.total}
-                        onChange={handleDepletionTotalChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        decimalScale={0}
-                        allowNegative={false}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError('depletions', 'total', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('depletions', 'total', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                        placeholder='Total'
-                      />
-                    </td>
-                    {type !== 'detail' && (
-                      <td>
-                        <div className='flex justify-center'>
-                          <Button
-                            type='button'
-                            color='error'
-                            onClick={() => removeDepletion(idx)}
-                          >
-                            <Icon icon='mdi:trash-can' width={24} height={24} />
-                          </Button>
-                        </div>
-                      </td>
+                      </th>
                     )}
+                    <th>
+                      Kondisi
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Total
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
                   </tr>
-                ))}
+                </thead>
+                <tbody>
+                  {formik.values.depletions?.map((depletion, idx) => (
+                    <tr key={`depletion-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`depletion-${idx}`}
+                            checked={selectedDepletions.includes(idx)}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              if (e.target.checked) {
+                                setSelectedDepletions([
+                                  ...selectedDepletions,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedDepletions(
+                                  selectedDepletions.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          value={
+                            RECORDING_FLAG_OPTIONS.find(
+                              (option) => option.value === depletion.notes
+                            ) || null
+                          }
+                          onChange={(selectedOption) => {
+                            const option = selectedOption as OptionType | null;
+                            formik.setFieldValue(
+                              `depletions.${idx}.notes`,
+                              option?.value || ''
+                            );
+                          }}
+                          options={RECORDING_FLAG_OPTIONS}
+                          placeholder='Pilih Kondisi'
+                          isError={
+                            isRepeaterInputError('depletions', 'notes', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('depletions', 'notes', idx)
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                          isSearchable={false}
+                          isClearable={type !== 'detail'}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`depletions.${idx}.total`}
+                          value={depletion.total}
+                          onChange={handleDepletionTotalChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isRepeaterInputError('depletions', 'total', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('depletions', 'total', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder='Total'
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDepletion(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1549,4 +1681,4 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   );
 };
 
-export default RecordingForm;
\ No newline at end of file
+export default RecordingForm;
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
new file mode 100644
index 00000000..52d21016
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -0,0 +1,633 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Flock } from '@/types/api/master-data/flock';
+import { FlockApi } from '@/services/api/master-data';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<TransferToLaying, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='success'
+        onClick={approveClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:check' width={24} height={24} />
+        Approve
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='error'
+        onClick={rejectClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:close' width={24} height={24} />
+        Reject
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal Transfer',
+      cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'flock_source',
+      header: 'Flock Asal',
+      cell: (props) => props.row.original.flock_source.name,
+    },
+    {
+      accessorKey: 'flock_destination',
+      header: 'Flock Tujuan',
+      cell: (props) => props.row.original.flock_destination.name,
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+    },
+    {
+      accessorKey: 'reason',
+      header: 'Alasan Transfer',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const approveClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+    refreshTransferToLayings();
+
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus data transfer ke laying!');
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshTransferToLayings();
+      approveModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Approved data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshTransferToLayings();
+      rejectModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Rejected data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transferDate', e.target.value);
+  };
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedFlockSource(val as OptionType);
+    updateFilter(
+      'flockSource',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedFlockDestination(val as OptionType);
+    updateFilter(
+      'flockDestination',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  // track sorting
+  //   useEffect(() => {
+  //     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+  //     if (!isNameSorted) {
+  //       updateFilter('nameSort', '');
+  //     } else {
+  //       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+  //     }
+  //   }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/production/transfer-to-laying/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Transfer ke Laying
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{ wrapper: 'col-span-12 sm:col-span-3' }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(transferToLayings) &&
+                transferToLayings?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={rejectModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default TransferToLayingsTable;
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
new file mode 100644
index 00000000..e0273a9a
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
@@ -0,0 +1,83 @@
+import * as Yup from 'yup';
+
+type TransferToLayingFormSchemaType = {
+  transfer_date?: string;
+  flockSource?: {
+    value: number;
+    label: string;
+  };
+  flockDestination?: {
+    value: number;
+    label: string;
+  };
+
+  totalQuantity?: number;
+  maxTotalQuantity?: number; // original cap (hidden), helper
+
+  kandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+  reason?: string;
+};
+
+export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
+  Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+
+    flockSource: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock asal wajib diisi!'),
+
+    flockDestination: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock tujuan wajib diisi!'),
+
+    totalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .max(
+        Yup.ref('maxTotalQuantity'),
+        ({ max }) => `Kuantitas maksimal ${max}!`
+      )
+      .required('Jumlah transfer wajib diisi!'),
+
+    maxTotalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .required('Jumlah transfer wajib diisi!'),
+
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  });
+
+export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
+
+export type TransferToLayingFormValues = Yup.InferType<
+  typeof TransferToLayingFormSchema
+>;
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
new file mode 100644
index 00000000..def2cde8
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -0,0 +1,688 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import SelectInput, {
+  OptionType,
+  // useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  TransferToLayingFormSchema,
+  TransferToLayingFormValues,
+  UpdateTransferToLayingFormSchema,
+} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { cn } from '@/lib/helper';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+
+interface TransferToLayingFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: TransferToLaying;
+}
+
+const TransferToLayingForm = ({
+  type = 'add',
+  initialValues,
+}: TransferToLayingFormProps) => {
+  const router = useRouter();
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const createTransferToLayingHandler = useCallback(
+    async (payload: CreateTransferToLayingPayload) => {
+      console.log('Create transfer to laying:', { payload });
+
+      toast.success('Berhasil menambahkan data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const updateTransferToLayingHandler = useCallback(
+    async (
+      transferToLayingId: number,
+      payload: UpdateTransferToLayingPayload
+    ) => {
+      console.log(
+        `Update transfer to laying with ID of ${transferToLayingId}:`,
+        { payload }
+      );
+
+      toast.success('Berhasil mengubah data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+    return {
+      transfer_date: initialValues?.transfer_date ?? '',
+      flockSource: initialValues?.flock_source
+        ? {
+            value: initialValues?.flock_source.id,
+            label: initialValues?.flock_source.name,
+          }
+        : undefined,
+      flockDestination: initialValues?.flock_destination
+        ? {
+            value: initialValues?.flock_destination.id,
+            label: initialValues?.flock_destination.name,
+          }
+        : undefined,
+      totalQuantity: initialValues?.quantity ?? undefined,
+
+      kandangs: initialValues?.kandangs
+        ? initialValues.kandangs.map((kandang) => ({
+            kandang: {
+              value: kandang.kandang.id,
+              label: kandang.kandang.name,
+            },
+            quantity: kandang.quantity,
+          }))
+        : [],
+
+      reason: initialValues?.reason ?? undefined,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<TransferToLayingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdateTransferToLayingFormSchema
+        : TransferToLayingFormSchema,
+    onSubmit: async (values) => {
+      console.log({ values });
+
+      setFormErrorMessage('');
+
+      const transferToLayingPayload: CreateTransferToLayingPayload = {
+        transfer_date: values.transfer_date as string,
+        flock_source_id: values.flockSource?.value as number,
+        flock_destination_id: values.flockDestination?.value as number,
+        totalQuantity: values.totalQuantity as number,
+
+        kandangs: values.kandangs?.map((kandang) => ({
+          kandang_id: kandang.kandang.value,
+          quantity: kandang.quantity,
+        })) as {
+          kandang_id: number;
+          quantity: number;
+        }[],
+
+        reason: values.reason as string,
+      };
+
+      switch (type) {
+        case 'add':
+          await createTransferToLayingHandler(transferToLayingPayload);
+          break;
+
+        case 'edit':
+          await updateTransferToLayingHandler(
+            initialValues?.id as number,
+            transferToLayingPayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues, values: formikValues } = formik;
+  const { kandangs: kandangsValue } = formikValues;
+
+  const deleteTransferToLayingClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    // TODO: delete data and integrate to real API
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus data transfer ke laying!');
+
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await TransferToLayingApi.approve(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success('Berhasil approve data transfer ke laying!');
+    } else {
+      approveModal.closeModal();
+
+      toast.error('Gagal approve data transfer ke laying!');
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await TransferToLayingApi.reject(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success('Berhasil reject data transfer ke laying!');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error('Gagal reject data transfer ke laying!');
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const isRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.kandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.kandangs?.[idx] instanceof Object &&
+          formik.errors.kandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const repeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Source
+  // const {
+  //   inputValue: flockSourceInputValue,
+  //   setInputValue: setFlockSourceInputValue,
+  //   options: flockSourceOptions,
+  //   isLoadingOptions: isLoadingFlockSourceOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
+    'test',
+    () => TransferToLayingApi.getFlockSource()
+  );
+
+  const flockSourceOptions = isResponseSuccess(flockSources)
+    ? flockSources?.data.map((flockSource) => ({
+        value: flockSource.id,
+        label: flockSource.name,
+      }))
+    : [];
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    // Get flock source data for total quantity and kandang
+    const flockSource =
+      isResponseSuccess(flockSources) && val !== null
+        ? flockSources.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockSource) {
+      const formattedKandangs = flockSource.kandangs.map((item) => ({
+        kandang: {
+          value: item.kandang.id,
+          label: item.kandang.name,
+        },
+        quantity: '',
+        maxQuantity: item.quantity,
+      }));
+
+      formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('kandangs', formattedKandangs);
+    } else {
+      formik.setFieldValue('totalQuantity', undefined);
+      formik.setFieldValue('kandangs', undefined);
+      formik.setFieldValue('reason', '');
+    }
+
+    formik.setFieldTouched('flockSource', true);
+    formik.setFieldValue('flockSource', val);
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Destination
+  // const {
+  //   inputValue: flockDestinationInputValue,
+  //   setInputValue: setFlockDestinationInputValue,
+  //   options: flockDestinationOptions,
+  //   isLoadingOptions: isLoadingFlockDestinationOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const {
+    data: flockDestinations,
+    isLoading: isLoadingFlockDestinationOptions,
+  } = useSWR('test', () => TransferToLayingApi.getFlockSource());
+
+  const flockDestinationOptions = isResponseSuccess(flockDestinations)
+    ? flockDestinations?.data.map((flockDestination) => ({
+        value: flockDestination.id,
+        label: flockDestination.name,
+      }))
+    : [];
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('flockDestination', true);
+    formik.setFieldValue('flockDestination', val);
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (kandangsValue && kandangsValue.length > 0) {
+      let newTotalQuantity = 0;
+
+      kandangsValue.forEach((item) => {
+        newTotalQuantity += item.quantity as number;
+      });
+
+      formik.setFieldValue('totalQuantity', newTotalQuantity);
+      formik.validateField('totalQuantity');
+    }
+  }, [formikSetValues, kandangsValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-3xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/transfer-to-laying'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Transfer ke Laying'}
+            {type === 'edit' && 'Edit Transfer ke Laying'}
+            {type === 'detail' && 'Detail Transfer ke Laying'}
+          </h1>
+        </header>
+
+        <div className='w-full my-4 flex flex-row justify-end gap-2'>
+          {type === 'detail' && (
+            <>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+        </div>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={formik.values.transfer_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transfer_date &&
+                Boolean(formik.errors.transfer_date)
+              }
+              errorMessage={formik.errors.transfer_date}
+              readOnly={type === 'detail'}
+            />
+
+            <div className='flex flex-col sm:flex-row gap-4'>
+              <SelectInput
+                required
+                label='Flock Asal'
+                placeholder='Flock asal'
+                value={formik.values.flockSource as OptionType}
+                options={flockSourceOptions}
+                onChange={flockSourceChangeHandler}
+                isLoading={isLoadingFlockSourceOptions}
+                // onInputChange={setFlockSourceInputValue}
+                isError={
+                  formik.touched.flockSource &&
+                  Boolean(typeof formik.errors.flockSource === 'string')
+                }
+                errorMessage={formik.errors.flockSource as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <SelectInput
+                required
+                label='Flock Tujuan'
+                placeholder='Flock tujuan'
+                value={formik.values.flockDestination as OptionType}
+                options={flockDestinationOptions}
+                onChange={flockDestinationChangeHandler}
+                isLoading={isLoadingFlockDestinationOptions}
+                // onInputChange={setFlockDestinationInputValue}
+                isError={
+                  formik.touched.flockDestination &&
+                  Boolean(typeof formik.errors.flockDestination === 'string')
+                }
+                errorMessage={formik.errors.flockDestination as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+
+            <TextInput
+              required
+              type='number'
+              name='totalQuantity'
+              label='Jumlah Transfer'
+              bottomLabel={
+                formikValues.maxTotalQuantity
+                  ? `Max: ${formikValues.maxTotalQuantity}`
+                  : undefined
+              }
+              placeholder='Masukkan jumlah transfer'
+              value={formik.values.totalQuantity ?? ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.totalQuantity &&
+                Boolean(formik.errors.totalQuantity)
+              }
+              errorMessage={formik.errors.totalQuantity}
+              // readOnly={type === 'detail'}
+              // disabled={Boolean(formik.errors.flockSource)}
+              disabled
+            />
+
+            <div>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.kandangs ||
+                      formik.values.kandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock asal terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.kandangs &&
+                      formik.values.kandangs.map((kandang, idx) => (
+                        <tr key={idx}>
+                          <td>
+                            <SelectInput
+                              value={kandang.kandang}
+                              options={[]}
+                              isDisabled
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
+                            />
+                          </td>
+
+                          <td>
+                            <TextInput
+                              required
+                              type='number'
+                              name={`kandangs[${idx}].quantity`}
+                              bottomLabel={
+                                kandang.maxQuantity
+                                  ? `Max: ${kandang.maxQuantity}`
+                                  : undefined
+                              }
+                              placeholder='Masukkan kuantitas'
+                              value={kandang.quantity}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={isRepeaterInputError('quantity', idx)}
+                              errorMessage={repeaterInputErrorMessage(
+                                'quantity',
+                                idx
+                              )}
+                              readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <TextArea
+              required
+              rows={5}
+              name='reason'
+              label='Alasan Transfer'
+              placeholder='Alasan transfer'
+              value={formik.values.reason}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.reason && Boolean(formik.errors.reason)}
+              errorMessage={formik.errors.reason}
+              readOnly={type === 'detail'}
+              disabled={Boolean(formik.errors.flockSource)}
+            />
+          </div>
+
+          <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={deleteTransferToLayingClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              isLoading: isApproveLoading,
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModal
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isRejectLoading,
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default TransferToLayingForm;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 8e706f73..b5a12fb4 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -13,7 +13,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Production',
+    title: 'Produksi',
     link: '/production',
     icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
@@ -32,6 +32,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/recording',
         icon: 'mdi:clipboard-text',
       },
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
     ],
   },
 
@@ -40,11 +45,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     link: '/inventory',
     icon: 'mdi:warehouse',
     submenu: [
-      {
-        title: 'Product',
-        link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
-      },
+      // {
+      //   title: 'Product',
+      //   link: '/inventory/product',
+      //   icon: 'mdi:package-variant-closed',
+      // },
       {
         title: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index d85b7b16..e3bfda65 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -1,7 +1,11 @@
 import moment from 'moment';
+import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
 
+// set locale globally
+moment.locale('id');
+
 export const sleep = (ms: number = 1000) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -13,6 +17,19 @@ export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs));
 };
 
+export const formatNumber = (
+  value: number | bigint | Intl.StringNumericLiteral,
+  locale = 'en-US',
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+) => {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+  }).format(value);
+};
+
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'USD',
@@ -27,3 +44,37 @@ export const formatCurrency = (
     maximumFractionDigits,
   }).format(value);
 };
+
+/**
+ * Retrieves a nested value from an object using a dot-delimited key path.
+ * Supports array indexes (e.g., "users.0.name") and returns a default value
+ * if the path does not exist.
+ *
+ * @param obj - The source object to search.
+ * @param path - Dot-delimited key string (e.g., "user.address.city").
+ * @param defaultValue - Optional value to return if the key path is not found.
+ * @returns The value found at the specified path, or the default value.
+ */
+export function getByPath<T, D = undefined>(
+  obj: T,
+  path: string,
+  defaultValue?: D
+): D {
+  if (obj == null) return defaultValue as D;
+  if (!path) return obj as D;
+
+  const segments = path.split('.').filter(Boolean);
+  let cur: { [key: string]: unknown } = obj;
+
+  for (const seg of segments) {
+    if (cur == null) return defaultValue as D;
+    const key: string | number =
+      Array.isArray(cur) && /^\d+$/.test(seg) ? Number(seg) : seg;
+    if (Object(cur) !== cur || !(key in cur)) {
+      return defaultValue as D;
+    }
+    cur = cur[key] as { [key: string]: unknown };
+  }
+
+  return cur as D;
+}
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
new file mode 100644
index 00000000..6f808a8c
--- /dev/null
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -0,0 +1,876 @@
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+import {
+  CreateTransferToLayingPayload,
+  TransferToLaying,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { FlockWithKandangs } from '@/types/api/master-data/flock';
+
+// TODO: delete this dummy data
+const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
+  TransferToLaying[]
+> = {
+  code: 200,
+  status: 'success',
+  message: 'Successfully get all transfer to laying data!',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 8,
+  },
+  data: [
+    {
+      id: 201,
+      transfer_date: '2025-10-10',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 1200,
+      kandangs: [
+        {
+          kandang: {
+            id: 11,
+            name: 'KDG-11',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 501,
+              id_user: 501,
+              email: 'rina@farm.co',
+              name: 'Rina Setiawan',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 600,
+        },
+        {
+          kandang: {
+            id: 12,
+            name: 'KDG-12',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 502,
+              id_user: 502,
+              email: 'budi@farm.co',
+              name: 'Budi Hartono',
+            },
+            created_user: {
+              id: 9002,
+              id_user: 9002,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-08-25T08:00:00Z',
+            updated_at: '2025-09-20T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Start laying cycle',
+      created_user: {
+        id: 9100,
+        id_user: 9100,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-10T06:00:00Z',
+      updated_at: '2025-10-10T06:00:00Z',
+    },
+    {
+      id: 202,
+      transfer_date: '2025-10-11',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 950,
+      kandangs: [
+        {
+          kandang: {
+            id: 13,
+            name: 'KDG-13',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 503,
+              id_user: 503,
+              email: 'sari@farm.co',
+              name: 'Sari Wulandari',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-09-05T08:00:00Z',
+            updated_at: '2025-10-02T08:00:00Z',
+          },
+          quantity: 500,
+        },
+        {
+          kandang: {
+            id: 14,
+            name: 'KDG-14',
+            status: 'MAINTENANCE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 504,
+              id_user: 504,
+              email: 'agus@farm.co',
+              name: 'Agus Pratama',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-07-15T08:00:00Z',
+            updated_at: '2025-09-15T08:00:00Z',
+          },
+          quantity: 450,
+        },
+      ],
+      reason: 'Capacity balancing',
+      created_user: {
+        id: 9101,
+        id_user: 9101,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-11T06:00:00Z',
+      updated_at: '2025-10-11T06:00:00Z',
+    },
+    {
+      id: 203,
+      transfer_date: '2025-10-12',
+      flock_source: { id: 3, name: 'Flock C' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 1100,
+      kandangs: [
+        {
+          kandang: {
+            id: 21,
+            name: 'KDG-21',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 505,
+              id_user: 505,
+              email: 'dewi@farm.co',
+              name: 'Dewi Lestari',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-10T08:00:00Z',
+            updated_at: '2025-10-05T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 22,
+            name: 'KDG-22',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 506,
+              id_user: 506,
+              email: 'hadi@farm.co',
+              name: 'Hadi Santoso',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-12T08:00:00Z',
+            updated_at: '2025-10-06T08:00:00Z',
+          },
+          quantity: 400,
+        },
+      ],
+      reason: 'Align age group',
+      created_user: {
+        id: 9102,
+        id_user: 9102,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-12T06:00:00Z',
+      updated_at: '2025-10-12T06:00:00Z',
+    },
+    {
+      id: 204,
+      transfer_date: '2025-10-13',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 800,
+      kandangs: [
+        {
+          kandang: {
+            id: 15,
+            name: 'KDG-15',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 507,
+              id_user: 507,
+              email: 'nadia@farm.co',
+              name: 'Nadia Putri',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-08-01T08:00:00Z',
+            updated_at: '2025-09-28T08:00:00Z',
+          },
+          quantity: 800,
+        },
+      ],
+      reason: 'Open capacity in LH3',
+      created_user: {
+        id: 9103,
+        id_user: 9103,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-13T06:00:00Z',
+      updated_at: '2025-10-13T06:00:00Z',
+    },
+    {
+      id: 205,
+      transfer_date: '2025-10-14',
+      flock_source: { id: 4, name: 'Flock D' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 650,
+      kandangs: [
+        {
+          kandang: {
+            id: 23,
+            name: 'KDG-23',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 508,
+              id_user: 508,
+              email: 'yoga@farm.co',
+              name: 'Yoga Prabowo',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-20T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 350,
+        },
+        {
+          kandang: {
+            id: 24,
+            name: 'KDG-24',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 509,
+              id_user: 509,
+              email: 'mega@farm.co',
+              name: 'Mega Anggraini',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-21T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Fill remaining LH2 slots',
+      created_user: {
+        id: 9104,
+        id_user: 9104,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-14T06:00:00Z',
+      updated_at: '2025-10-14T06:00:00Z',
+    },
+    {
+      id: 206,
+      transfer_date: '2025-10-15',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 720,
+      kandangs: [
+        {
+          kandang: {
+            id: 16,
+            name: 'KDG-16',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 510,
+              id_user: 510,
+              email: 'rizky@farm.co',
+              name: 'Rizky Maulana',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-12T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 420,
+        },
+        {
+          kandang: {
+            id: 17,
+            name: 'KDG-17',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 511,
+              id_user: 511,
+              email: 'tia@farm.co',
+              name: 'Tia Safitri',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-18T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Stage-by-stage transfer',
+      created_user: {
+        id: 9105,
+        id_user: 9105,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-15T06:00:00Z',
+      updated_at: '2025-10-15T06:00:00Z',
+    },
+    {
+      id: 207,
+      transfer_date: '2025-10-16',
+      flock_source: { id: 5, name: 'Flock E' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 500,
+      kandangs: [
+        {
+          kandang: {
+            id: 18,
+            name: 'KDG-18',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 512,
+              id_user: 512,
+              email: 'lukas@farm.co',
+              name: 'Lukas Aditya',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+        {
+          kandang: {
+            id: 19,
+            name: 'KDG-19',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 513,
+              id_user: 513,
+              email: 'maya@farm.co',
+              name: 'Maya Kartika',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-03T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+      ],
+      reason: 'Trial batch',
+      created_user: {
+        id: 9106,
+        id_user: 9106,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-16T06:00:00Z',
+      updated_at: '2025-10-16T06:00:00Z',
+    },
+    {
+      id: 208,
+      transfer_date: '2025-10-17',
+      flock_source: { id: 6, name: 'Flock F' },
+      flock_destination: { id: 13, name: 'Laying House 4' },
+      quantity: 1300,
+      kandangs: [
+        {
+          kandang: {
+            id: 25,
+            name: 'KDG-25',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 514,
+              id_user: 514,
+              email: 'rara@farm.co',
+              name: 'Rara Pertiwi',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-07T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 26,
+            name: 'KDG-26',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 515,
+              id_user: 515,
+              email: 'doni@farm.co',
+              name: 'Doni Firmansyah',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-09T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Open new house',
+      created_user: {
+        id: 9107,
+        id_user: 9107,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-17T06:00:00Z',
+      updated_at: '2025-10-17T06:00:00Z',
+    },
+  ],
+};
+
+// TODO: delete this dummy data
+const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
+  code: 200,
+  status: 'success',
+  message: 'Get all projectflocks successfully',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 2,
+  },
+  data: [
+    {
+      id: 2,
+      name: 'Flock Banten',
+      totalQuantity: 300,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 150,
+        },
+        {
+          kandang: {
+            id: 5,
+            name: 'Cikaum 3',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 50,
+        },
+      ],
+    },
+
+    {
+      id: 3,
+      name: 'Flock Priangan',
+      totalQuantity: 200,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'Priangan',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+      ],
+    },
+  ],
+};
+
+export class TransferToLayingService extends BaseApiService<
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<TransferToLaying[]>> {
+    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
+
+    await sleep(750);
+
+    return GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA;
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async getFlockSource(): Promise<
+    BaseApiResponse<FlockWithKandangs[]> | undefined
+  > {
+    try {
+      //   const getFlockSourcePath = `${this.basePath}/${flockSourcePath}`;
+      //   const getSingleRes = await httpClient<FlockSourceType>(getFlockSourcePath);
+      //   return getSingleRes;
+
+      await sleep(500);
+
+      return FLOCK_SOURCE_DUMMY_DATA;
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkApprove(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkReject(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+}
+
+export const TransferToLayingApi = new TransferToLayingService('');
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index c118b5a4..a42eaa3f 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -104,3 +104,14 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type BaseApproval = {
+  step_number: number;
+  step_name: string;
+  action: string;
+  notes: string | null;
+  action_by: CreatedUser;
+  action_at: string;
+};
+
+export type ApproveAction = 'APPROVED' | 'REJECTED';
diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts
index e0dcfda4..daa7babf 100644
--- a/src/types/api/master-data/flock.d.ts
+++ b/src/types/api/master-data/flock.d.ts
@@ -12,3 +12,15 @@ export type CreateFlockPayload = {
 };
 
 export type UpdateFlockPayload = CreateFlockPayload;
+
+// ---------------------------------------
+// TODO: adjust this later after Transfer to Laying API done
+import { BaseKandang } from '@/types/api/master-data/kandang';
+
+export type FlockWithKandangs = BaseFlock & {
+  totalQuantity: number;
+  kandangs: {
+    kandang: BaseKandang;
+    quantity: number;
+  }[];
+};
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index b4d5cd7a..99d24922 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -1,4 +1,4 @@
-import { BaseMetadata } from "@/types/api/api-general";
+import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
 import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
 
 export type BaseChickin = {
@@ -7,6 +7,7 @@ export type BaseChickin = {
   quantity?: number;
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
+  approval: BaseApproval;
 }
 
 export type Chickin = BaseMetadata & BaseChickin;
@@ -14,7 +15,15 @@ export type Chickin = BaseMetadata & BaseChickin;
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
   chick_in_date: string;
+  note: string;
+  quantity?: number;
 }
 
-export type UpdateChickinPayload = CreateChickinPayload;
+export type UpdateChickinPayload = CreateChickinPayload & {
+  id: number;
+};
 
+export type ChickinApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};
\ No newline at end of file
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index d75c403e..83a1c18f 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -7,6 +7,12 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  available_quantity?: number;
 }
 
-export type ProjectFlockKandang = BaseProjectFlockKandang;
\ No newline at end of file
+export type ProjectFlockKandang = BaseProjectFlockKandang;
+
+export type LookupProjectFlockKandangPayload = {
+  project_flock_id: number;
+  kandang_id: number;
+}
\ No newline at end of file
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index ce4043c4..be14302d 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -3,7 +3,7 @@ import { Fcr } from '@/types/api/master-data/fcr';
 import { Flock } from '@/types/api/master-data/flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { Location } from '@/types/api/master-data/location';
-import { BaseMetadata } from '@/types/api/api-general';
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {
   id: number;
@@ -21,6 +21,7 @@ export type BaseProjectFlock = {
   period: number;
   kandang_ids: number[];
   kandangs: Kandang[];
+  approval: BaseApproval;
 };
 
 export type PeriodFlock = {
@@ -41,3 +42,8 @@ export type CreateProjectFlockPayload = {
 };
 
 export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
+
+export type ProjectFlockApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};
diff --git a/src/types/api/production/transfer-to-laying.d.ts b/src/types/api/production/transfer-to-laying.d.ts
new file mode 100644
index 00000000..77d35d8f
--- /dev/null
+++ b/src/types/api/production/transfer-to-laying.d.ts
@@ -0,0 +1,37 @@
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type BaseTransferToLaying = {
+  id: number;
+  transfer_date: string;
+  flock_source: {
+    id: number;
+    name: string;
+  };
+  flock_destination: {
+    id: number;
+    name: string;
+  };
+  quantity: number;
+  kandangs: {
+    kandang: Kandang;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
+
+export type CreateTransferToLayingPayload = {
+  transfer_date: string;
+  flock_source_id: number;
+  flock_destination_id: number;
+  totalQuantity: number;
+  kandangs: {
+    kandang_id: number;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;