Update .gitlab-ci.yml file

update Dockerfile

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

.gitlab-ci.yml

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

Dockerfile

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

docker-compose.yaml

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

eslint.config.mjs

@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,14 +10,14 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
   },
 ];

package.json

@@ -7,7 +7,8 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
-    "prepare": "husky"
+    "prepare": "husky",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.19.4",
@@ -21,6 +22,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
@@ -40,6 +42,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "husky": "^9.1.7",
+    "prettier": "^3.6.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;

src/app/globals.css

@@ -3,10 +3,10 @@
 @import '../styles/daisyui.css';
 
 @plugin "daisyui/theme" {
-  name: "lti";
+  name: 'lti';
   default: false;
   prefersdark: false;
-  color-scheme: "light";
+  color-scheme: 'light';
   --color-base-100: oklch(98% 0.001 106.423);
   --color-base-200: oklch(97% 0.001 106.424);
   --color-base-300: oklch(92% 0.003 48.717);
@@ -37,8 +37,6 @@
   --noise: 0;
 }
 
-
-
 :root {
   --color-primary: #1f74bf;
 }

src/app/inventory/adjustment/add/page.tsx

@@ -1,11 +1,11 @@
-import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
 
 const CreateInventoryAdjustment = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <InventoryAdjustmentForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <InventoryAdjustmentForm />
     </section>
   );
-}
+};
 
-export default CreateInventoryAdjustment;
+export default CreateInventoryAdjustment;

src/app/inventory/adjustment/detail/layout.tsx

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

src/app/inventory/adjustment/detail/page.tsx

@@ -7,11 +7,12 @@ import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 
 const DetailInventoryAdjustment = () => {
   const router = useRouter();
-  const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
+  const [inventoryAdjustment, setInventoryAdjustment] =
+    useState<InventoryAdjustment | null>(null);
 
   // Ambil data dari router state
   useEffect(() => {
-    console.log("Router State");
+    console.log('Router State');
     console.log(window.history.state);
     const state = window.history.state?.usr as
       | { inventoryAdjustment?: InventoryAdjustment }
@@ -24,20 +25,20 @@ const DetailInventoryAdjustment = () => {
   }, [router]);
 
   const finalData = inventoryAdjustment;
-  
-  console.log("Final Data");
+
+  console.log('Final Data');
   console.log(finalData);
 
   if (!finalData) {
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <InventoryAdjustmentForm initialValues={finalData} />
     </section>
   );

src/app/master-data/customer/add/page.tsx

@@ -1,11 +1,11 @@
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const AddCustomer = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <CustomerForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <CustomerForm />
     </section>
   );
-}
+};
 
-export default AddCustomer;
+export default AddCustomer;

src/app/master-data/customer/detail/page.tsx

@@ -1,45 +1,47 @@
-'use client'
+'use client';
 
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 import { CustomerApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const CustomerDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const costumerId = searchParams.get("customerId");
+  const costumerId = searchParams.get('customerId');
 
   const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
     costumerId,
     (id: number) => CustomerApi.getSingle(id)
   );
 
-  if(!costumerId){
+  if (!costumerId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
-    router.replace("/404");
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingCostumer && isResponseSuccess(costumer) && (
-        <CustomerForm formType="detail" initialValues={costumer.data} />
+        <CustomerForm formType='detail' initialValues={costumer.data} />
       )}
     </div>
-  )
+  );
 };
 
 export default CustomerDetail;

src/app/master-data/customer/page.tsx

@@ -1,11 +1,11 @@
-import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
+import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <CustomersTable />
     </section>
-  )
+  );
 };
 
-export default Customer;
+export default Customer;

src/app/master-data/flock/add/page.tsx

@@ -1,11 +1,11 @@
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
 
 const AddFlock = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <FlockForm />
     </section>
   );
-}
+};
 
 export default AddFlock;

src/app/master-data/flock/detail/edit/page.tsx

@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockEdit = () => {
   const router = useRouter();
@@ -44,6 +44,6 @@ const FlockEdit = () => {
       )}
     </div>
   );
-}
+};
 
-export default FlockEdit;
+export default FlockEdit;

src/app/master-data/flock/detail/layout.tsx

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

src/app/master-data/flock/detail/page.tsx

@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockDetail = () => {
   const router = useRouter();
@@ -14,33 +14,36 @@ const FlockDetail = () => {
   const flockId = searchParams.get('flockId');
 
   // Fetch Data
-  const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
 
-  if(!flockId){
+  if (!flockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingFlock && (!flock || isResponseError(flock))){
+  if (!isLoadingFlock && (!flock || isResponseError(flock))) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingFlock && (
-        <span className="loading loading-spinner loading-xl" />
+        <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingFlock && isResponseSuccess(flock) && (
-        <FlockForm formType="detail" initialValues={flock.data} />
+        <FlockForm formType='detail' initialValues={flock.data} />
       )}
     </div>
   );
-}
+};
 
-export default FlockDetail;
+export default FlockDetail;

src/app/master-data/flock/page.tsx

@@ -1,11 +1,11 @@
-import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
   return (
-    <section className="w-full p-4">
-      <FlockTable/>
+    <section className='w-full p-4'>
+      <FlockTable />
     </section>
-  );   
-}
+  );
+};
 
 export default Flock;

src/app/master-data/product-category/add/page.tsx

@@ -1,11 +1,11 @@
-import ProductCategoryForm from "@/components/pages/master-data/product-category/form/ProductCategoryForm";
+import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
 
 const AddProductCategory = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductCategoryForm />
     </div>
   );
 };
 
-export default AddProductCategory;
+export default AddProductCategory;

src/app/master-data/product-category/detail/edit/page.tsx

@@ -9,39 +9,44 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const ProductCategoryEdit = () => {
-    const router = useRouter();
-    const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
-    const productCategoryId = searchParams.get('productCategoryId');
+  const productCategoryId = searchParams.get('productCategoryId');
 
-    const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
-        productCategoryId,
-        (id: number) => ProductCategoryApi.getSingle(id)
-    );
+  const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
+    productCategoryId,
+    (id: number) => ProductCategoryApi.getSingle(id)
+  );
 
-    if (!productCategoryId) {
-        router.back();
-
-        return (
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-            <span className='loading loading-spinner loading-xl' />
-        </div>
-        );
-    }
-
-    if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
-        router.replace('/404');
-        return;
-    }
+  if (!productCategoryId) {
+    router.back();
 
     return (
-        <div className='w-full p-4 flex flex-row justify-center'>
-        {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
-        {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-            <ProductCategoryForm type='edit' initialValues={productCategory.data} />
-        )}
-        </div>
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
     );
-}
+  }
 
-export default ProductCategoryEdit;
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+        <ProductCategoryForm type='edit' initialValues={productCategory.data} />
+      )}
+    </div>
+  );
+};
+
+export default ProductCategoryEdit;

src/app/master-data/product-category/detail/page.tsx

@@ -29,16 +29,24 @@ const ProductCategoryDetail = () => {
     );
   }
 
-  if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
     router.replace('/404');
     return;
   }
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-        <ProductCategoryForm type='detail' initialValues={productCategory.data} />
+        <ProductCategoryForm
+          type='detail'
+          initialValues={productCategory.data}
+        />
       )}
     </div>
   );

src/app/master-data/product-category/page.tsx

@@ -1,11 +1,11 @@
-import ProductCategoryTable from "@/components/pages/master-data/product-category/ProductCategoryTable";
+import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <ProductCategoryTable />
     </section>
   );
 };
 
-export default ProductCategory;
+export default ProductCategory;

src/app/master-data/product/add/page.tsx

@@ -2,10 +2,10 @@ import ProductForm from '@/components/pages/master-data/product/form/ProductForm
 
 const AddProduct = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductForm />
     </div>
   );
 };
 
-export default AddProduct;
+export default AddProduct;

src/app/master-data/product/detail/edit/page.tsx

@@ -13,9 +13,8 @@ const ProductEdit = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductEdit = () => {
   );
 };
 
-export default ProductEdit;
+export default ProductEdit;

src/app/master-data/product/detail/page.tsx

@@ -13,9 +13,8 @@ const ProductDetail = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductDetail = () => {
   );
 };
 
-export default ProductDetail;
+export default ProductDetail;

src/app/master-data/product/page.tsx

@@ -1,11 +1,11 @@
-import ProductsTable from "@/components/pages/master-data/product/ProductTable";
+import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
   return (
-    <section className="w-full p-4">
-        <ProductsTable />
+    <section className='w-full p-4'>
+      <ProductsTable />
     </section>
   );
 };
 
-export default Product;
+export default Product;

src/app/master-data/supplier/add/page.tsx

@@ -8,4 +8,4 @@ const AddSupplier = () => {
   );
 };
 
-export default AddSupplier;
+export default AddSupplier;

src/app/master-data/supplier/detail/page.tsx

@@ -46,4 +46,4 @@ const SupplierDetail = () => {
   );
 };
 
-export default SupplierDetail;
+export default SupplierDetail;

src/app/master-data/supplier/page.tsx

@@ -1,4 +1,4 @@
-import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
   return (

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

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

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();
+              },
+            }}
+          />
         </>
       )}
     </>

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;

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;

src/app/production/chickin/page.tsx

@@ -1,10 +1,10 @@
-import ChickinTable from "@/components/pages/production/chickin/ChickinTable";
+import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
 
 const Chickin = () => {
   return (
-    <section className="w-full p-4">
-      <ChickinTable/>
+    <section className='w-full p-4'>
+      <ChickinTable />
     </section>
   );
-}
-export default Chickin;
+};
+export default Chickin;

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

@@ -1,13 +1,13 @@
-'use client'
+'use client';
 
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 
 const AddProjectFlock = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <ProjectFlockForm formType="add"/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <ProjectFlockForm formType='add' />
     </section>
   );
-}
+};
 
-export default AddProjectFlock;
+export default AddProjectFlock;

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

@@ -1,46 +1,47 @@
-'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 ProjectFlockEdit = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
   const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
     projectFlockId,
     (id: number) => ProjectFlockApi.getSingle(id)
   );
 
-  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 (!isLoadingCostumer && (!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" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
+        <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockEdit;
+export default ProjectFlockEdit;

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

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

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

@@ -1,46 +1,55 @@
-'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;
+export default ProjectFlockDetail;

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

@@ -1,12 +1,11 @@
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
-import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 
 const ProjectFlock = () => {
   return (
-    <section className="w-full p-4">
-      <ProjectFlockTable/>
+    <section className='w-full p-4'>
+      <ProjectFlockTable />
     </section>
   );
-}
+};
 
 export default ProjectFlock;

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;

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;

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;

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;

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;

src/components/Card.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import {
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
   subtitle?: string;
   image?: string;
@@ -44,17 +42,17 @@ const Card = ({
     const baseClasses = 'card bg-base-100';
 
     const variantClasses = {
-      'default': '',
-      'compact': 'card-compact',
-      'bordered': 'border border-base-300',
-      'shadow': 'shadow-xl',
+      default: '',
+      compact: 'card-compact',
+      bordered: 'border border-base-300',
+      shadow: 'shadow-xl',
       'image-full': 'card-side card-compact shadow-xl',
     };
 
     const sizeClasses = {
-      'sm': 'w-64',
-      'md': 'w-96',
-      'lg': 'w-[28rem]',
+      sm: 'w-64',
+      md: 'w-96',
+      lg: 'w-[28rem]',
     };
 
     return cn(
@@ -84,9 +82,9 @@ const Card = ({
 
   const getTitleClasses = () => {
     const sizeClasses = {
-      'sm': 'text-lg',
-      'md': 'text-xl',
-      'lg': 'text-2xl',
+      sm: 'text-lg',
+      md: 'text-xl',
+      lg: 'text-2xl',
     };
 
     return cn('card-title font-bold', sizeClasses[size], className?.title);
@@ -147,4 +145,4 @@ const Card = ({
   );
 };
 
-export default Card;
+export default Card;

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 />

src/components/Pagination.tsx

@@ -185,17 +185,17 @@ const Pagination = ({
                     currentPage <= 2
                       ? currentPage + 2
                       : currentPage === totalPages - 2
-                      ? 3
-                      : currentPage >= totalPages - 1
-                      ? 4
-                      : 1
+                        ? 3
+                        : currentPage >= totalPages - 1
+                          ? 4
+                          : 1
                   }
                   endPage={
                     currentPage <= 2 || currentPage >= totalPages - 1
                       ? totalPages - 3
                       : currentPage === totalPages - 2
-                      ? totalPages - 4
-                      : 2
+                        ? totalPages - 4
+                        : 2
                   }
                   onPageItemClick={pageChangeHandler}
                 />
@@ -242,15 +242,15 @@ const Pagination = ({
                     currentPage <= 3
                       ? currentPage + 2
                       : currentPage >= 4
-                      ? currentPage + 2
-                      : 1
+                        ? currentPage + 2
+                        : 1
                   }
                   endPage={
                     currentPage <= 3
                       ? totalPages - 2
                       : currentPage >= 4
-                      ? totalPages - 1
-                      : 0
+                        ? totalPages - 1
+                        : 0
                   }
                   onPageItemClick={pageChangeHandler}
                 />

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;

src/components/Table.tsx

@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 

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;
+export default RequireAuth;

src/components/input/DateInput.tsx

@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -88,7 +84,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,
@@ -109,10 +105,7 @@ const DateInput = ({
           min={min}
           max={max}
           disabled={disabled}
-          className={cn(
-            'grow bg-transparent cursor-pointer',
-            className?.input
-          )}
+          className={cn('grow bg-transparent cursor-pointer', className?.input)}
           readOnly={readOnly}
         />
 

src/components/input/FileInput.tsx

@@ -69,10 +69,7 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
-          className?.input
-        )}
+        className={cn('grow file-input w-full h-12 rounded', className?.input)}
         readOnly={readOnly}
       />
 

src/components/input/NumberInput.tsx

@@ -1,415 +1,59 @@
 'use client';
 
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, ReactNode } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
-import { cn } from '@/lib/helper';
-import Inputmask from 'inputmask';
-
-const createInputMask = (
-  maskType: MaskType,
-  decimals: number,
-  thousandSeparator: string,
-  decimalSeparator: string,
-  allowNegative: boolean,
-  oncomplete?: () => void,
-  onincomplete?: () => void,
-  oncleared?: () => void
-): Inputmask.Instance => {
-  const options: Inputmask.Options = {
-    alias: 'numeric',
-    groupSeparator: thousandSeparator,
-    radixPoint: decimalSeparator,
-    digits: decimals,
-    allowMinus: allowNegative,
-    rightAlign: false,
-    insertMode: true,
-    autoUnmask: false,
-    clearMaskOnLostFocus: false,
-    digitsOptional: decimals > 0,
-    placeholder: '0',
-    numericInput: false,
-    positionCaretOnClick: 'radixFocus',
-    greedy: true,
-    oncomplete,
-    onincomplete,
-    oncleared
-  };
-
-  return new Inputmask(options);
-};
-
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
-
-export interface NumberInputProps {
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  maskType?: MaskType;
-  decimals?: number;
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   thousandSeparator?: string;
   decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  min?: number;
-  max?: number;
+  decimalScale?: number;
   allowNegative?: boolean;
-
-  oncomplete?: () => void;
-  onincomplete?: () => void;
-  oncleared?: () => void;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
 }
 
 const NumberInput = ({
-                       label,
-                       bottomLabel,
-                       name,
-                       value,
-                       placeholder,
-                       className,
-                       isError,
-                       isValid,
-                       errorMessage,
-                       startAdornment,
-                       endAdornment,
-                       disabled = false,
-                       required = false,
-                       onChange,
-                       onBlur,
-                       onFocus,
-                       readOnly = false,
-                       isLoading = false,
-                       maskType = 'number',
-                       decimals = 0,
-                       thousandSeparator = ',',
-                       decimalSeparator = '.',
-                       currencyPrefix = 'Rp ',
-                       weightUnit = 'kg',
-                       allowNegative = false,
-                       oncomplete,
-                       onincomplete,
-                       oncleared,
-                     }: NumberInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputmaskRef = useRef<Inputmask.Instance | null>(null);
-  const [maskComplete, setMaskComplete] = useState<boolean>(false);
-  const [maskIncomplete, setMaskIncomplete] = useState<boolean>(false);
-  const [maskCleared, setMaskCleared] = useState<boolean>(false);
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
     }
   };
 
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
-  useEffect(() => {
-    if (inputRef.current && !readOnly && !disabled) {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask:', error);
-        }
-      }
-
-      const handleComplete = () => {
-        setMaskComplete(true);
-        setMaskIncomplete(false);
-        setMaskCleared(false);
-        if (oncomplete) oncomplete();
-      };
-
-      const handleIncomplete = () => {
-        setMaskIncomplete(true);
-        setMaskComplete(false);
-        setMaskCleared(false);
-        if (onincomplete) onincomplete();
-      };
-
-      const handleCleared = () => {
-        setMaskCleared(true);
-        setMaskComplete(false);
-        setMaskIncomplete(false);
-        if (oncleared) oncleared();
-      };
-
-          const im = createInputMask(
-        maskType,
-        decimals,
-        ',',
-        '.',
-        allowNegative,
-        handleComplete,
-        handleIncomplete,
-        handleCleared
-      );
-
-      try {
-        im.mask(inputRef.current);
-        inputmaskRef.current = im;
-      } catch (error) {
-        console.warn('Error applying Inputmask:', error);
-        inputmaskRef.current = null;
-      }
-    }
-
-    return () => {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask on cleanup:', error);
-        }
-      }
-    };
-  }, [maskType, decimals, thousandSeparator, decimalSeparator, allowNegative, readOnly, disabled, oncomplete, onincomplete, oncleared]);
-
-  useEffect(() => {
-    if (inputRef.current && value !== undefined) {
-      if (value === null || value === '') {
-        inputRef.current.value = '';
-      } else {
-        inputRef.current.value = String(value);
-      }
-    }
-  }, [value]);
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentValue = (e.currentTarget as HTMLInputElement).value;
-    console.log('✅ After format:', currentValue);
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: currentValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      onChange(syntheticEvent);
-    }
-  };
-
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   return (
-    <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
-    >
-      {label && (
-        <label
-          htmlFor={name}
-          className={cn(
-            'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
-            className?.label
-          )}
-        >
-          {label}
-          {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
-          )}
-        </label>
-      )}
-
-      <div className='relative flex'>
-        {inputPrefix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
-          </div>
-        )}
-
-        <div
-          className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-              'rounded-l-none!': inputPrefix,
-              'rounded-r-none!': inputSuffix,
-              'input-disabled': disabled,
-              'cursor-not-allowed': disabled,
-              'bg-gray-50': disabled,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {startAdornment && startAdornment}
-
-          <input
-            type='text'
-            id={name}
-            name={name}
-            ref={inputRef}
-            placeholder={placeholder || '0'}
-            onKeyUp={handleKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            disabled={disabled}
-            className={cn(
-              'grow bg-transparent outline-none',
-              {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
-            readOnly={readOnly}
-            inputMode='text'
-            autoComplete='off'
-            spellCheck={false}
-          />
-
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-              {endAdornment && endAdornment}
-            </div>
-          )}
-        </div>
-
-        {inputSuffix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {(maskType === 'text' || (oncomplete || onincomplete || oncleared)) && (
-        <div className='flex gap-2 text-xs'>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskComplete
-                ? 'bg-green-100 text-green-700 border border-green-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Complete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskIncomplete
-                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Incomplete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskCleared
-                ? 'bg-blue-100 text-blue-700 border border-blue-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Cleared
-          </span>
-        </div>
-      )}
-
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
-    </div>
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      startAdornment={inputPrefix}
+      endAdornment={inputSuffix}
+      {...restProps}
+    />
   );
 };
 
 export default NumberInput;
-

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;
@@ -160,7 +165,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,
@@ -176,16 +181,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,
@@ -193,7 +198,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
             );
           },
@@ -222,4 +227,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;

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,

src/components/input/TextInput.tsx

@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/menu/MenuItem.tsx

@@ -49,14 +49,18 @@ const MenuItem = ({
   );
 
   return (
-    <li onClick={onClick}>
+    <li>
       {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
+      {!href && (
+        <button className={menuItemBaseClassName} onClick={onClick}>
+          {menuItemContent}
+        </button>
+      )}
     </li>
   );
 };

src/components/pages/ApprovalSteps.tsx

@@ -3,11 +3,24 @@ import Steps from '@/components/steps/Steps';
 import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
-import { formatDate } from '@/lib/helper';
-import { ApprovalsLine } from '@/types/api/api-general';
+import { cn, formatDate } from '@/lib/helper';
+import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import { ApprovalLine } from '@/types/config/constant';
+
+export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
+
+export type ApprovalStepLog = {
+  action_by?: string;
+  date?: string;
+  notes?: string | null;
+};
 
 interface ApprovalStepsProps {
-  approvals: ApprovalsLine;
+  approvals: {
+    name?: string;
+    status: ApprovalStepStatus;
+    logs?: ApprovalStepLog[];
+  }[];
 }
 
 const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
@@ -15,45 +28,77 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
     <Steps direction='vertical' className='w-full md:steps-horizontal'>
       {approvals.map((approval, idx) => {
         const stepItemColor =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'success'
-            : approval.status === 'rejected'
-            ? 'error'
-            : undefined;
+            : approval.status === 'REJECTED'
+              ? 'error'
+              : approval.status === 'WAITING'
+                ? 'warning'
+                : undefined;
 
         const stepItemIcon =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'material-symbols:check-rounded'
-            : approval.status === 'rejected'
-            ? 'material-symbols:close-rounded'
-            : 'bxs:hourglass';
+            : approval.status === 'REJECTED'
+              ? 'material-symbols:close-rounded'
+              : approval.status === 'WAITING'
+                ? 'pajamas:dash-circle'
+                : approval.logs && approval.logs.length > 0
+                  ? 'material-symbols:info-outline-rounded'
+                  : 'bxs:hourglass';
 
         return (
           <StepItem
             key={idx}
             color={stepItemColor}
             icon={
-              approval.status !== 'waiting' && (
-                <Tooltip
-                  color={stepItemColor}
-                  position='right'
-                  className={{
-                    wrapper: 'md:tooltip-bottom',
-                  }}
-                  content={
-                    <div className='flex flex-col text-base'>
-                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
-                      <span>Oleh: {approval.action_by}</span>
-                      <span>Catatan: {approval.notes}</span>
-                    </div>
-                  }
-                >
-                  <Icon icon={stepItemIcon} width={24} height={24} />
-                </Tooltip>
-              )
+              <Tooltip
+                color={stepItemColor}
+                position='right'
+                className={{
+                  wrapper: 'md:tooltip-bottom',
+                }}
+                content={
+                  <>
+                    {approval.logs && approval.logs.length > 0 && (
+                      <div className='flex flex-col gap-2'>
+                        {approval.logs?.map((approvalLog, logIdx) => (
+                          <div
+                            key={logIdx}
+                            className='flex flex-col text-base text-start'
+                          >
+                            {approvalLog.date && (
+                              <span>
+                                {formatDate(
+                                  approvalLog.date,
+                                  'YYYY-MM-DD, HH:mm:ss'
+                                )}
+                              </span>
+                            )}
+                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                }
+              >
+                <Icon
+                  icon={stepItemIcon}
+                  width={24}
+                  height={24}
+                  className={cn({
+                    invisible:
+                      approval.status === 'IDLE' &&
+                      (!approval.logs ||
+                        (approval.logs && approval.logs.length === 0)),
+                  })}
+                />
+              </Tooltip>
             }
           >
-            {approval.role}
+            {approval.name}
           </StepItem>
         );
       })}
@@ -61,4 +106,76 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
   );
 };
 
+export const formatGroupedApprovalsToApprovalSteps = (
+  approvalLine: ApprovalLine,
+  groupedApprovals: BaseGroupedApproval[],
+  latestApproval: BaseApproval
+): ApprovalStepsProps['approvals'] => {
+  const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
+    approvalLine.map((approvalLineItem) => {
+      const approvalGroup = groupedApprovals.find(
+        (approvalGroupItem) =>
+          approvalGroupItem.step_number === approvalLineItem.step_number
+      );
+
+      const currentStepNumber = approvalLineItem.step_number;
+      const lastStepNumber =
+        groupedApprovals[groupedApprovals.length - 1].step_number;
+
+      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
+        throw new Error(
+          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        );
+      }
+
+      if (!approvalGroup) {
+        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+
+        return {
+          name: approvalLineItem.step_name,
+          status: isWaiting ? 'WAITING' : 'IDLE',
+        };
+      }
+
+      let approvalStatus: ApprovalStepStatus;
+
+      if (approvalGroup.step_number <= latestApproval.step_number) {
+        switch (approvalGroup.approvals[0].action) {
+          case 'CREATED':
+          case 'APPROVED':
+            approvalStatus = 'APPROVED';
+            break;
+
+          case 'REJECTED':
+            approvalStatus = 'REJECTED';
+            break;
+
+          default:
+            approvalStatus = 'IDLE';
+            break;
+        }
+      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+        approvalStatus = 'WAITING';
+      } else {
+        approvalStatus = 'IDLE';
+      }
+
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
+        (approval) => ({
+          action_by: approval.action_by.name,
+          date: approval.action_at,
+          notes: approval.notes,
+        })
+      );
+
+      return {
+        name: approvalGroup.step_name,
+        status: approvalStatus,
+        logs: approvalLogs,
+      };
+    });
+
+  return formattedApprovalSteps;
+};
+
 export default ApprovalSteps;

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

@@ -10,11 +10,7 @@ import { inventoryAdjustmentApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 import { Icon } from '@iconify/react';
-import {
-  ColumnDef,
-  ColumnSort,
-  SortingState,
-} from '@tanstack/react-table';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
@@ -44,10 +40,7 @@ const InventoryAdjustmentTable = () => {
   });
 
   // Fetch Data
-  const {
-    data: inventoryAdjustments,
-    isLoading,
-  } = useSWR(
+  const { data: inventoryAdjustments, isLoading } = useSWR(
     `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
     inventoryAdjustmentApi.getAllFetcher
   );
@@ -113,8 +106,8 @@ const InventoryAdjustmentTable = () => {
           type === 'INCREASE'
             ? 'Peningkatan'
             : type === 'DECREASE'
-            ? 'Penurunan'
-            : '-';
+              ? 'Penurunan'
+              : '-';
 
         return (
           <div
@@ -187,8 +180,13 @@ const InventoryAdjustmentTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/inventory/adjustment/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/inventory/adjustment/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
@@ -211,7 +209,7 @@ const InventoryAdjustmentTable = () => {
                   value: tableFilterState.pageSize,
                 }}
                 onChange={pageSizeChangeHandler}
-                className={{ wrapper: 'max-w-28' }}
+                className={{ wrapper: 'min-w-28' }}
               />
             </div>
           </div>

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts

@@ -4,24 +4,21 @@ export const InventoryAdjustmentFormSchema = Yup.object({
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_category_id: Yup.number().nullable(),
 
   product: Yup.object({
     value: Yup.number().required('ID Produk wajib diisi!'),
     label: Yup.string().required('Nama Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_id: Yup.number().nullable(),
 
   warehouse: Yup.object({
     value: Yup.number().required('ID Gudang wajib diisi!'),
     label: Yup.string().required('Nama Gudang wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   warehouse_id: Yup.number().nullable(),
 

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

@@ -51,9 +51,8 @@ const InventoryAdjustmentForm = ({
   // Submit Handler
   const createInventoryAdjustmentHandler = useCallback(
     async (payload: CreateInventoryAdjustmentPayload) => {
-      const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
-        payload
-      );
+      const createInventoryAdjustmentRes =
+        await inventoryAdjustmentApi.create(payload);
 
       if (isResponseError(createInventoryAdjustmentRes)) {
         setInventoryAdjustmentFormErrorMessage(
@@ -68,7 +67,9 @@ const InventoryAdjustmentForm = ({
     [router]
   );
 
-  const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
+  const formikInitialValues = useMemo<
+    Partial<InventoryAdjustmentFormValues>
+  >(() => {
     return {
       product_category_id: initialValues?.product_category?.id ?? 0,
       product_id: initialValues?.product?.id ?? 0,
@@ -185,7 +186,6 @@ const InventoryAdjustmentForm = ({
     warehouseChangeHandler(null);
   };
 
-
   const { setValues: formikSetValues } = formik;
 
   // Effect
@@ -225,7 +225,13 @@ const InventoryAdjustmentForm = ({
       const type = initialValues.transaction_type.toLowerCase();
       setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
     }
-  }, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
+  }, [
+    formik,
+    initialValues,
+    setQuantityLabel,
+    setDisabledProduct,
+    setSelectedProductCategories,
+  ]);
   useEffect(() => {
     formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
   }, [formikSetValues, formikInitialValues]);
@@ -364,15 +370,19 @@ const InventoryAdjustmentForm = ({
               errorMessage={formik.errors.transaction_type as string}
               variant='radio-primary'
               required
-              bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
+              bottomLabel={
+                formik.values.transaction_type == undefined
+                  ? 'Pilih salah satu tipe transaksi'
+                  : undefined
+              }
               disabled={type === 'detail'}
             />
 
             {/* Number Input Stock */}
             <TextInput
-             className={{
-              wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
-             }}
+              className={{
+                wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
+              }}
               required
               label={quantityLabel}
               name='quantity'
@@ -395,8 +405,6 @@ const InventoryAdjustmentForm = ({
               readOnly={type === 'detail'}
             />
 
-            
-
             {/* Text Area Input Reason */}
             <TextArea
               required
@@ -413,14 +421,23 @@ const InventoryAdjustmentForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
               <div className='flex flex-row justify-end gap-2'>
-                <Button type='button' color='warning' className='px-4' onClick={resetHandler}>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={resetHandler}
+                >
                   Reset
                 </Button>
                 <Button
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
+                  disabled={
+                    !formik.isValid ||
+                    formik.isSubmitting ||
+                    formik.values.product == undefined
+                  }
                   className='px-4'
                 >
                   Submit

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

@@ -77,7 +77,7 @@ const MovementTable = () => {
         <TableToolbar
           addButton={{
             href: '/inventory/movement/add',
-            label: 'Tambah Movement',
+            label: 'Tambah',
           }}
           search={{
             value: tableFilterState.search,

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -1377,9 +1377,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               handleDeliveryCostChange(idx, e.target.value)
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1404,9 +1401,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               )
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',

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

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
         variant='ghost'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const AreasTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const AreasTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/area/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/area/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Area
+                Tambah
               </Button>
             </div>
 

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

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -163,7 +155,7 @@ const BanksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -212,10 +204,15 @@ const BanksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/bank/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/bank/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Bank
+                Tambah
               </Button>
             </div>
 

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

@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -15,10 +16,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
-import {
-  CellContext,
-  ColumnDef,
-} from '@tanstack/react-table';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -33,16 +31,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
         variant='ghost'
@@ -53,10 +42,10 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        className='justify-start text-sm'
         href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
+        className='justify-start text-sm'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
@@ -65,7 +54,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -75,7 +64,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -174,7 +163,7 @@ const CustomersTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -210,10 +199,15 @@ const CustomersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/customer/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/customer/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Customer
+                Tambah
               </Button>
             </div>
 
@@ -285,4 +279,4 @@ const CustomersTable = () => {
   );
 };
 
-export default CustomersTable;
+export default CustomersTable;

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

@@ -11,7 +11,11 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema';
+import {
+  CustomerFormSchema,
+  CustomerFormValues,
+  UpdateCustomerFormSchema,
+} from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -150,7 +154,8 @@ const CustomerForm = ({
   const formik = useFormik<CustomerFormValues>({
     initialValues: formikInitialValues,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setCustomerFormErrorMessage('');

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

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const FcrsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const FcrsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/fcr/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/fcr/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah FCR
+                Tambah
               </Button>
             </div>
 

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

@@ -12,6 +12,7 @@ import { FlockApi } from '@/services/api/master-data';
 import { useModal } from '@/components/Modal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -30,16 +31,7 @@ const RowsOptions = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
         variant='ghost'
@@ -54,7 +46,7 @@ const RowsOptions = ({
         />
         Edit
       </Button>
-       <Button
+      <Button
         href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -72,7 +64,7 @@ const RowsOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowsOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -203,9 +195,15 @@ const FlockTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/flock/add' color='primary'>
-                Tambah Flock
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/flock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
               </Button>
             </div>
 
@@ -275,4 +273,4 @@ const FlockTable = () => {
   );
 };
 
-export default FlockTable;
+export default FlockTable;

src/components/pages/master-data/flock/form/FlockForm.schema.ts

@@ -3,10 +3,7 @@ import * as Yup from 'yup';
 export const FlockFormSchema = Yup.object({
   name: Yup.string()
     .required('Nama wajib diisi!')
-    .matches(
-      /^[\p{L}\p{N}\s]+$/u,
-      'Nama tidak boleh mengandung simbol'
-    ),
+    .matches(/^[\p{L}\p{N}\s]+$/u, 'Nama tidak boleh mengandung simbol'),
 });
 
 export const UpdateFlockFormSchema = FlockFormSchema;

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

@@ -1,11 +1,15 @@
-'use client'
+'use client';
 
 import { useModal } from '@/components/Modal';
 import { FlockApi } from '@/services/api/master-data';
 import { Flock } from '@/types/api/master-data/flock';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema';
+import {
+  FlockFormSchema,
+  FlockFormValues,
+  UpdateFlockFormSchema,
+} from '@/components/pages/master-data/flock/form/FlockForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -48,7 +52,8 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
   const formik = useFormik<FlockFormValues>({
     initialValues: formikInitialValue,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setFlockFormErrorMessage('');

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

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -173,7 +165,7 @@ const KandangsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -238,10 +230,15 @@ const KandangsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/kandang/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/kandang/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Kandang
+                Tambah
               </Button>
             </div>
 

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

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -172,7 +164,7 @@ const LocationsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -237,10 +229,15 @@ const LocationsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/location/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/location/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Location
+                Tambah
               </Button>
             </div>
 

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

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -184,7 +176,7 @@ const NonstocksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -249,10 +241,15 @@ const NonstocksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/nonstock/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/nonstock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Nonstock
+                Tambah
               </Button>
             </div>
 

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

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
         variant='ghost'
@@ -64,7 +56,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -74,7 +66,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -154,7 +146,7 @@ const ProductCategoryTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -200,10 +192,15 @@ const ProductCategoryTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product-category/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product-category/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Product Category
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput

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

@@ -1,10 +1,14 @@
 import * as Yup from 'yup';
 
 export const ProductCategoryFormSchema = Yup.object({
-  code: Yup.string().required('Kode wajib diisi!').max(3, 'Kode kategori produk melebihi 3 karakter!'),
+  code: Yup.string()
+    .required('Kode wajib diisi!')
+    .max(3, 'Kode kategori produk melebihi 3 karakter!'),
   name: Yup.string().required('Nama wajib diisi!'),
 });
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;
 
-export type ProductCategoryFormValues = Yup.InferType<typeof ProductCategoryFormSchema>;
+export type ProductCategoryFormValues = Yup.InferType<
+  typeof ProductCategoryFormSchema
+>;

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

@@ -30,7 +30,10 @@ interface ProductCategoryFormProps {
   initialValues?: ProductCategory;
 }
 
-const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFormProps) => {
+const ProductCategoryForm = ({
+  type = 'add',
+  initialValues,
+}: ProductCategoryFormProps) => {
   const router = useRouter();
   const deleteModal = useModal();
 
@@ -77,7 +80,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
 
   const formik = useFormik<ProductCategoryFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductCategoryFormSchema : ProductCategoryFormSchema,
+    validationSchema:
+      type === 'edit'
+        ? UpdateProductCategoryFormSchema
+        : ProductCategoryFormSchema,
     onSubmit: async (values) => {
       setFormErrorMessage('');
 
@@ -91,7 +97,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           await createProductCategoryHandler(payload);
           break;
         case 'edit':
-          await updateProductCategoryHandler(initialValues?.id as number, payload);
+          await updateProductCategoryHandler(
+            initialValues?.id as number,
+            payload
+          );
           break;
       }
     },
@@ -263,4 +272,4 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
   );
 };
 
-export default ProductCategoryForm;
+export default ProductCategoryForm;

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

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -36,16 +37,7 @@ const RowOptionsMenu = ({
   props: CellContext<Product, unknown>;
   deleteClickHandler: () => void;
 }) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`/master-data/product/detail/?productId=${props.row.original.id}`}
       variant='ghost'
@@ -68,7 +60,7 @@ const RowOptionsMenu = ({
       onClick={deleteClickHandler}
       variant='ghost'
       color='error'
-      className='text-error hover:text-inherit'
+      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
     >
       <Icon
         icon='material-symbols:delete-outline-rounded'
@@ -78,7 +70,7 @@ const RowOptionsMenu = ({
       />
       Delete
     </Button>
-  </div>
+  </RowOptionsMenuWrapper>
 );
 
 const ProductsTable = () => {
@@ -217,7 +209,7 @@ const ProductsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -280,10 +272,15 @@ const ProductsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product/add'
+                variant='outline'
+                className='w-full sm:w-fit'
+                color='primary'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Produk
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput

src/components/pages/master-data/product/form/ProductForm.schema.ts

@@ -5,49 +5,50 @@ export const ProductFormSchema = Yup.object({
   brand: Yup.string().required('Merek wajib diisi!'),
   sku: Yup.string().required('SKU wajib diisi!'),
   uom: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
-  uom_id: Yup.number().required('Satuan wajib diisi!').typeError('Satuan wajib diisi!'),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  uom_id: Yup.number()
+    .required('Satuan wajib diisi!')
+    .typeError('Satuan wajib diisi!'),
   product_category: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
   product_category_id: Yup.number()
-      .required('Kategori produk wajib diisi!')
-      .typeError('Kategori produk wajib diisi!'),
+    .required('Kategori produk wajib diisi!')
+    .typeError('Kategori produk wajib diisi!'),
   product_price: Yup.number()
-      .required('Harga produk wajib diisi!')
-      .typeError('Harga produk wajib diisi!')
-      .min(0, 'Harga produk tidak boleh kurang dari 0!'),
+    .required('Harga produk wajib diisi!')
+    .typeError('Harga produk wajib diisi!')
+    .min(0, 'Harga produk tidak boleh kurang dari 0!'),
   selling_price: Yup.number()
-      .required('Harga jual wajib diisi!')
-      .typeError('Harga jual wajib diisi!')
-      .min(0, 'Harga jual tidak boleh kurang dari 0!'),
+    .required('Harga jual wajib diisi!')
+    .typeError('Harga jual wajib diisi!')
+    .min(0, 'Harga jual tidak boleh kurang dari 0!'),
   tax: Yup.number()
-      .required('Pajak wajib diisi!')
-      .typeError('Pajak wajib diisi!')
-      .min(0, 'Pajak tidak boleh kurang dari 0!')
-      .max(100, 'Pajak tidak boleh lebih dari 100%!'),
+    .required('Pajak wajib diisi!')
+    .typeError('Pajak wajib diisi!')
+    .min(0, 'Pajak tidak boleh kurang dari 0!')
+    .max(100, 'Pajak tidak boleh lebih dari 100%!'),
   expiry_period: Yup.number()
-      .required('Periode kadaluarsa wajib diisi!')
-      .typeError('Periode kadaluarsa wajib diisi!')
-      .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
+    .required('Periode kadaluarsa wajib diisi!')
+    .typeError('Periode kadaluarsa wajib diisi!')
+    .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
   supplier: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
   supplier_ids: Yup.array()
-      .of(Yup.number().typeError('Supplier tidak valid!'))
-      .min(1, 'Minimal harus ada 1 supplier!')
-      .required('Supplier wajib diisi!'),
+    .of(Yup.number().typeError('Supplier tidak valid!'))
+    .min(1, 'Minimal harus ada 1 supplier!')
+    .required('Supplier wajib diisi!'),
   flags: Yup.array()
-      .of(Yup.string())
-      .min(1, 'Minimal harus ada 1 flag!')
-      .required('Flag wajib diisi!'),
+    .of(Yup.string())
+    .min(1, 'Minimal harus ada 1 flag!')
+    .required('Flag wajib diisi!'),
 });
 
 export const UpdateProductFormSchema = ProductFormSchema;
 
 export type ProductFormValues = Yup.InferType<typeof ProductFormSchema>;
-

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

@@ -24,7 +24,12 @@ import {
   CreateProductPayload,
   UpdateProductPayload,
 } from '@/types/api/master-data/product';
-import { UomApi, ProductCategoryApi, SupplierApi, ProductApi } from '@/services/api/master-data';
+import {
+  UomApi,
+  ProductCategoryApi,
+  SupplierApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
 
@@ -67,30 +72,37 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     [router]
   );
 
-  const formikInitialValues = useMemo<ProductFormValues>(() => ({
-    name: initialValues?.name ?? '',
-    brand: initialValues?.brand ?? '',
-    sku: initialValues?.sku ?? '',
-    uom: initialValues?.uom
-      ? { value: initialValues.uom.id, label: initialValues.uom.name }
-      : null,
-    uom_id: initialValues?.uom?.id ?? 0,
-    product_category: initialValues?.product_category
-      ? { value: initialValues.product_category.id, label: initialValues.product_category.name }
-      : null,
-    product_category_id: initialValues?.product_category?.id ?? 0,
-    product_price: initialValues?.product_price ?? 0,
-    selling_price: initialValues?.selling_price ?? 0,
-    tax: initialValues?.tax ?? 0,
-    expiry_period: initialValues?.expiry_period ?? 0,
-    supplier: null, // not used for payload, just for UI
-    supplier_ids: initialValues?.suppliers?.map(s => s.id) ?? [],
-    flags: initialValues?.flags ?? [],
-  }), [initialValues]);
+  const formikInitialValues = useMemo<ProductFormValues>(
+    () => ({
+      name: initialValues?.name ?? '',
+      brand: initialValues?.brand ?? '',
+      sku: initialValues?.sku ?? '',
+      uom: initialValues?.uom
+        ? { value: initialValues.uom.id, label: initialValues.uom.name }
+        : null,
+      uom_id: initialValues?.uom?.id ?? 0,
+      product_category: initialValues?.product_category
+        ? {
+            value: initialValues.product_category.id,
+            label: initialValues.product_category.name,
+          }
+        : null,
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_price: initialValues?.product_price ?? 0,
+      selling_price: initialValues?.selling_price ?? 0,
+      tax: initialValues?.tax ?? 0,
+      expiry_period: initialValues?.expiry_period ?? 0,
+      supplier: null, // not used for payload, just for UI
+      supplier_ids: initialValues?.suppliers?.map((s) => s.id) ?? [],
+      flags: initialValues?.flags ?? [],
+    }),
+    [initialValues]
+  );
 
   const formik = useFormik<ProductFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
+    validationSchema:
+      type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
     onSubmit: async (values) => {
       setProductFormErrorMessage('');
       const payload: CreateProductPayload = {
@@ -103,8 +115,12 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
         selling_price: values.selling_price,
         tax: values.tax,
         expiry_period: values.expiry_period,
-        supplier_ids: (values.supplier_ids ?? []).filter((id): id is number => typeof id === 'number'),
-        flags: (values.flags ?? []).filter((f): f is string => typeof f === 'string'),
+        supplier_ids: (values.supplier_ids ?? []).filter(
+          (id): id is number => typeof id === 'number'
+        ),
+        flags: (values.flags ?? []).filter(
+          (f): f is string => typeof f === 'string'
+        ),
       };
       switch (type) {
         case 'add':
@@ -122,7 +138,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // UOM
   const [uomSelectInputValue, setUomSelectInputValue] = useState('');
   const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({ search: uomSelectInputValue ?? '' }).toString()}`;
-  const { data: uoms, isLoading: isLoadingUoms } = useSWR(uomsUrl, UomApi.getAllFetcher);
+  const { data: uoms, isLoading: isLoadingUoms } = useSWR(
+    uomsUrl,
+    UomApi.getAllFetcher
+  );
   const uomOptions = isResponseSuccess(uoms)
     ? uoms?.data.map((uom) => ({ value: uom.id, label: uom.name }))
     : [];
@@ -136,7 +155,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // Product Category
   const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
   const categoriesUrl = `${ProductCategoryApi.basePath}?${new URLSearchParams({ search: categorySelectInputValue ?? '' }).toString()}`;
-  const { data: categories, isLoading: isLoadingCategories } = useSWR(categoriesUrl, ProductCategoryApi.getAllFetcher);
+  const { data: categories, isLoading: isLoadingCategories } = useSWR(
+    categoriesUrl,
+    ProductCategoryApi.getAllFetcher
+  );
   const categoryOptions = isResponseSuccess(categories)
     ? categories?.data.map((cat) => ({ value: cat.id, label: cat.name }))
     : [];
@@ -150,16 +172,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // Supplier (multi select)
   const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
   const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue ?? '' }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(suppliersUrl, SupplierApi.getAllFetcher);
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
   const supplierOptions = isResponseSuccess(suppliers)
-      ? suppliers?.data
-          .filter((sup) => sup.category === 'SAPRONAK')
-          .map((sup) => ({ value: sup.id, label: sup.name }))
-      : [];
+    ? suppliers?.data
+        .filter((sup) => sup.category === 'SAPRONAK')
+        .map((sup) => ({ value: sup.id, label: sup.name }))
+    : [];
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     const arr = Array.isArray(val) ? val : val ? [val] : [];
     formik.setFieldTouched('supplier_ids', true);
-    formik.setFieldValue('supplier_ids', arr.map((v) => (v as OptionType).value));
+    formik.setFieldValue(
+      'supplier_ids',
+      arr.map((v) => (v as OptionType).value)
+    );
   };
 
   const deleteProductClickHandler = () => {
@@ -260,7 +288,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               options={categoryOptions}
               onInputChange={setCategorySelectInputValue}
               isLoading={isLoadingCategories}
-              isError={formik.touched.product_category_id && Boolean(formik.errors.product_category_id)}
+              isError={
+                formik.touched.product_category_id &&
+                Boolean(formik.errors.product_category_id)
+              }
               errorMessage={formik.errors.product_category_id as string}
               isDisabled={type === 'detail'}
               isClearable
@@ -274,7 +305,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.product_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.product_price && Boolean(formik.errors.product_price)}
+              isError={
+                formik.touched.product_price &&
+                Boolean(formik.errors.product_price)
+              }
               errorMessage={formik.errors.product_price as string}
               readOnly={type === 'detail'}
             />
@@ -287,7 +321,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.selling_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.selling_price && Boolean(formik.errors.selling_price)}
+              isError={
+                formik.touched.selling_price &&
+                Boolean(formik.errors.selling_price)
+              }
               errorMessage={formik.errors.selling_price as string}
               readOnly={type === 'detail'}
             />
@@ -313,7 +350,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.expiry_period}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.expiry_period && Boolean(formik.errors.expiry_period)}
+              isError={
+                formik.touched.expiry_period &&
+                Boolean(formik.errors.expiry_period)
+              }
               errorMessage={formik.errors.expiry_period as string}
               readOnly={type === 'detail'}
             />
@@ -321,12 +361,17 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Supplier'
               isMulti
-              value={supplierOptions.filter(opt => formik.values.supplier_ids.includes(opt.value))}
+              value={supplierOptions.filter((opt) =>
+                formik.values.supplier_ids.includes(opt.value)
+              )}
               onChange={supplierChangeHandler}
               options={supplierOptions}
               onInputChange={setSupplierSelectInputValue}
               isLoading={isLoadingSuppliers}
-              isError={formik.touched.supplier_ids && Boolean(formik.errors.supplier_ids)}
+              isError={
+                formik.touched.supplier_ids &&
+                Boolean(formik.errors.supplier_ids)
+              }
               errorMessage={formik.errors.supplier_ids as string}
               isDisabled={type === 'detail'}
               isClearable
@@ -335,10 +380,15 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Flags'
               isMulti
-              value={PRODUCT_FLAG_OPTIONS.filter(opt => formik.values.flags.includes(opt.value))}
-              onChange={val => {
+              value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                formik.values.flags.includes(opt.value)
+              )}
+              onChange={(val) => {
                 const arr = Array.isArray(val) ? val : val ? [val] : [];
-                formik.setFieldValue('flags', arr.map((v) => (v as OptionType).value));
+                formik.setFieldValue(
+                  'flags',
+                  arr.map((v) => (v as OptionType).value)
+                );
               }}
               options={PRODUCT_FLAG_OPTIONS}
               isError={formik.touched.flags && Boolean(formik.errors.flags)}
@@ -435,4 +485,4 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   );
 };
 
-export default ProductForm;
+export default ProductForm;

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

@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -30,16 +31,7 @@ const RowOptions = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
         variant='ghost'
@@ -72,7 +64,7 @@ const RowOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -226,10 +218,15 @@ const SuppliersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/supplier/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/supplier/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Supplier
+                Tambah
               </Button>
             </div>
 

src/components/pages/master-data/supplier/form/SupplierForm.schema.ts

@@ -1,41 +1,44 @@
 import * as Yup from 'yup';
 
 export const SupplierFormSchema = Yup.object({
-    name: Yup.string().required('Nama wajib diisi!'),
-    alias: Yup.string()
-    .matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
+  name: Yup.string().required('Nama wajib diisi!'),
+  alias: Yup.string()
+    .matches(
+      /^[A-Za-z0-9]+$/,
+      'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!'
+    )
     .max(5, 'Alias maksimal 5 karakter!')
     .required('Alias wajib diisi!'),
-    pic: Yup.string().required('PIC wajib diisi!'),
-    type: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    category: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    hatchery: Yup.string().required('Hatchery wajib diisi!'),
-    phone: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
-        .min(10, 'Nomor telepon minimal 10 digit!')
-        .max(12, 'Nomor telepon maksimal 12 digit!')
-        .required('Nomor telepon wajib diisi!'),
-    email: Yup.string()
-        .email('Format email tidak valid!')
-        .required('Email wajib diisi!'),
-    address: Yup.string().required('Alamat wajib diisi!'),
-    npwp: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
-        .required('Nomor NPWP wajib diisi!'),
-    account_number: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
-        .required('Nomor rekening wajib diisi!'),
-    due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
+  pic: Yup.string().required('PIC wajib diisi!'),
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  category: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  hatchery: Yup.string().required('Hatchery wajib diisi!'),
+  phone: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+    .min(10, 'Nomor telepon minimal 10 digit!')
+    .max(12, 'Nomor telepon maksimal 12 digit!')
+    .required('Nomor telepon wajib diisi!'),
+  email: Yup.string()
+    .email('Format email tidak valid!')
+    .required('Email wajib diisi!'),
+  address: Yup.string().required('Alamat wajib diisi!'),
+  npwp: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
+    .required('Nomor NPWP wajib diisi!'),
+  account_number: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+    .required('Nomor rekening wajib diisi!'),
+  due_date: Yup.number()
+    .min(1, 'Tanggal jatuh tempo wajib diisi!')
+    .required('Tanggal jatuh tempo wajib diisi!'),
 });
 
 export const UpdateSupplierFormSchema = SupplierFormSchema;
 
-export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
+export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;

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

@@ -41,7 +41,9 @@ const SupplierForm = ({
   // Setup State
   const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
+  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<
+    OptionType[]
+  >([]);
 
   // -- Options data mapping
   const typeOptions = TYPE_OPTIONS;
@@ -167,7 +169,7 @@ const SupplierForm = ({
   // Initialize Formik
   useEffect(() => {
     formikSetValues(formikInitialValues);
-    if(formType != 'add'){
+    if (formType != 'add') {
       const hatcheryArrays = formikInitialValues.hatchery.split(',');
       const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
         value: item,
@@ -177,11 +179,13 @@ const SupplierForm = ({
     }
   }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
   useEffect(() => {
-    const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
+    const commaSeparatedValues = hatcheryOptionsValues
+      .map((item) => item.value)
+      .join(',');
     formikSetValues({
       ...formik.values,
       hatchery: commaSeparatedValues,
-    })
+    });
   }, [hatcheryOptionsValues, formikSetValues]);
 
   // Option Handler
@@ -305,7 +309,9 @@ const SupplierForm = ({
                 console.log(val); // pastikan val = array of { value, label }
                 setHatcheryOptionValues(val as OptionType[]);
               }}
-              isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+              isError={
+                formik.touched.hatchery && Boolean(formik.errors.hatchery)
+              }
               errorMessage={formik.errors.hatchery as string}
               isDisabled={formType === 'detail'}
               isClearable

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

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const UomsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const UomsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/uom/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/uom/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah UOM
+                Tambah
               </Button>
             </div>
 

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

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
         variant='ghost'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -206,7 +198,7 @@ const WarehousesTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -277,10 +269,15 @@ const WarehousesTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/warehouse/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/warehouse/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Warehouse
+                Tambah
               </Button>
             </div>
 

src/components/pages/production/chickin/ChickinTable.tsx

@@ -8,11 +8,12 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } 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 +58,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);
@@ -94,7 +88,9 @@ const ChickinTable = () => {
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <Button
               href='/production/chickin/add?projectFlockId=1'
+              variant='outline'
               color='primary'
+              className='w-full sm:w-fit'
             >
               <Icon icon='uil:plus' width={24} height={24} />
               Tambah
@@ -131,19 +127,26 @@ 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,
             header: 'Tanggal Chickin',
             cell: (props) => {
               if (props.row.original.chick_in_date) {
-                return new Date(props.row.original.chick_in_date).toLocaleDateString(
-                  'id-ID'
-                );
+                return new Date(
+                  props.row.original.chick_in_date
+                ).toLocaleDateString('id-ID');
               } else {
                 return '-';
               }
-            }
+            },
           },
           {
             accessorFn: (row) => row.note,
@@ -240,7 +243,9 @@ const ChickinTable = () => {
       <Modal ref={chickinModal.ref}>
         <div className='flex flex-row justify-between items-center'>
           <h1 className='text-xl font-semibold text-center mb-6'>
-            Chickin Kandang - { selectedChickin?.project_flock_kandang && selectedChickin?.project_flock_kandang.kandang?.name}
+            Chickin Kandang -{' '}
+            {selectedChickin?.project_flock_kandang &&
+              selectedChickin?.project_flock_kandang.kandang?.name}
           </h1>
           <Button
             color='error'
@@ -255,10 +260,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm initialValues={selectedChickin} formType='edit' afterSubmit={() => {
-          refreshChickins()
-          chickinModal.closeModal()
-        }}/>
+        <ChickinForm
+          initialValues={selectedChickin}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickins();
+            chickinModal.closeModal();
+          }}
+        />
       </Modal>
     </>
   );
@@ -276,18 +285,9 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
+        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -308,7 +308,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -318,7 +318,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 

src/components/pages/production/chickin/form/ChickinForm.schema.ts

@@ -3,9 +3,11 @@ import * as Yup from 'yup';
 export const ChickinFormSchema = Yup.object({
   chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
   note: Yup.string().required('Catatan wajib diisi!'),
-  quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
-})
+  quantity: Yup.number()
+    .min(1, 'Jumlah wajib diisi!')
+    .required('Jumlah wajib diisi!'),
+});
 
 export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
 
-export const UpdateChickinFormSchema = ChickinFormSchema;
+export const UpdateChickinFormSchema = ChickinFormSchema;

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>

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';
@@ -8,6 +9,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -16,13 +18,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';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
         variant='ghost'
@@ -56,29 +48,33 @@ 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'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -88,7 +84,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -117,10 +113,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 +130,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 +152,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 +173,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 +198,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 +216,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 +238,8 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
+    setRowSelection({});
+    refreshProjectFlocks();
     setIsApproveLoading(false);
   };
 
@@ -402,6 +251,7 @@ const ProjectFlockTable = () => {
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
               <Button
                 href='/production/project-flock/add'
+                variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
               >
@@ -412,11 +262,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 +356,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='collapse'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -522,6 +525,8 @@ const ProjectFlockTable = () => {
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
                 'mb-20':
@@ -559,18 +564,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',
         }}

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -24,7 +24,8 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.string().required('Nilai Kategori wajib diisi!'),
     label: Yup.string().required('Label Kategori wajib diisi!'),
   }).nullable(),
-  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+  category: Yup.string()
+    .oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
     .required('Kategori wajib diisi!'),
 
   // FCR

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,33 @@ 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,10 +142,11 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
-    kandangUrl,
-    KandangApi.getAllFetcher
-  );
+  const {
+    data: kandang,
+    isLoading: isLoadingKandang,
+    mutate: refreshKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
   const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
 
@@ -167,6 +201,17 @@ 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 +256,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 +388,7 @@ const ProjectFlockForm = ({
       formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
-  
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
@@ -400,11 +413,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 +445,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 +523,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 +563,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 +670,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 +687,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 +764,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,
+            });
+          },
         }}
       />
     </>

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

@@ -0,0 +1,149 @@
+'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;

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

@@ -14,6 +14,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 
@@ -126,16 +127,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`recording/detail/?recordingId=${props.row.original.id}`}
         variant='ghost'
@@ -158,7 +150,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -168,7 +160,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -255,7 +247,7 @@ const RecordingTable = () => {
         <TableToolbar
           addButton={{
             href: 'recording/add',
-            label: 'Tambah Recording',
+            label: 'Tambah',
           }}
           search={{
             value: search,

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -0,0 +1,628 @@
+'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 RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+
+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 (
+    <RowOptionsMenuWrapper type={type}>
+      <Button
+        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <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='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <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='collapse'
+                  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'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{
+                wrapper: 'sm:max-w-3xs',
+              }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          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;

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
+>;

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;

src/components/steps/StepItem.tsx

@@ -24,7 +24,14 @@ const StepItem = ({ children, icon, className, color }: StepItemProps) => {
 
   return (
     <li className={cn(stepItemBaseClassName, className)}>
-      <span className='step-icon'>{icon}</span>
+      <span
+        className={cn('step-icon', {
+          'transition-shadow shadow-[0_0_10px_2px_var(--color-warning)] hover:shadow-[0_0_15px_5px_var(--color-warning)]':
+            color === 'warning',
+        })}
+      >
+        {icon}
+      </span>
 
       <div>{children}</div>
     </li>

src/components/table/RowCollapseOptions.tsx

@@ -16,7 +16,7 @@ const RowCollapseOptions = ({ children }: RowCollapseOptionsProps) => {
           <Icon icon='material-symbols:more-vert' width={16} height={16} />
         </Button>
       }
-      className='w-fit'
+      className='w-fit min-w-36'
       titleClassName='p-0! justify-self-end'
     >
       {children}