Merge branch 'development' into feat/FE/US-163/expense-request

.gitlab-ci.yml

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

src/app/globals.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/production/project-flock/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/project-flock/chickin/detail/page.tsx

@@ -6,7 +6,7 @@ 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 { ChickinApi } from '@/services/api/production/chickin';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
   Chickin,
@@ -170,8 +170,8 @@ const DetailChickin = () => {
                   <div className='font-semibold text-sm'>Flock</div>
                   <div className='text-sm'>
                     {
-                      chickin.data.project_flock_kandang?.project_flock.flock
+                      chickin?.data?.project_flock_kandang?.project_flock?.flock
-                        .name
+                        ?.name
                     }
                   </div>
                 </div>
@@ -225,8 +225,8 @@ const DetailChickin = () => {
                   <div className='font-semibold text-sm'>Flock Kandang</div>
                   <div className='text-sm'>
                     {
-                      chickin.data.project_flock_kandang?.project_flock.flock
+                      chickin?.data?.project_flock_kandang?.project_flock?.flock
-                        .name
+                        ?.name
                     }{' '}
                     - {chickin.data.project_flock_kandang?.kandang.name}
                   </div>
@@ -280,7 +280,7 @@ const DetailChickin = () => {
       <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})?`}
+        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',
         }}
@@ -312,14 +312,6 @@ const DetailChickin = () => {
             />
           </Button>
         </div>
-        <ChickinForm
-          initialValues={chickin?.data}
-          formType='edit'
-          afterSubmit={() => {
-            refreshChickin();
-            chickinModal.closeModal();
-          }}
-        />
       </Modal>
 
       <ConfirmationModal
@@ -328,7 +320,7 @@ const DetailChickin = () => {
         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?.project_flock?.flock?.name
         } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
         secondaryButton={{
           text: 'Tidak',

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

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

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

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

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

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

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

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

src/components/Modal.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import {
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '@/lib/helper';
 
 export const useModal = () => {
@@ -8,31 +15,34 @@ export const useModal = () => {
   const [open, setOpen] = useState(false);
 
   const openModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.show();
     setOpen(true);
-
-    ref.current?.showModal();
   }, []);
 
   const closeModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.close();
     setOpen(false);
-    ref.current?.close();
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
+    open ? closeModal() : openModal();
-      closeModal();
-    } else {
-      openModal();
-    }
   }, [open, closeModal, openModal]);
 
-  if (ref.current) {
+  useEffect(() => {
-    ref.current.addEventListener('close', () => {
+    const dialog = ref.current;
-      closeModal();
+    if (!dialog) return;
-    });
-  }
 
-  return { ref, open, setOpen, openModal, closeModal, toggle } as const;
+    const handleClose = () => setOpen(false);
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, []);
+
+  return { ref, open, openModal, closeModal, toggle } as const;
 };
 
 interface ModalProps {
@@ -46,15 +56,19 @@ interface ModalProps {
 }
 
 const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
-  return (
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    <dialog ref={ref} className={cn('modal', className?.modal)}>
+    if (closeOnBackdrop && e.target === ref.current) {
-      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+      ref.current?.close();
+    }
+  };
 
-      {closeOnBackdrop && (
+  return (
-        <form method='dialog' className='modal-backdrop'>
+    <dialog
-          <button>close</button>
+      ref={ref}
-        </form>
+      className={cn('modal', className?.modal)}
-      )}
+      onClick={handleBackdropClick}
+    >
+      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
     </dialog>
   );
 };

src/components/Table.tsx

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

src/components/Tabs.tsx

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

src/components/helper/form/FormHeader.tsx

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

src/components/input/DateInput.tsx

@@ -7,10 +7,10 @@ import {
   useState,
 } from 'react';
 import { cn, formatDate } from '@/lib/helper';
-import Modal, { useModal } from '../Modal';
+import Modal, { useModal } from '@/components/Modal';
 import { DateRange, DayPicker, Matcher } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
-import Button from '../Button';
+import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 export interface DateInputProps {

src/components/input/PatternInput.tsx

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

src/components/input/SelectInput.tsx

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

src/components/modal/ConfirmationModal.tsx

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

src/components/modal/ConfirmationModalWithNotes.tsx

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

src/components/pages/ApprovalSteps.tsx

@@ -4,8 +4,16 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
 import { cn, formatDate } from '@/lib/helper';
-import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import {
+  BaseApiResponse,
+  BaseApproval,
+  BaseGroupedApproval,
+} from '@/types/api/api-general';
 import { ApprovalLine } from '@/types/config/constant';
+import useSWR from 'swr';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useCallback, useMemo } from 'react';
 
 export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
 
@@ -120,7 +128,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1].step_number;
+        groupedApprovals[groupedApprovals.length - 1]?.step_number;
 
       if (!approvalGroup && currentStepNumber <= lastStepNumber) {
         throw new Error(
@@ -130,29 +138,38 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       if (!approvalGroup) {
         const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+        const isPreviousApprovalRejected =
+          groupedApprovals[groupedApprovals.length - 1].approvals[0].action ===
+          'REJECTED';
 
         return {
           name: approvalLineItem.step_name,
-          status: isWaiting ? 'WAITING' : 'IDLE',
+          status: isPreviousApprovalRejected
+            ? 'IDLE'
+            : isWaiting
+              ? 'WAITING'
+              : 'IDLE',
         };
       }
 
-      let approvalStatus: ApprovalStepStatus;
+      let approvalStatus: ApprovalStepStatus = 'IDLE';
 
       if (approvalGroup.step_number <= latestApproval.step_number) {
-        switch (approvalGroup.approvals[0].action) {
+        if (approvalGroup.approvals) {
-          case 'CREATED':
+          switch (approvalGroup?.approvals[0]?.action) {
-          case 'APPROVED':
+            case 'CREATED':
-            approvalStatus = 'APPROVED';
+            case 'APPROVED':
-            break;
+              approvalStatus = 'APPROVED';
+              break;
 
-          case 'REJECTED':
+            case 'REJECTED':
-            approvalStatus = 'REJECTED';
+              approvalStatus = 'REJECTED';
-            break;
+              break;
 
-          default:
+            default:
-            approvalStatus = 'IDLE';
+              approvalStatus = 'IDLE';
-            break;
+              break;
+          }
         }
       } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
         approvalStatus = 'WAITING';
@@ -160,13 +177,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
         approvalStatus = 'IDLE';
       }
 
-      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
-        (approval) => ({
+        ? approvalGroup.approvals.map((approval) => ({
-          action_by: approval.action_by.name,
+            action_by: approval.action_by.name,
-          date: approval.action_at,
+            date: approval.action_at,
-          notes: approval.notes,
+            notes: approval.notes,
-        })
+          }))
-      );
+        : [];
 
       return {
         name: approvalGroup.step_name,
@@ -179,3 +196,178 @@ export const formatGroupedApprovalsToApprovalSteps = (
 };
 
 export default ApprovalSteps;
+
+/**
+ * Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
+ */
+const groupApprovalsByStep = (
+  approvals: BaseApproval[]
+): BaseGroupedApproval[] => {
+  const groups: Record<number, BaseGroupedApproval> = {};
+  for (const approval of approvals) {
+    if (!groups[approval.step_number]) {
+      groups[approval.step_number] = {
+        step_number: approval.step_number,
+        step_name: approval.step_name,
+        approvals: [],
+      };
+    }
+    groups[approval.step_number].approvals.push(approval);
+  }
+  return Object.values(groups);
+};
+
+/**
+ * Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
+ */
+const flattenGroupedApprovals = (
+  groupedApprovals: BaseGroupedApproval[]
+): BaseApproval[] => {
+  return groupedApprovals.flatMap((group) => group.approvals);
+};
+
+/**
+ * Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
+ */
+const isGroupedApprovalData = (
+  data: BaseApproval[] | BaseGroupedApproval[]
+): data is BaseGroupedApproval[] => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  const firstElement = data[0];
+  return (
+    typeof firstElement === 'object' &&
+    firstElement !== null &&
+    'approvals' in firstElement &&
+    Array.isArray(firstElement.approvals)
+  );
+};
+
+const useApprovalSteps = ({
+  latestApproval,
+  approvalLines,
+  moduleName,
+  moduleId,
+  params,
+}: {
+  latestApproval: BaseApproval | undefined;
+  approvalLines: ApprovalLine;
+  moduleName: string;
+  moduleId: string;
+  params?: {
+    page: number;
+    limit: number;
+    search?: string;
+    group_step_number?: boolean;
+  };
+}) => {
+  // Membuat URL Parameters
+  const paramString = new URLSearchParams({
+    page: params?.page?.toString() || '',
+    limit: params?.limit?.toString() || '',
+    search: params?.search || '',
+  }).toString();
+
+  // fetching data approvals
+  const SWR_KEY_APPROVALS =
+    moduleName && moduleId
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
+          params ? `&${paramString}` : ''
+        }`
+      : null;
+
+  const {
+    data: approvalData,
+    isLoading: approvalIsLoading,
+    mutate: mutateApprovals,
+  } = useSWR(SWR_KEY_APPROVALS, async (url) => {
+    return await httpClientFetcher<
+      BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
+    >(url);
+  });
+
+  // Fungsi Refresh
+  const refresh = useCallback(async () => {
+    await mutateApprovals();
+  }, [mutateApprovals]);
+
+  const { groupedApprovals } = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    let processedGroupedApprovals: BaseGroupedApproval[] = [];
+
+    if (rawData) {
+      if (isGroupedApprovalData(rawData)) {
+        processedGroupedApprovals = rawData;
+      } else {
+        processedGroupedApprovals = groupApprovalsByStep(
+          rawData as BaseApproval[]
+        );
+      }
+    }
+
+    return {
+      groupedApprovals: processedGroupedApprovals,
+    };
+  }, [approvalData]);
+
+  const isLoading = approvalIsLoading;
+
+  // Formatting Akhir
+  const approvals = useMemo(() => {
+    if (isLoading || !approvalLines.length || !latestApproval) {
+      return [];
+    }
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        approvalLines,
+        groupedApprovals,
+        latestApproval
+      );
+    } catch (error) {
+      console.warn('Gagal memformat approval steps:', error);
+      return [];
+    }
+  }, [isLoading, approvalLines, groupedApprovals, latestApproval]);
+
+  // Raw Data Approvals
+  const rawDataApprovals = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    if (!rawData) {
+      return undefined;
+    }
+
+    const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
+    const wantsGrouped = params?.group_step_number !== false;
+
+    if (wantsGrouped) {
+      if (isDataCurrentlyGrouped) {
+        return rawData as BaseGroupedApproval[];
+      } else {
+        return groupApprovalsByStep(rawData as BaseApproval[]);
+      }
+    } else {
+      if (isDataCurrentlyGrouped) {
+        return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
+      } else {
+        return rawData as BaseApproval[];
+      }
+    }
+  }, [approvalData, params?.group_step_number]);
+
+  // Return Hook
+  return {
+    approvals,
+    isLoading,
+    rawDataApprovals: rawDataApprovals,
+    refresh,
+  };
+};
+
+export { useApprovalSteps };

src/components/pages/marketing/sales-orders/SalesOrderTable.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatVechicleNumber } from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import { CellContext } from '@tanstack/react-table';
+import { useCallback, useState } from 'react';
+import useSWR from 'swr';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Marketing, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`/marketing/sales-orders/detail/?salesOrderId=${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={`/marketing/sales-orders/detail/edit/?salesOrderId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
+        >
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const SalesOrderTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [approveAction, setApproveAction] = useState<
+    'approve' | 'reject' | null
+  >(null);
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).filter(
+    (id) => rowSelection[id]
+  );
+
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const productsModal = useModal();
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  const approveClickHandler = () => {
+    setApproveAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  return (
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <TableToolbar
+            addButton={{
+              href: '/marketing/sales-orders/add',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={isResponseSuccess(marketing) ? marketing.data : []}
+          columns={[
+            {
+              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>
+              ),
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorKey: 'grand_total',
+              header: 'Grand Total',
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => {
+                if (props?.row?.original?.marketing_products?.length) {
+                  if (props?.row?.original?.marketing_products?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.marketing_products?.length}{' '}
+                        Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.marketing_products[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                const currentPageSize =
+                  props.table.getPaginationRowModel().rows.length;
+                const currentPageRows =
+                  props.table.getPaginationRowModel().flatRows;
+                const currentRowRelativeIndex =
+                  currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                const isLast2Rows =
+                  currentRowRelativeIndex > currentPageSize - 2;
+
+                const deleteClickHandler = () => {};
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+        }}
+      />
+
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approveAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction} data penjualan (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'approve' ? 'success' : 'error',
+        }}
+      />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<MarketingProduct>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.marketing_products ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+export default SalesOrderTable;

src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const SalesOrderDetail = ({
+  initialValues,
+  refreshValues,
+}: {
+  initialValues?: Marketing;
+  refreshValues?: () => void;
+}) => {
+  const [approvalAction, setApprovalAction] = useState<'approve' | 'reject'>(
+    'approve'
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+
+  const approveClickHandler = () => {
+    setApprovalAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delete(initialValues?.id as number);
+    setIsLoading(false);
+    deleteModal.closeModal();
+    toast.success('Successfully deleted Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.singleApproval(
+    //   initialValues?.id as number,
+    //   approvalAction
+    // );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success('Successfully approved Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delivery(initialValues?.id as number);
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success('Successfully delivered Sales Order!');
+    refreshValues?.();
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title='Detail Sales Order'
+          backUrl='/marketing/sales-orders'
+        />
+        <div className='flex-row flex gap-3'>
+          {initialValues?.approval?.step_number != 3 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={initialValues?.approval?.step_number != 1}
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={initialValues?.approval?.step_number != 2}
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.approval?.step_number == 2 && (
+            <Button color='success' onClick={deliveryClickHandler}>
+              <Icon icon='mdi:check' width={24} height={24} />
+              Delivery Order
+            </Button>
+          )}
+        </div>
+        <Card
+          title='Informasi Sales Order'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.approval?.step_name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValues?.so_date}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    {formatCurrency(initialValues?.grand_total as number)}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.marketing_products && (
+          <Card
+            title='Daftar Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<MarketingProduct>
+              data={initialValues?.marketing_products}
+              columns={[
+                {
+                  header: 'No. Polisi',
+                  accessorFn(row) {
+                    return formatVechicleNumber(
+                      row.marketing_delivery_products?.vehicle_number as string
+                    );
+                  },
+                },
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.marketing_products &&
+                    initialValues?.marketing_products?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          <Button
+            color='warning'
+            type='button'
+            href={`/marketing/sales-orders/detail/edit?salesOrderId=${initialValues?.id}`}
+          >
+            <Icon icon='mdi:pencil' width={24} height={24} />
+            Edit
+          </Button>
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approvalAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'approve' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesOrderDetail;

src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts

@@ -0,0 +1,38 @@
+import * as Yup from 'yup';
+import { MarketingProduct } from '@/types/api/marketing/marketing';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './repeater/MarketingProduct.schema';
+
+type MarketingSchema = {
+  customer_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  so_date: string | undefined;
+  notes: string | undefined;
+  marketing_products: MarketingProductFormValues[];
+};
+
+export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
+  customer_id: Yup.number().required('Customer wajib diisi!'),
+  customer: Yup.object({
+    value: Yup.number().required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  so_date: Yup.string().required('Tanggal wajib diisi!'),
+  notes: Yup.string().required('Catatan wajib diisi!'),
+  marketing_products: Yup.array()
+    .of(MarketingProductSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export const UpdateMarketingSchema = MarketingSchema;
+
+export type MarketingFormValues = Yup.InferType<typeof MarketingSchema>;

src/components/pages/marketing/sales-orders/form/SalesForm.tsx

@@ -0,0 +1,514 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import Modal, { useModal } from '@/components/Modal';
+import * as TanStack from '@tanstack/react-table';
+import Table from '@/components/Table'; // Keep this import
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  Marketing,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import MarketingProductForm from './repeater/MarketingProductForm';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { Customer } from '@/types/api/master-data/customer';
+import { CustomerApi } from '@/services/api/master-data';
+import { useFormik } from 'formik';
+import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+
+const SalesForm = ({
+  formType = 'add',
+  initialValues,
+}: {
+  formType?: 'add' | 'edit';
+  initialValues?: Marketing;
+}) => {
+  const router = useRouter();
+  const addProductModal = useModal();
+  const deleteModal = useModal();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<MarketingProduct | null>(null);
+  const [rawMarketingProducts, setRawMarketingProducts] = useState<
+    MarketingProduct[]
+  >(initialValues?.marketing_products || []);
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    initialValues?.customer
+      ? { value: initialValues.customer.id, label: initialValues.customer.name }
+      : null
+  );
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+  const [grandTotal, setGrandTotal] = useState<number>(
+    initialValues?.grand_total ?? 0
+  );
+  const marketingProducts = useMemo(
+    () => rawMarketingProducts,
+    [rawMarketingProducts]
+  );
+
+  const {
+    options: customerOptions,
+    rawData: customerRawData,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const handleAddProduct = useCallback(() => {
+    addProductModal.openModal();
+  }, [addProductModal]);
+  const handleDeleteProduct = useCallback((id: number) => {
+    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
+  }, []);
+  const handleBulkDeleteProduct = () => {
+    setRawMarketingProducts((prev) =>
+      prev.filter((product) => !selectedRowIds.includes(product.id))
+    );
+  };
+  const handleDelete = () => {
+    deleteModal.openModal();
+  };
+
+  const handleAddSubmitProduct = useCallback(
+    async (
+      tableValue: CreateMarketingProductPayload,
+      fieldValues: MarketingProductFormValues
+    ) => {
+      const newMarketingProduct: MarketingProduct = {
+        id: rawMarketingProducts.length + 1,
+        product_warehouse: tableValue.product_warehouse!,
+        unit_price: tableValue.unit_price as number,
+        total_weight: tableValue.total_weight as number,
+        qty: tableValue.qty as number,
+        avg_weight: tableValue.avg_weight as number,
+        total_price: tableValue.total_price as number,
+        marketing_delivery_products: {
+          id: rawMarketingProducts.length + 1,
+          vehicle_number: tableValue.vehicle_number as string,
+          delivery_date: tableValue.delivery_date as string,
+          unit_price: tableValue.unit_price as number,
+          total_weight: tableValue.total_weight as number,
+          qty: tableValue.qty as number,
+          avg_weight: tableValue.avg_weight as number,
+          total_price: tableValue.total_price as number,
+        },
+      };
+
+      setRawMarketingProducts((prev) => [...prev, newMarketingProduct]);
+      formik.setValues({
+        ...formik.values,
+        marketing_products: [...formik.values.marketing_products, fieldValues],
+      });
+      setGrandTotal((prev) => prev + (tableValue.total_price as number));
+      addProductModal.closeModal();
+    },
+    [rawMarketingProducts.length, addProductModal]
+  );
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      setSelectedCustomer(val as OptionType);
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    [selectedCustomer, setSelectedCustomer]
+  );
+
+  const createMarketingHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    toast.success('Successfully created Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const updateMarketingHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    toast.success('Successfully updated Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    toast.success('Successfully deleted Sales Order!');
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing/sales-orders');
+  };
+
+  const MarketingProductToFieldValues = (
+    product: MarketingProduct
+  ): MarketingProductFormValues => {
+    return {
+      vehicle_number: product.marketing_delivery_products?.vehicle_number,
+      kandang_id: product.product_warehouse.warehouse.id,
+      kandang: {
+        value: product.product_warehouse.warehouse.id,
+        label: product.product_warehouse.warehouse.name,
+      },
+      product_warehouse: {
+        value: product.product_warehouse.product.id,
+        label: product.product_warehouse.product.name,
+      },
+      product_warehouse_id: product.product_warehouse.product.id,
+      unit_price: product.unit_price,
+      total_weight: product.total_weight,
+      qty: product.qty,
+      uom: product.product_warehouse?.product?.uom?.name,
+      avg_weight: product.avg_weight,
+      total_price: product.total_price,
+      delivery_date: product.marketing_delivery_products?.delivery_date,
+    };
+  };
+
+  const formik = useFormik<MarketingFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
+      customer_id: initialValues?.customer?.id || undefined,
+      customer: {
+        value: initialValues?.customer?.id as number,
+        label: initialValues?.customer?.name as string,
+      },
+      marketing_products:
+        initialValues?.marketing_products?.map((product) =>
+          MarketingProductToFieldValues(product)
+        ) ?? [],
+    },
+    validationSchema: MarketingSchema,
+    onSubmit: async (values) => {
+      const payload = {
+        customer_id: values.customer_id as number,
+        date: values.so_date as string,
+        notes: values.notes as string,
+        marketing_products: values.marketing_products,
+      } as CreateMarketingPayload;
+      switch (formType) {
+        case 'add':
+          createMarketingHandler(payload);
+          break;
+        case 'edit':
+          updateMarketingHandler(payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }: { table: TanStack.Table<MarketingProduct> }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<MarketingProduct> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.marketing_delivery_products?.vehicle_number,
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.warehouse.name,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.product.name,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: TanStack.CellContext<MarketingProduct, unknown>) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() => handleDeleteProduct(props.row.original.id)}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [handleDeleteProduct] // dependensi tunggal
+  );
+
+  return (
+    <>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <FormHeader
+          title={`${formType === 'add' ? 'Tambah' : 'Edit'} Sales Order`}
+          backUrl='/marketing/sales-orders'
+        />
+        <Card
+          title='Informasi Order'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-3 mt-3'>
+            <SelectInput
+              label='Pelanggan'
+              options={customerOptions}
+              isLoading={isLoadingCustomerOptions}
+              value={selectedCustomer}
+              onChange={handleChangeCustomer}
+              isError={
+                formik.touched.customer_id && Boolean(formik.errors.customer_id)
+              }
+              errorMessage={formik.errors.customer_id}
+              isClearable
+              placeholder='Pilih Pelanggan'
+            />
+            <DateInput
+              name='so_date'
+              label='Tanggal'
+              value={formik.values.so_date}
+              onChange={formik.handleChange}
+              isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
+              errorMessage={formik.errors.so_date}
+              placeholder='Pilih Tanggal'
+            />
+          </div>
+        </Card>
+        <Card
+          title='Daftar Produk'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <Table<MarketingProduct>
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            data={marketingProducts}
+            columns={columns}
+            className={{
+              tableWrapperClassName: 'overflow-x-auto min-h-full!',
+              tableClassName: 'font-inter w-full table-auto  min-h-full!',
+              headerRowClassName: 'border-b border-b-gray-200',
+              headerColumnClassName:
+                'px-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-end',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div
+                className={cn(
+                  'w-full h-16 flex flex-col justify-center items-center gap-2'
+                )}
+              >
+                <span className='text-gray-500'>Belum ada data penjualan</span>
+              </div>
+            }
+          />
+          <div className='flex flex-row gap-3 mt-3'>
+            <Button
+              type='button'
+              variant='outline'
+              className='justify-start w-fit py-1 text-sm'
+              onClick={handleAddProduct}
+            >
+              <Icon icon='mdi:plus' width={16} height={16} />
+              Tambah Produk
+            </Button>
+            {selectedRowIds.length > 0 && (
+              <Button
+                type='button'
+                variant='outline'
+                color='error'
+                className='justify-start w-fit py-1 text-sm'
+                onClick={handleBulkDeleteProduct}
+              >
+                <Icon icon='mdi:trash' width={16} height={16} />
+                Hapus
+                {selectedRowIds.length > 0
+                  ? ` (${selectedRowIds.length})`
+                  : ''}{' '}
+                Produk
+              </Button>
+            )}
+          </div>
+        </Card>
+        <div className='grid grid-cols-2 gap-3'>
+          <TextArea
+            required
+            name='notes'
+            label='Catatan'
+            rows={3}
+            placeholder='Masukan catatan penjualan'
+            value={formik.values.notes}
+            onChange={formik.handleChange}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes}
+          />
+          <div className='flex flex-col h-full justify-between items-end py-6'>
+            <span>Total Penjualan</span>
+            <span className='text-lg font-semibold'>
+              {formatCurrency(grandTotal)}
+            </span>
+          </div>
+        </div>
+        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button type='button' color='error' onClick={handleDelete}>
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
+      <Modal
+        ref={addProductModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addProductModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MarketingProductForm
+              onSubmitForm={handleAddSubmitProduct}
+              modalRef={addProductModal.ref}
+              data={rawMarketingProducts}
+              initialValues={selectedMarketingProduct ?? undefined}
+            />
+          </div>
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesForm;

src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts

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

src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import TextInput from '@/components/input/TextInput';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { useFormik } from 'formik';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './MarketingProduct.schema';
+import { RefObject, use, useEffect, useRef, useState } from 'react';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { KandangApi } from '@/services/api/master-data';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { isResponseSuccess } from '@/lib/api-helper';
+import PatternInput from '@/components/input/PatternInput';
+import { formatVechicleNumber } from '@/lib/helper';
+
+const MarketingProductForm = ({
+  initialValues,
+  data,
+  modalRef,
+  onSubmitForm,
+}: {
+  initialValues?: MarketingProduct;
+  data: MarketingProduct[];
+  modalRef?: RefObject<HTMLDialogElement | null>;
+  onSubmitForm?: (
+    tableValues: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
+  ) => Promise<void>;
+}) => {
+  // State
+  const [selectedOptionsKandang, setSelectedOptionsKandang] =
+    useState<OptionType | null>(null);
+  const [selectedOptionsWarehouse, setSelectedOptionsWarehouse] = useState<
+    OptionType | null | undefined
+  >(undefined);
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Options Data
+  const {
+    options: kandangSourceOptions,
+    rawData: kandangSourceRawData,
+    isLoadingOptions: isLoadingKandangSourceOptions,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+  const {
+    options: warehouseSourceOptions,
+    rawData: warehouseSourceRawData,
+    isLoadingOptions: isLoadingWarehouseSourceOptions,
+  } = useSelect<ProductWarehouse>(
+    ProductWarehouseApi.basePath,
+    'id',
+    'product.name',
+    'search',
+    {
+      warehouse_id: selectedOptionsKandang?.value?.toString() ?? '',
+    }
+  );
+
+  // Handler
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsKandang(val as OptionType);
+    formik.setFieldValue('kandang', val as OptionType);
+    formik.setFieldValue('kandang_id', (val as OptionType)?.value);
+    formik.setFieldValue('product_warehouse_id', null);
+    formik.setFieldValue('qty', null);
+    warehouseChangeHandler(null);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsWarehouse(val as OptionType);
+    formik.setFieldValue('product_warehouse', val as OptionType);
+    formik.setFieldValue('product_warehouse_id', (val as OptionType)?.value);
+    if (isResponseSuccess(warehouseSourceRawData)) {
+      const productWarehouse = warehouseSourceRawData?.data.find(
+        (item: ProductWarehouse) => item.id === (val as OptionType)?.value
+      );
+      if (selectedOptionsWarehouse?.value !== null) {
+        formik.setFieldValue('qty', productWarehouse?.quantity);
+        handleBlurField('qty');
+      } else {
+        formik.setFieldValue('qty', null);
+      }
+    }
+  };
+
+  // Formik
+  const formik = useFormik<MarketingProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      vehicle_number:
+        initialValues?.marketing_delivery_products?.vehicle_number || undefined,
+      kandang_id: initialValues?.product_warehouse.warehouse.id || undefined,
+      kandang: {
+        value: initialValues?.product_warehouse.warehouse.id as number,
+        label: initialValues?.product_warehouse.warehouse.name as string,
+      },
+      product_warehouse: {
+        value: initialValues?.product_warehouse.product.id as number,
+        label: initialValues?.product_warehouse.product.name as string,
+      },
+      product_warehouse_id:
+        initialValues?.product_warehouse.product.id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      uom: initialValues?.product_warehouse?.product?.uom?.name || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+      delivery_date:
+        initialValues?.marketing_delivery_products?.delivery_date ||
+        new Date().toDateString() ||
+        undefined,
+    },
+    validationSchema: MarketingProductSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      if (
+        isResponseSuccess(kandangSourceRawData) &&
+        isResponseSuccess(warehouseSourceRawData)
+      ) {
+        const productWarehouse = warehouseSourceRawData?.data.find(
+          (item: ProductWarehouse) => item.id === values.product_warehouse_id
+        );
+        const kandang = kandangSourceRawData?.data.find(
+          (item: Kandang) => item.id === values.kandang_id
+        );
+
+        const marketingProduct: CreateMarketingProductPayload = {
+          id: initialValues?.id || undefined,
+          vehicle_number: formatVechicleNumber(values.vehicle_number as string),
+          kandang_id: values.kandang_id as number,
+          kandang: kandang,
+          product_warehouse_id: values.product_warehouse_id as number,
+          product_warehouse: productWarehouse,
+          unit_price: values.unit_price as number,
+          total_weight: values.total_weight as number,
+          qty: values.qty as number,
+          uom: values.uom as string,
+          avg_weight: values.avg_weight as number,
+          total_price: values.total_price as number,
+          delivery_date: values.delivery_date as string,
+        };
+
+        onSubmitForm?.(marketingProduct, values);
+        handleResetForm();
+      }
+    },
+  });
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  const handleResetForm = () => {
+    setSelectedOptionsKandang(null);
+    setSelectedOptionsWarehouse(null);
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        vehicle_number: '',
+        kandang_id: undefined,
+        kandang: null,
+        product_warehouse: null,
+        product_warehouse_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        uom: '',
+        avg_weight: '',
+        total_price: '',
+        delivery_date: new Date().toDateString(),
+      },
+    });
+  };
+
+  const handleBlurField = (field: string) => {
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && field === 'unit_price') {
+        formik.setFieldValue(
+          'total_price',
+          (qty as number) * (unit_price as number)
+        );
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue(
+          'unit_price',
+          (total_price as number) / (qty as number)
+        );
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && field === 'avg_weight') {
+        formik.setFieldValue(
+          'total_weight',
+          (qty as number) * (avg_weight as number)
+        );
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue(
+          'avg_weight',
+          (total_weight as number) / (qty as number)
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={formik.handleSubmit}
+        onReset={handleResetForm}
+      >
+        <div className='grid grid-cols-2 gap-4 z-200'>
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.vehicle_number &&
+              Boolean(formik.errors.vehicle_number)
+            }
+            errorMessage={formik.errors.vehicle_number}
+          />
+          <SelectInput
+            required
+            label='Kandang'
+            options={kandangSourceOptions}
+            isLoading={isLoadingKandangSourceOptions}
+            value={selectedOptionsKandang}
+            onChange={kandangChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            isError={
+              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+            }
+            errorMessage={formik.errors.kandang_id}
+            placeholder='Pilih Kandang'
+          />
+          <SelectInput
+            required
+            label='Produk'
+            options={warehouseSourceOptions}
+            isLoading={isLoadingWarehouseSourceOptions}
+            value={selectedOptionsWarehouse}
+            onChange={warehouseChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            placeholder='Pilih Kandang Terlebih Dahulu'
+            isDisabled={!selectedOptionsKandang?.value}
+            isError={
+              formik.touched.product_warehouse_id &&
+              Boolean(formik.errors.product_warehouse_id)
+            }
+            errorMessage={formik.errors.product_warehouse_id}
+          />
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('qty')}
+            isError={formik.touched.qty && Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={
+              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+            }
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={
+              formik.touched.unit_price && Boolean(formik.errors.unit_price)
+            }
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={
+              formik.touched.total_weight && Boolean(formik.errors.total_weight)
+            }
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_price')}
+            isError={
+              formik.touched.total_price && Boolean(formik.errors.total_price)
+            }
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning' onClick={handleResetForm}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default MarketingProductForm;

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

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

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

@@ -11,6 +11,10 @@ export const KandangFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
 
+  capacity: Yup.number()
+    .min(1, 'Kapasitas wajib diisi!')
+    .required('Kapasitas wajib diisi!'),
+
   picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
   pic: Yup.object({
     value: Yup.number().min(1).required(),

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

@@ -27,6 +27,7 @@ import {
 import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { UserApi } from '@/services/api/user';
+import NumberInput from '@/components/input/NumberInput';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -81,6 +82,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
             label: initialValues.location.name,
           }
         : null,
+      capacity: initialValues?.capacity ?? 0,
       picId: initialValues?.pic?.id ?? 0,
       pic: initialValues?.pic
         ? {
@@ -101,6 +103,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
       const kandangPayload: CreateKandangPayload = {
         name: values.name,
         location_id: values.locationId,
+        capacity: values.capacity,
         pic_id: values.picId,
       };
 
@@ -249,6 +252,20 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               isClearable
             />
 
+            <NumberInput
+              required
+              name='capacity'
+              label='Kapasitas'
+              value={formik.values.capacity ?? undefined}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.capacity && Boolean(formik.errors.capacity)
+              }
+              errorMessage={formik.errors.capacity as string}
+              readOnly={type === 'detail'}
+            />
+
             <SelectInput
               required
               label='PIC'

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

@@ -13,7 +13,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatNumber } from '@/lib/helper';
-import { ChickinApi } from '@/services/api/production';
+import { ChickinApi } from '@/services/api/production/chickin';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -87,7 +87,7 @@ const ChickinTable = () => {
         <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'>
             <Button
-              href='/production/chickin/add?projectFlockId=1'
+              href='/production/project-flock/chickin/add?projectFlockId=1'
               variant='outline'
               color='primary'
               className='w-full sm:w-fit'
@@ -260,14 +260,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm
+        {/* <ChickinForm
           initialValues={selectedChickin}
           formType='edit'
           afterSubmit={() => {
             refreshChickins();
             chickinModal.closeModal();
           }}
-        />
+        /> */}
       </Modal>
     </>
   );
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
+        href={`/production/project-flock/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'

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

@@ -1,13 +1,37 @@
 import * as Yup from 'yup';
 
-export const ChickinFormSchema = Yup.object({
+type ChickinRequestSchemaType = {
-  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+  chick_in_date: string;
-  note: Yup.string().required('Catatan wajib diisi!'),
+  note?: string | undefined | null;
-  quantity: Yup.number()
+  product_warehouse_id: number;
-    .min(1, 'Jumlah wajib diisi!')
+};
-    .required('Jumlah wajib diisi!'),
+
+type ChickinSchemaType = {
+  project_flock_kandang_id: number;
+  chickin_requests: ChickinRequestSchemaType[];
+};
+
+export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
+  Yup.object({
+    chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
+    note: Yup.string().nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
+  project_flock_kandang_id: Yup.number()
+    .min(1, 'Project Flock Kandang wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!'),
+  chickin_requests: Yup.array()
+    .of(ChickinRequestSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
 });
 
-export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
+export type ChickinRequestFormValues = Yup.InferType<
+  typeof ChickinRequestSchema
+>;
 
-export const UpdateChickinFormSchema = ChickinFormSchema;
+export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;

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

@@ -1,220 +1,145 @@
 'use client';
 
-import Button from '@/components/Button';
+import Card from '@/components/Card';
-import {
+import { FormHeader } from '@/components/helper/form/FormHeader';
-  Chickin,
+import Table from '@/components/Table';
-  CreateChickinPayload,
+import { formatNumber } from '@/lib/helper';
-  UpdateChickinPayload,
+import { Kandang } from '@/types/api/master-data/kandang';
-} from '@/types/api/production/chickin';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import {
+import Tabs from '@/components/Tabs';
-  ChickinFormSchema,
+import ChickinFormView from './tabs/ChickinFormView';
-  ChickinFormValues,
+import ChickinLogsView from './tabs/ChickLogsView';
-  UpdateChickinFormSchema,
+import { useState } from 'react';
-} from '@/components/pages/production/chickin/form/ChickinForm.schema';
+import ApprovalSteps, {
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
+  useApprovalSteps,
-import { useFormik } from 'formik';
+} from '@/components/pages/ApprovalSteps';
-import { ChickinApi } from '@/services/api/production';
+import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
-import DateInput from '@/components/input/DateInput';
+const ChickinFormKandang = ({
-import { isResponseError } from '@/lib/api-helper';
-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';
-  initialValues?: Chickin;
-  afterSubmit?: () => void;
-}
-
-const ChickinForm = ({
   formType = 'add',
   initialValues,
   afterSubmit,
-}: ChickinFormProps) => {
+}: {
-  // Helper Function
+  formType?: 'add' | 'detail' | 'edit';
-  const formatDateForInput = (dateString?: string): string => {
+  initialValues: ProjectFlockKandang;
-    if (!dateString) return '';
+  afterSubmit?: () => void;
-    return new Date(dateString).toISOString().split('T')[0];
+}) => {
-  };
+  const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
 
-  // State
+  const {
-  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
+    approvals,
-
+    isLoading: approvalsLoading,
-  // Initial Value
+    refresh: refreshApprovals,
-  const formikInitialValue = useMemo<ChickinFormValues>(() => {
+  } = useApprovalSteps({
-    return {
+    latestApproval: initialValues?.approval,
-      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
+    approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE,
-      note: initialValues?.note ?? '',
+    moduleName: 'PROJECT_FLOCK_KANDANGS',
-      quantity:
+    moduleId: initialValues?.id.toString() ?? '',
-        initialValues?.quantity ??
-        initialValues?.project_flock_kandang?.available_quantity ??
-        0,
-    };
-  }, [initialValues]);
-
-  // Handle Submit Function
-  const handleCreate = useCallback(
-    async (
-      payload: CreateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.create(payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-  const handleUpdate = useCallback(
-    async (
-      payload: UpdateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.update(payload.id, payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-
-  // Formik
-  const formik = useFormik<ChickinFormValues>({
-    initialValues: formikInitialValue,
-    enableReinitialize: true,
-    validationSchema:
-      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
-    onSubmit: async (values) => {
-      // reset error message
-      setChickinFormErrorMessage('');
-
-      if (
-        initialValues?.project_flock_kandang?.id == undefined ||
-        (formType == 'edit' && initialValues?.id == undefined)
-      ) {
-        return;
-      }
-
-      // create payload
-      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);
-          break;
-        case 'edit':
-          handleUpdate(payload, afterSubmit);
-          break;
-        default:
-          break;
-      }
-    },
   });
 
-  // Initialize Formik
+  const afterSubmitFormChickin = () => {
-  const { setValues: formikSetValues } = formik;
+    setActiveTabId('logsChickIn');
-  useEffect(() => {
+    afterSubmit && afterSubmit();
-    formikSetValues(formikInitialValue);
+    refreshApprovals();
-  }, [formikSetValues, formikInitialValue]);
+  };
 
   return (
-    <>
+    <div className='flex flex-col gap-4'>
-      <form
+      <FormHeader
-        className='min-h-48 flex flex-col gap-4'
+        title='Chick In DOC'
-        onSubmit={formik.handleSubmit}
+        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
-        onReset={formik.handleReset}
+      />
+
+      {approvals && !approvalsLoading && (
+        <ApprovalSteps approvals={approvals} />
+      )}
+
+      <Card
+        title='Informasi Kandang'
+        className={{
+          wrapper: 'w-full bg-white mt-4',
+        }}
       >
-        <DateInput
+        <Table<Kandang>
-          value={formik.values.chick_in_date}
+          emptyContent={
-          onChange={formik.handleChange}
+            <div className='w-full p-5 text-center'>
-          onBlur={formik.handleBlur}
+              <span className='text-lg opacity-50'>
-          name='chick_in_date'
+                Informasi Kandang belum tersedia...
-          label='Tanggal Chickin'
+              </span>
-          required
+            </div>
-          isError={
-            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
           }
-          errorMessage={formik.errors.chick_in_date}
+          data={[initialValues?.kandang]}
+          columns={[
+            {
+              header: 'Area',
+              accessorFn: () => initialValues?.project_flock?.area.name || '-',
+            },
+            {
+              header: 'Lokasi',
+              accessorFn: () =>
+                initialValues?.project_flock?.location.name || '-',
+            },
+            {
+              header: 'Flock',
+              accessorFn: () => initialValues?.project_flock?.flock_name || '-',
+            },
+            {
+              header: 'Kandang',
+              accessorFn: (row) => row?.name || '-',
+            },
+            {
+              header: 'Kapasitas',
+              accessorFn: (row) =>
+                (row?.capacity && formatNumber(row?.capacity)) || '-',
+            },
+            {
+              header: 'Penanggung Jawab',
+              accessorFn: (row) => row?.pic?.name || '-',
+            },
+          ]}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
         />
-        <NumberInput
+      </Card>
-          value={formik.values.quantity}
+      <Tabs
-          onChange={formik.handleChange}
+        className='bg-white p-2'
-          onBlur={formik.handleBlur}
+        onTabChange={setActiveTabId}
-          name='quantity'
+        activeTabId={activeTabId}
-          label='Jumlah (Ekor)'
+        tabs={[
-          required
+          {
-          isError={
+            id: 'formChickIn',
-            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
+            label: 'Tambah Chick In',
-            formik.values.quantity == 0
+            content: (
-          }
+              <ChickinFormView
-          errorMessage={
+                initialValues={initialValues}
-            formik.values.quantity == 0
+                formType={formType}
-              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
+                afterSubmit={afterSubmitFormChickin}
-              : formik.errors.quantity
+              />
-          }
+            ),
-          readOnly
+          },
-        />
+          {
-        <TextArea
+            content: (
-          required
+              <ChickinLogsView
-          label='Catatan'
+                initialValues={initialValues}
-          name='note'
+                afterSubmit={afterSubmitFormChickin}
-          placeholder='Masukan catatan chickin'
+              />
-          value={formik.values.note}
+            ),
-          onChange={formik.handleChange}
+            id: 'logsChickIn',
-          onBlur={formik.handleBlur}
+            label: 'Riwayat Chick In',
-          isError={formik.touched.note && Boolean(formik.errors.note)}
+          },
-          errorMessage={formik.errors.note}
+        ]}
-        />
+        variant='lifted'
-        {initialValues?.project_flock_kandang?.id == undefined && (
+      />
-          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
+    </div>
-        )}
-        {chickinFormErrorMessage && (
-          <div
-            role='alert'
-            className='alert alert-error'
-            onClick={() => {
-              setChickinFormErrorMessage('');
-            }}
-          >
-            <Icon icon='mdi:times' />
-            <span>{chickinFormErrorMessage}</span>
-          </div>
-        )}
-        <div className='flex justify-center mt-auto gap-2'>
-          <Button color='warning' type='reset'>
-            Reset
-          </Button>
-          <Button
-            type='submit'
-            isLoading={formik.isSubmitting}
-            disabled={
-              !formik.isValid ||
-              formik.isSubmitting ||
-              !initialValues?.project_flock_kandang?.id
-            }
-          >
-            Submit
-          </Button>
-        </div>
-      </form>
-    </>
   );
 };
 
-export default ChickinForm;
+export default ChickinFormKandang;

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

@@ -0,0 +1,172 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production/chickin';
+import {
+  Chickin,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const ChickinLogsView = ({
+  initialValues,
+  afterSubmit,
+}: {
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const confirmModal = useModal();
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const handleClickApprove = () => {
+    confirmModal.openModal();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setChickinErrorMessage('');
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.singleApproval(
+      initialValues?.id as number,
+      'APPROVED'
+    );
+    if (isResponseSuccess(approveChickinRes)) {
+      toast.success(approveChickinRes?.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+      setChickinErrorMessage(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+    afterSubmit && afterSubmit();
+  };
+
+  return (
+    <>
+      <Card
+        title='Riwayat Chick In'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <div className='flex flex-row justify-start gap-3 mt-3'>
+          {initialValues?.approval?.step_number == 1 && (
+            <Button
+              color='success'
+              variant='outline'
+              onClick={handleClickApprove}
+            >
+              <Icon width={24} height={24} icon='material-symbols:check' />
+              Approve
+            </Button>
+          )}
+        </div>
+        <Table<Chickin>
+          data={initialValues?.chickins || []}
+          columns={[
+            {
+              header: '#',
+              cell: (props) => props.row.index + 1,
+            },
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell: (props) => {
+                return formatDate(props.getValue() as string, 'DD MMM YYYY');
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.warehouse?.name,
+              header: 'Kandang',
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.product?.name,
+              header: 'Produk',
+            },
+            {
+              accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
+              header: 'Jumlah Chick In',
+              cell: (props) => {
+                if (props.row.original.usage_qty != 0) {
+                  return formatNumber(props.row.original.usage_qty);
+                } else if (props.row.original.pending_usage_qty != 0) {
+                  return formatNumber(props.row.original.pending_usage_qty);
+                } else {
+                  return '-';
+                }
+              },
+            },
+            {
+              accessorFn: (row) => row.pending_usage_qty,
+              header: 'Status',
+              cell: (props) => {
+                return (
+                  <PillBadge
+                    content={
+                      props.row.original.usage_qty !== 0
+                        ? 'Disetujui'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'Pending'
+                          : '-'
+                    }
+                    color={
+                      props.row.original.usage_qty !== 0
+                        ? 'green'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'yellow'
+                          : 'gray'
+                    }
+                  />
+                );
+              },
+            },
+          ]}
+          className={{
+            containerClassName: cn({
+              'mb-20': initialValues?.chickins?.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',
+          }}
+        />
+        {chickinErrorMessage && (
+          <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+            <Alert color='error'>{chickinErrorMessage}</Alert>
+          </div>
+        )}
+      </Card>
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data Chickin yang Pending?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalApproveClickHandler,
+          isLoading: isApproveLoading,
+        }}
+      />
+    </>
+  );
+};
+
+export default ChickinLogsView;

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

@@ -0,0 +1,233 @@
+'use client';
+
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from '../ChickinForm.schema';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import { flushSync } from 'react-dom';
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production/chickin';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { useRouter } from 'next/navigation';
+import Alert from '@/components/Alert';
+import { formatNumber } from '@/lib/helper';
+
+const ChickinFormView = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      // router.push(
+      //   `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      // );
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+    [router]
+  );
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
+  return (
+    <form
+      className='flex flex-col gap-4'
+      onReset={(e) => {
+        handleReset();
+      }}
+      onSubmit={formik.handleSubmit}
+    >
+      <Card
+        title='Informasi Chick In DOC'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ChickinRequestFormValues>
+          data={formik.values.chickin_requests || []}
+          columns={[
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell(props) {
+                return (
+                  <DateInput
+                    className={{
+                      wrapper: 'w-fit',
+                      inputWrapper: 'bg-white',
+                    }}
+                    name={`chickin_requests[${props.row.index}].chick_in_date`}
+                    value={
+                      formik.values.chickin_requests[props.row.index]
+                        ?.chick_in_date as string
+                    }
+                    onChange={formik.handleChange}
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Produk',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <div>{availableQty?.product_warehouse?.product?.name}</div>
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Jumlah (ekor)',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <div>
+                    {availableQty?.available_qty
+                      ? formatNumber(availableQty?.available_qty)
+                      : '-'}
+                  </div>
+                );
+              },
+            },
+          ]}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-2 py-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-2 py-2 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Isi persediaan DOC untuk kandang belum tersedia...
+              </span>
+            </div>
+          }
+        />
+      </Card>
+      <div className='flex flex-row justify-center gap-3'>
+        <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+          Reset
+        </Button>
+        <Button
+          type='submit'
+          color='primary'
+          disabled={!formik.isValid || formik.isSubmitting}
+        >
+          Submit
+        </Button>
+      </div>
+      {chickinErrorMessage && (
+        <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+          <Alert color='error'>{chickinErrorMessage}</Alert>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default ChickinFormView;

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

@@ -9,12 +9,11 @@ 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';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
@@ -38,53 +37,63 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <RowOptionsMenuWrapper type={type}>
+    <div
-      <Button
+      tabIndex={type == 'dropdown' ? 0 : undefined}
-        href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
+      className={cn(
-        variant='ghost'
+        {
-        color='primary'
+          'dropdown-content': type === 'dropdown',
-        className='justify-start text-sm'
+          'mt-2': type === 'collapse',
-      >
+        },
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-        Detail
+      )}
-      </Button>
+    >
-      {props.row.original.approval.step_name === 'Aktif' && (
+      <div className='flex flex-col gap-1'>
         <Button
-          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
           variant='ghost'
-          color='success'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='mdi:home-import-outline' width={16} height={16} />
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Chickin
+          Detail
         </Button>
-      )}
+        {props.row.original.approval.step_name === 'Aktif' && (
-      {props.row.original.approval.step_name === 'Pengajuan' && (
+          <Button
+            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:home-import-outline' width={16} height={16} />
+            Chickin
+          </Button>
+        )}
+        {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
-          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          onClick={deleteClickHandler}
           variant='ghost'
-          color='warning'
+          color='error'
-          className='justify-start text-sm'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
-          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          <Icon
-          Edit
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+          />
+          Delete
         </Button>
-      )}
+      </div>
-      <Button
+    </div>
-        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>
   );
 };
 
@@ -417,7 +426,7 @@ const ProjectFlockTable = () => {
               },
 
               {
-                accessorKey: 'flock.name',
+                accessorKey: 'flock_name',
                 header: 'Flock',
               },
               {
@@ -564,19 +573,7 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        text={`Apakah anda yakin ingin approve data Project Flock 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/chickin/ProjectFlockChickinDetail.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+const ProjectFlockChickinDetail = ({
+  projectFlockId,
+}: {
+  projectFlockId: number | undefined;
+}) => {
+  const router = useRouter();
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
+
+  // Fetch Data
+  const {
+    data: listProjectFlockKandang,
+    isLoading: isLoadingListProjectFlockKandang,
+  } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );
+
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    '',
+    {
+      search: searchProjectFlock,
+    }
+  );
+
+  // Handle Function
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
+    router.push(
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+    );
+  };
+
+  const handleChangeProjectFlock = (val: OptionType | null) => {
+    setSelectedProjectFlock(val);
+    if (isResponseSuccess(listProjectFlock) && val) {
+      const selected = listProjectFlock.data.find(
+        (pf) => pf.id === Number(val.value)
+      );
+      setProjectFlock(selected);
+    } else {
+      setProjectFlock(undefined);
+    }
+    if (projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+    if (!val && projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+  };
+
+  useEffect(() => {
+    if (projectFlockId && isResponseSuccess(listProjectFlock)) {
+      setProjectFlock(
+        listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
+      );
+    }
+  }, [projectFlockId, listProjectFlock]);
+  return (
+    <>
+      <div className='flex flex-col gap-4 w-full my-4'>
+        <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+          <SelectInput
+            required
+            label='Ganti Project Flock'
+            placeholder='Pilih Project Flock'
+            options={options}
+            onInputChange={(val) => {
+              setSearchProjectFlock(val);
+            }}
+            isLoading={isLoadingListProjectFlock}
+            value={
+              projectFlock
+                ? {
+                    label: `${projectFlock?.flock?.name}`,
+                    value: projectFlock?.id,
+                  }
+                : null
+            }
+            onChange={(val) => {
+              handleChangeProjectFlock(val as OptionType | null);
+            }}
+            isSearchable
+            isClearable
+            startAdornment={
+              projectFlock && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{
+                    badge: 'whitespace-nowrap font-semibold',
+                  }}
+                >
+                  Periode {projectFlock?.period}
+                </Badge>
+              )
+            }
+          />
+        </div>
+      </div>
+      <Card
+        title='Informasi Flock'
+        className={{
+          wrapper: 'w-full bg-white mb-3',
+        }}
+      >
+        <Table<ProjectFlock>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={projectFlock ? [projectFlock] : []}
+          columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
+            {
+              header: 'Area',
+              accessorKey: 'area.name',
+            },
+            {
+              header: 'Lokasi',
+              accessorKey: 'location.name',
+            },
+            {
+              header: 'Nama Flock',
+              accessorKey: 'flock.name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'category',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'AKTIF':
+                          return 'red';
+                        case 'PENGAJUAN':
+                          return 'green';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  '-'
+                );
+              },
+            },
+            {
+              header: 'Periode',
+              accessorKey: 'period',
+            },
+            {
+              header: 'FCR Layer',
+              accessorKey: 'fcr.name',
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+      <Card
+        title='Daftar Kandang'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ProjectFlockKandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={
+            projectFlock && isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
+          columns={[
+            {
+              header: '#',
+              cell: (props) =>
+                tableFilterState.pageSize * (tableFilterState.page - 1) +
+                props.row.index +
+                1,
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.area?.name,
+              header: 'Area',
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.location?.name,
+              header: 'Lokasi',
+            },
+            {
+              accessorKey: 'kandang.name',
+              header: 'Kandang',
+            },
+            {
+              accessorKey: 'kandang.capacity',
+              header: 'Kapasitas',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'PENGAJUAN':
+                          return 'yellow';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : projectFlock?.approval?.step_number === 1 ? (
+                  <PillBadge color='red' content={'Tidak Dapat Chick In'} />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                return (
+                  <>
+                    <Button
+                      color='success'
+                      variant='outline'
+                      onClick={() => {
+                        handleChickinClick(props.row.original);
+                      }}
+                      className='p-1'
+                      disabled={projectFlock?.approval?.step_number === 1}
+                    >
+                      <Icon
+                        icon='mdi:home-import-outline'
+                        width={18}
+                        height={18}
+                      />
+                      Chickin
+                    </Button>
+                  </>
+                );
+              },
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default ProjectFlockChickinDetail;

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

@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.number().required('ID Flock wajib diisi!'),
     label: Yup.string().required('Nama Flock wajib diisi!'),
   }).nullable(),
-  flock_id: Yup.number()
+  flock_name: Yup.string().required('Nama Flock wajib diisi!'),
-    .min(1, 'Flock wajib diisi!')
-    .required('Flock wajib diisi!'),
 
   // Area
   area: Yup.object({

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

@@ -1,7 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   AreaApi,
@@ -23,19 +26,22 @@ import {
 import {
   ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
-  PeriodFlock,
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
 import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 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';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -52,22 +58,21 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
-
   const [selectedLocation, setSelectedLocation] = useState('');
-  const [disabledLocation, setDisabledLocation] = useState(true);
+  const [disabledLocation, setDisabledLocation] = useState(
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
+    initialValues?.location?.id ? false : true
-
+  );
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-
+  const [selectedFlock, setSelectedFlock] = useState<number | undefined>(
-  const [selectedFlock, setSelectedFlock] = useState<number>(
     initialValues?.flock?.id ?? 0
   );
 
@@ -77,7 +82,7 @@ const ProjectFlockForm = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isApprovedDisabled, setIsApprovedDisabled] = useState(
-    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+    initialValues?.approval?.step_name == 'Pengajuan' ? false : true
   );
   const [isRejectedDisabled, setIsRejectedDisabled] =
     useState(!isApprovedDisabled);
@@ -105,37 +110,27 @@ const ProjectFlockForm = ({
   }, [initialValues]);
 
   // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
+  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
-    search: '',
+    useSelect(FlockApi.basePath, 'id', 'name');
-  }).toString()}`;
+
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
+  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
-    flockUrl,
+    AreaApi.basePath,
-    FlockApi.getAllFetcher
+    'id',
+    'name'
   );
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
-    search: '',
+    useSelect(LocationApi.basePath, 'id', 'name', '', {
-  }).toString()}`;
+      area_id:
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+        selectedArea != ''
-    areaUrl,
+          ? selectedArea
-    AreaApi.getAllFetcher
+          : ((initialValues?.area?.id ?? '') as string),
-  );
+    });
 
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
-    search: '',
+    FcrApi.basePath,
-    area_id: selectedArea,
+    'id',
-  }).toString()}`;
+    'name'
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
   );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -148,46 +143,22 @@ const ProjectFlockForm = ({
     mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
-  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
-
   const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    getPeriodFlocksUrl,
+    `${selectedFlock?.toString()}/periods`,
-    () =>
+    (id: string) => ProjectFlockApi.getNextPeriod(id)
-      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
-        getPeriodFlocksUrl,
-        { method: 'GET' }
-      )
   );
 
-  // Map Data to Options
+  const {
-  const optionsArea = isResponseSuccess(areas)
+    approvals,
-    ? areas?.data.map((area) => ({
+    isLoading: approvalsLoading,
-        value: area.id,
+    rawDataApprovals: rawDataApprovals,
-        label: area.name,
+    refresh: refreshApprovals,
-      }))
+  } = useApprovalSteps({
-    : [];
+    latestApproval: initialValues?.approval,
-  const optionsFcr = isResponseSuccess(fcrs)
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
-    ? fcrs?.data.map((fcr) => ({
+    moduleName: 'PROJECT_FLOCKS',
-        value: fcr.id,
+    moduleId: initialValues?.id.toString() ?? '',
-        label: fcr.name,
+  });
-      }))
-    : [];
-  const optionsFlock = isResponseSuccess(flocks)
-    ? flocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.name,
-      }))
-    : [];
-
-  useEffect(() => {
-    if (isResponseSuccess(locations)) {
-      const options = locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }));
-      setOptionsLocation(options);
-    }
-  }, [locations, setSelectedLocation]);
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
@@ -195,12 +166,24 @@ const ProjectFlockForm = ({
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
       } else {
+        formik.setFieldValue('kandang_ids', []);
         setOptionsKandang([]);
         setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
+        const selectedRowIds = Object.keys(rowSelection)
+          .filter((id) => rowSelection[id])
+          .map((id) => parseInt(id));
+        if (
+          JSON.stringify(kandang.data.map((k) => k.id)) !==
+          JSON.stringify(formik.values.kandang_ids)
+        ) {
+          formik.setFieldValue('kandang_ids', []);
+          setRowSelection({});
+        } else {
+          formik.setFieldValue('kandang_ids', selectedRowIds);
+        }
       }
     }
-  }, [kandang]);
+  }, [kandang, selectedLocation]);
   useEffect(() => {
     if (initialValues?.kandangs) {
       refreshKandang();
@@ -211,7 +194,7 @@ const ProjectFlockForm = ({
       );
       setRowSelection(newRowSelection);
     }
-  }, [initialValues, refreshKandang]);
+  }, [initialValues, kandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -232,9 +215,13 @@ const ProjectFlockForm = ({
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang_ids', []);
     setSelectedLocation((val as OptionType)?.value as string);
     optionChangeHandler(val, 'location');
-    formik.setFieldValue('kandang_ids', []);
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formik.setFieldValue('kandang_ids', selectedRowIds);
   };
 
   const optionChangeHandler = (
@@ -292,16 +279,17 @@ const ProjectFlockForm = ({
   // Formik InitialValue
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     return {
-      name: initialValues?.name ?? '',
+      name: initialValues?.flock_name,
       flock: initialValues?.flock
         ? {
-            value: initialValues.flock.id,
+            value: initialValues?.flock?.id ?? 0,
-            label: initialValues.flock.name,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
           }
         : null,
       area: initialValues?.area
         ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
             label: initialValues.area.name,
           }
         : null,
@@ -313,24 +301,25 @@ const ProjectFlockForm = ({
         : null,
       fcr: initialValues?.fcr
         ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
             label: initialValues.fcr.name,
           }
         : null,
       location: initialValues?.location
         ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
             label: initialValues.location.name,
           }
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
       area_id: initialValues?.area?.id ?? 0,
       category: initialValues?.category as NonNullable<
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
+      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
@@ -340,7 +329,53 @@ const ProjectFlockForm = ({
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
-    initialValues: formikInitialValues,
+    initialValues: {
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
+        ? {
+            value: initialValues?.flock?.id ?? 0,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area?.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      category_option: initialValues?.category
+        ? {
+            value: initialValues.category,
+            label: initialValues.category,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr?.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            value: initialValues.location?.id,
+            label: initialValues.location.name,
+          }
+        : null,
+      flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
+      area_id: initialValues?.area?.id ?? 0,
+      category: initialValues?.category as NonNullable<
+        'GROWING' | 'LAYING' | undefined
+      >,
+      fcr_id: initialValues?.fcr?.id ?? 0,
+      location_id: initialValues?.location?.id ?? 0,
+      period: initialValues?.period ?? 1,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
+    } as ProjectFlockFormValues,
     enableReinitialize: true,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
@@ -350,7 +385,7 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock?.label as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
@@ -377,8 +412,8 @@ const ProjectFlockForm = ({
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues?.area.id,
+        value: initialValues?.area?.id,
-        label: initialValues?.area.name,
+        label: initialValues?.area?.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
       if (initialValues?.area_id) {
@@ -391,7 +426,7 @@ const ProjectFlockForm = ({
 
   useEffect(() => {
     formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+  }, [formikSetValues]);
 
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
@@ -402,9 +437,11 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType != 'add' && initialValues?.location?.id) {
+    if (formType != 'add') {
-      setSelectedLocation(initialValues.location?.id.toString());
+      if (initialValues?.location?.id) {
-      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
     }
   }, [formType, initialValues]);
 
@@ -416,6 +453,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
+    if (isResponseError(periodFlocks)) {
+      console.log(periodFlocks?.message as string);
+    }
   }, [periodFlocks]);
 
   useEffect(() => {
@@ -459,7 +499,7 @@ const ProjectFlockForm = ({
       method: 'POST',
       payload: {
         action: action,
-        approvable_ids: [initialValues.id],
+        approvable_ids: [initialValues?.id],
       },
     });
 
@@ -467,19 +507,12 @@ const ProjectFlockForm = ({
       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);
     }
+    refreshApprovals();
     confirmModal.closeModal();
     setIsApproveLoading(false);
   };
@@ -522,6 +555,9 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        {approvals && !approvalsLoading && (
+          <ApprovalSteps approvals={approvals} />
+        )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
@@ -554,6 +590,21 @@ const ProjectFlockForm = ({
               <Icon icon='mdi:times' width={24} height={24} />
               Reject
             </Button>
+            {initialValues?.approval?.step_number == 2 && (
+              <Button
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/chickin/add?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+              >
+                <Icon icon='mdi:home-import-outline' width={18} height={18} />
+                Chickin
+              </Button>
+            )}
           </div>
         )}
         <form
@@ -587,13 +638,18 @@ const ProjectFlockForm = ({
                   onChange={(val) => {
                     optionChangeHandler(val, 'flock');
                     setSelectedFlock((val as OptionType)?.value as number);
+                    formik.setFieldValue(
+                      'flock_name',
+                      (val as OptionType)?.label
+                    );
                   }}
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
                   isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
                   }
-                  errorMessage={formik.errors.flock_id as string}
+                  errorMessage={formik.errors.flock_name as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -602,7 +658,11 @@ const ProjectFlockForm = ({
                   label='Lokasi'
                   value={formik.values.location as OptionType}
                   onChange={locationChangeHandler}
-                  options={optionsLocation}
+                  options={
+                    selectedArea != '' || initialValues?.area?.id
+                      ? optionsLocation
+                      : []
+                  }
                   isLoading={isLoadingLocations}
                   isError={
                     formik.touched.location_id &&
@@ -647,7 +707,7 @@ const ProjectFlockForm = ({
                   name='period'
                   label='Periode'
                   placeholder='Masukkan periode yang project'
-                  value={formik.values.period as number}
+                  value={formik.values.period ?? (1 as number)}
                   onChange={formik.handleChange}
                   isError={
                     formik.touched.period && Boolean(formik.errors.period)
@@ -695,6 +755,7 @@ const ProjectFlockForm = ({
                     setRowSelection={setRowSelection}
                     selectedIds={formik.values.kandang_ids}
                     formType={formType}
+                    initialValues={initialValues?.kandangs ?? []}
                   />
                 </div>
               </Collapse>
@@ -716,7 +777,10 @@ const ProjectFlockForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={
+                    !formik.isValid || formik.isSubmitting
+                    // TODO: Add logic && ketika nilai kandang_ids sudah beda dari initial values
+                  }
                   className='px-4'
                 >
                   Submit
@@ -726,7 +790,25 @@ const ProjectFlockForm = ({
           </div>
         </form>
         {formType != 'add' && (
-          <div className='w-full'>
+          <div className='flex flex-row gap-2 mb-6'>
+            {formType != 'edit' && (
+              <Button
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/detail/edit?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+                color='warning'
+              >
+                <Icon
+                  icon='mdi:pencil-outline'
+                  width={16}
+                  height={16}
+                  className='justify-start text-sm'
+                />
+                Edit
+              </Button>
+            )}
             <Button
               onClick={() => {
                 if (initialValues?.id) {

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

@@ -5,144 +5,158 @@ 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';
+import { OnChangeFn, Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
 
 const ProjectFlockKandangTable = ({
   listKandang,
   rowSelection,
   setRowSelection,
   selectedIds,
+  initialValues,
   formType = 'add',
 }: {
   listKandang: Kandang[];
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
   selectedIds: (number | undefined)[];
+  initialValues?: Kandang[];
   formType: 'add' | 'edit' | 'detail';
 }) => {
-  console.log('selectedIds');
+  const initialKandangIdSet = useMemo(() => {
-  console.log(selectedIds);
+    return initialValues?.map((k) => k.id) ?? [];
+  }, [initialValues]);
+  const isRowEnabled = (row: Row<Kandang>) => {
+    const isDisabled =
+      !initialKandangIdSet.includes(row.original.id) &&
+      (row.original.status == 'ACTIVE' ||
+        row.original.status == 'PENGAJUAN' ||
+        formType == 'detail');
+    return !isDisabled;
+  };
   return (
-    <Table<Kandang>
+    <>
-      data={listKandang}
+      <Table<Kandang>
-      columns={[
+        data={listKandang}
-        {
+        columns={[
-          id: 'select',
+          {
-          header: ({ table }) => {
+            id: 'select',
-            const allRows = table.getRowModel().rows;
+            header: ({ table }) => {
-            const selectableRows = allRows.filter(
+              const allRows = table.getRowModel().rows;
-              (row) =>
+              // 1. Filter semua baris dengan logika yang sama persis seperti di cell
-                row.original.status == 'NON_ACTIVE' ||
+              const selectableRows = allRows.filter(isRowEnabled);
-                row.original.status == 'PENGAJUAN'
-            );
 
-            const allSelected =
+              // 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
-              selectableRows.every((row) => row.getIsSelected()) &&
+              const allSelected =
-              selectableRows.length != 0 &&
+                selectableRows.length > 0 &&
-              formType != 'detail';
+                selectableRows.every((row) => row.getIsSelected());
 
-            const someSelected =
+              // 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
-              selectableRows.some((row) => row.getIsSelected()) &&
+              const someSelected =
-              !allSelected &&
+                selectableRows.some((row) => row.getIsSelected()) &&
-              formType != 'detail';
+                !allSelected;
 
-            const toggleSelectableRows = () => {
+              // 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
-              const shouldSelect = !allSelected;
+              const toggleSelectableRows = () => {
-              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+                const shouldSelect = !allSelected;
-            };
+                selectableRows.forEach((row) =>
+                  row.toggleSelected(shouldSelect)
+                );
+              };
 
-            return (
+              return (
-              <div className='w-full flex flex-row justify-center'>
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={toggleSelectableRows}
+                    disabled={
+                      selectableRows.length === 0 || formType == 'detail'
+                    }
+                  />
+                </div>
+              );
+            },
+            cell: ({ row }) => {
+              return (
                 <CheckboxInput
-                  name='allRow'
+                  name='row'
-                  checked={allSelected}
+                  checked={
-                  indeterminate={someSelected}
+                    (row.getIsSelected() &&
-                  onChange={toggleSelectableRows}
+                      (row.original.status == 'NON_ACTIVE' ||
+                        row.original.status == 'PENGAJUAN')) ||
+                    (selectedIds && selectedIds.includes(row.original.id))
+                  }
                   disabled={
-                    listKandang.filter(
+                    formType == 'detail' ||
-                      (kandang) =>
+                    (!initialKandangIdSet.includes(row.original.id) &&
-                        kandang.status == 'NON_ACTIVE' ||
+                      (row.original.status == 'ACTIVE' ||
-                        kandang.status == 'PENGAJUAN'
+                        row.original.status == 'PENGAJUAN'))
-                    ).length == 0 || formType == 'detail'
                   }
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
                 />
-              </div>
+              );
-            );
+            },
           },
-          cell: ({ row }) => {
+          {
-            return (
+            accessorFn: (row) => row.name,
-              <CheckboxInput
+            header: 'Kandang',
-                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.status,
-          accessorFn: (row) => row.name,
+            header: 'Status',
-          header: 'Kandang',
+            cell: (props) => {
-        },
+              return (
-        {
+                <PillBadge
-          accessorFn: (row) => row.status,
+                  color={(() => {
-          header: 'Status',
+                    switch (props.row.original.status) {
-          cell: (props) => {
+                      case 'ACTIVE':
-            return (
+                        return 'red';
-              <PillBadge
+                      case 'PENGAJUAN':
-                color={(() => {
+                        return 'green';
-                  switch (props.row.original.status) {
+                      case 'NON_ACTIVE':
-                    case 'ACTIVE':
+                        return 'blue';
-                      return 'red';
+                      default:
-                    case 'PENGAJUAN':
+                        return 'gray';
-                      return 'green';
+                    }
-                    case 'NON_ACTIVE':
+                  })()}
-                      return 'blue';
+                  content={props.row.original.status
-                    default:
+                    .toLowerCase()
-                      return 'gray';
+                    .replace(/_/g, ' ')
-                  }
+                    .replace(/\b\w/g, (char) => char.toUpperCase())}
-                })()}
+                />
-                content={props.row.original.status
+              );
-                  .toLowerCase()
+            },
-                  .replace(/_/g, ' ')
-                  .replace(/\b\w/g, (char) => char.toUpperCase())}
-              />
-            );
           },
-        },
+          {
-        {
+            accessorFn: (row) => row.capacity,
-          accessorFn: (row) => row.pic?.name,
+            header: 'Kapasitas',
-          header: 'Penanggung Jawab',
+          },
-        },
+          {
-      ]}
+            accessorFn: (row) => row.pic?.name,
-      className={{
+            header: 'Penanggung Jawab',
-        containerClassName: cn({
+          },
-          'mb-20': listKandang?.length === 0,
+        ]}
-        }),
+        className={{
-        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          containerClassName: cn({
-        tableClassName: 'font-inter w-full table-auto min-h-full!',
+            'mb-20': listKandang?.length === 0,
-        headerRowClassName: 'border-b border-b-gray-200',
+          }),
-        headerColumnClassName:
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
-        bodyRowClassName: 'border-b border-b-gray-200',
+          headerRowClassName: 'border-b border-b-gray-200',
-        bodyColumnClassName:
+          headerColumnClassName:
-          'px-6 py-3 last:flex last:flex-row last:justify-end',
+            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-        paginationClassName: 'hidden',
+          bodyRowClassName: 'border-b border-b-gray-200',
-      }}
+          bodyColumnClassName:
-      rowSelection={rowSelection}
+            'px-6 py-3 last:flex last:flex-row last:justify-end',
-      setRowSelection={setRowSelection}
+          paginationClassName: 'hidden',
-    />
+        }}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+      />
+    </>
   );
 };
 

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

@@ -53,6 +53,7 @@ const dummyRecordings: Recording[] = [
     },
     coop: {
       id: 1,
+      capacity: 1000,
       name: 'Coop 1',
       status: 'ACTIVE',
       location: {

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

@@ -22,7 +22,7 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
@@ -215,7 +215,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const flockOptions = isResponseSuccess(projectFlocks)
     ? projectFlocks.data.map((flock) => ({
         value: flock.id,
-        label: flock.flock.name,
+        label: flock.flock?.name || '',
       }))
     : [];
 

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

@@ -2,7 +2,12 @@
 
 import { ChangeEventHandler, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
@@ -20,6 +25,7 @@ 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 ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 
 import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
@@ -29,6 +35,7 @@ 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';
+import PillBadge from '@/components/PillBadge';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -43,6 +50,16 @@ const RowOptionsMenu = ({
   rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
+  const showEditButton =
+    props.row.original.approval.action !== 'APPROVED' &&
+    props.row.original.approval.action !== 'REJECTED';
+
+  const showDeleteButton = showEditButton;
+
+  // TODO: apply RBAC
+  const showApproveButton = showEditButton;
+  const showRejectButton = showEditButton;
+
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
@@ -55,50 +72,57 @@ const RowOptionsMenu = ({
         Detail
       </Button>
 
-      <Button
+      {showEditButton && (
-        href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
-        color='warning'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='warning'
-      >
-        <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
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-      </Button>
+          Edit
+        </Button>
+      )}
+
+      {/* TODO: apply RBAC */}
+      {showApproveButton && (
+        <Button
+          variant='ghost'
+          color='success'
+          onClick={approveClickHandler}
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:check' width={24} height={24} />
+          Approve
+        </Button>
+      )}
+      {showRejectButton && (
+        <Button
+          variant='ghost'
+          color='error'
+          onClick={rejectClickHandler}
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:close' width={24} height={24} />
+          Reject
+        </Button>
+      )}
+      {showDeleteButton && (
+        <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>
   );
 };
@@ -187,17 +211,24 @@ const TransferToLayingsTable = () => {
           />
         </div>
       ),
-      cell: ({ row }) => (
+      cell: ({ row }) => {
-        <div>
+        const isCheckboxDisabled =
-          <CheckboxInput
+          !row.getCanSelect() ||
-            name='row'
+          row.original.approval.action === 'APPROVED' ||
-            checked={row.getIsSelected()}
+          row.original.approval.action === 'REJECTED';
-            disabled={!row.getCanSelect()}
+
-            indeterminate={row.getIsSomeSelected()}
+        return (
-            onChange={row.getToggleSelectedHandler()}
+          <div>
-          />
+            <CheckboxInput
-        </div>
+              name='row'
-      ),
+              checked={row.getIsSelected()}
+              disabled={isCheckboxDisabled}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        );
+      },
     },
     {
       header: '#',
@@ -214,21 +245,55 @@ const TransferToLayingsTable = () => {
     {
       accessorKey: 'flock_source',
       header: 'Flock Asal',
-      cell: (props) => props.row.original.flock_source.name,
+      cell: (props) => props.row.original.from_project_flock.flock_name,
     },
     {
       accessorKey: 'flock_destination',
       header: 'Flock Tujuan',
-      cell: (props) => props.row.original.flock_destination.name,
+      cell: (props) => props.row.original.to_project_flock.flock_name,
     },
     {
-      accessorKey: 'quantity',
+      accessorKey: 'usage_qty',
       header: 'Kuantitas',
+      cell: (props) => props.getValue() ?? props.row.original.pending_usage_qty,
     },
     {
-      accessorKey: 'reason',
+      accessorKey: 'notes',
       header: 'Alasan Transfer',
     },
+    {
+      header: 'Status',
+      cell: (props) => {
+        const isLatestApprovalRejected =
+          props.row.original.approval.action === 'REJECTED';
+        let latestApprovalStepName = props.row.original.approval.step_name;
+
+        let pillBadgeColor: 'yellow' | 'green' | 'gray' | 'red' = 'gray';
+
+        switch (latestApprovalStepName.toLowerCase()) {
+          case 'pengajuan':
+            pillBadgeColor = 'yellow';
+            break;
+
+          case 'disetujui':
+            pillBadgeColor = 'green';
+            break;
+        }
+
+        if (isLatestApprovalRejected) {
+          pillBadgeColor = 'red';
+          latestApprovalStepName = 'Ditolak';
+        }
+
+        return (
+          <PillBadge
+            content={latestApprovalStepName}
+            color={pillBadgeColor}
+            className='text-sm'
+          />
+        );
+      },
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -237,7 +302,7 @@ const TransferToLayingsTable = () => {
         const currentRowRelativeIndex =
           currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
 
         const approveClickHandler = () => {
           setSelectedTransferToLaying(props.row.original);
@@ -268,7 +333,7 @@ const TransferToLayingsTable = () => {
 
         return (
           <>
-            {currentPageSize > 2 && (
+            {currentPageSize > 3 && (
               <RowDropdownOptions isLast2Rows={isLast2Rows}>
                 <RowOptionsMenu
                   type='dropdown'
@@ -280,7 +345,7 @@ const TransferToLayingsTable = () => {
               </RowDropdownOptions>
             )}
 
-            {currentPageSize <= 2 && (
+            {currentPageSize <= 3 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
                   type='collapse'
@@ -297,6 +362,15 @@ const TransferToLayingsTable = () => {
     },
   ];
 
+  const tableEnableRowSelectionHandler: (
+    row: Row<TransferToLaying>
+  ) => boolean = (row) => {
+    return (
+      row.original.approval.action !== 'APPROVED' &&
+      row.original.approval.action !== 'REJECTED'
+    );
+  };
+
   const bulkApproveClickHandler = () => {
     approveModal.openModal();
   };
@@ -309,27 +383,31 @@ const TransferToLayingsTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+    try {
-    refreshTransferToLayings();
+      await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
 
-    deleteModal.closeModal();
+      toast.success('Berhasil menghapus data transfer ke laying!');
-    toast.success('Berhasil menghapus data transfer ke laying!');
+      refreshTransferToLayings();
-    setIsDeleteLoading(false);
+    } catch (error) {
+      toast.success('Gagal menghapus data transfer ke laying!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+    }
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalApproveClickHandler = async (notes: string) => {
     setIsApproveLoading(true);
 
-    const bulkApproveResponse =
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
-      await TransferToLayingApi.bulkApprove(selectedRowIds);
+      selectedRowIds,
+      notes
+    );
 
     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!`
       );
@@ -346,19 +424,18 @@ const TransferToLayingsTable = () => {
     setIsApproveLoading(false);
   };
 
-  const confirmationModalRejectClickHandler = async () => {
+  const confirmationModalRejectClickHandler = async (notes: string) => {
     setIsRejectLoading(true);
 
-    const bulkRejectResponse =
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
-      await TransferToLayingApi.bulkReject(selectedRowIds);
+      selectedRowIds,
+      notes
+    );
 
     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!`
       );
@@ -559,6 +636,7 @@ const TransferToLayingsTable = () => {
           setSorting={setSorting}
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
+          enableRowSelection={tableEnableRowSelectionHandler}
           className={{
             containerClassName: cn({
               'mb-20':
@@ -592,7 +670,7 @@ const TransferToLayingsTable = () => {
         }}
       />
 
-      <ConfirmationModal
+      <ConfirmationModalWithNotes
         ref={approveModal.ref}
         type='success'
         text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
@@ -607,7 +685,7 @@ const TransferToLayingsTable = () => {
         }}
       />
 
-      <ConfirmationModal
+      <ConfirmationModalWithNotes
         ref={rejectModal.ref}
         type='error'
         text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}

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

@@ -1,4 +1,7 @@
 import * as Yup from 'yup';
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { formatDate } from '@/lib/helper';
 
 type TransferToLayingFormSchemaType = {
   transfer_date?: string;
@@ -14,7 +17,7 @@ type TransferToLayingFormSchemaType = {
   totalQuantity?: number;
   maxTotalQuantity?: number; // original cap (hidden), helper
 
-  kandangs: {
+  flockSourceKandangs: {
     kandang: {
       value: number;
       label: string;
@@ -22,6 +25,16 @@ type TransferToLayingFormSchemaType = {
     quantity: number | string; // editable
     maxQuantity?: number; // original cap (hidden), helper
   }[];
+
+  flockDestinationKandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+
   reason?: string;
 };
 
@@ -51,7 +64,29 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
       .min(1, 'Jumlah transfer minimal 1')
       .required('Jumlah transfer wajib diisi!'),
 
-    kandangs: Yup.array()
+    flockSourceKandangs: 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!'),
+
+    flockDestinationKandangs: Yup.array()
       .of(
         Yup.object({
           kandang: Yup.object({
@@ -81,3 +116,122 @@ export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
 export type TransferToLayingFormValues = Yup.InferType<
   typeof TransferToLayingFormSchema
 >;
+
+export const getTransferToLayingFormInitialValues = (
+  initialValues?: TransferToLaying
+): TransferToLayingFormValues => {
+  return {
+    transfer_date: initialValues?.transfer_date
+      ? formatDate(initialValues.transfer_date, 'YYYY-MM-DD')
+      : '',
+    flockSource: initialValues?.from_project_flock
+      ? {
+          value: initialValues?.from_project_flock.id,
+          label: initialValues?.from_project_flock.flock_name,
+        }
+      : undefined,
+    flockDestination: initialValues?.to_project_flock
+      ? {
+          value: initialValues?.to_project_flock.id,
+          label: initialValues?.to_project_flock.flock_name,
+        }
+      : undefined,
+    totalQuantity:
+      initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? undefined,
+
+    flockSourceKandangs: initialValues?.sources
+      ? initialValues.sources.map((sourceKandang) => ({
+          kandang: {
+            value: sourceKandang.source_project_flock_kandang.kandang.id,
+            label: sourceKandang.source_project_flock_kandang.kandang.name,
+          },
+          quantity: sourceKandang.qty,
+        }))
+      : [],
+
+    flockDestinationKandangs: initialValues?.targets
+      ? initialValues.targets.map((targetKandang) => ({
+          kandang: {
+            value: targetKandang.target_project_flock_kandang.kandang.id,
+            label: targetKandang.target_project_flock_kandang.kandang.name,
+          },
+          quantity: targetKandang.qty,
+        }))
+      : [],
+
+    reason: initialValues?.notes ?? undefined,
+  };
+};
+
+export const getFilledTransferToLayingFormInitialValues = async (
+  initialValues?: TransferToLaying
+): Promise<TransferToLayingFormValues> => {
+  const mappedFlockSourceKandangsAvailableQty =
+    await TransferToLayingApi.getMappedFlockKandangsAvailability(
+      initialValues?.from_project_flock.id as number
+    );
+
+  const formattedFlockSourceKandangs = initialValues?.sources
+    ? initialValues.sources.map((sourceKandang) => ({
+        kandang: {
+          value: sourceKandang.source_project_flock_kandang.kandang.id,
+          label: sourceKandang.source_project_flock_kandang.kandang.name,
+        },
+        quantity: sourceKandang.qty,
+        maxQuantity:
+          (mappedFlockSourceKandangsAvailableQty &&
+            mappedFlockSourceKandangsAvailableQty[
+              sourceKandang.source_project_flock_kandang.id
+            ].available_qty) ??
+          0,
+      }))
+    : [];
+
+  let maxTotalQuantity = 0;
+  formattedFlockSourceKandangs.forEach((item) => {
+    maxTotalQuantity += item.maxQuantity;
+  });
+
+  return {
+    transfer_date: initialValues?.transfer_date
+      ? formatDate(initialValues.transfer_date, 'YYYY-MM-DD')
+      : '',
+    flockSource: initialValues?.from_project_flock
+      ? {
+          value: initialValues?.from_project_flock.id,
+          label: initialValues?.from_project_flock.flock_name,
+        }
+      : undefined,
+    flockDestination: initialValues?.to_project_flock
+      ? {
+          value: initialValues?.to_project_flock.id,
+          label: initialValues?.to_project_flock.flock_name,
+        }
+      : undefined,
+    totalQuantity:
+      initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? undefined,
+    maxTotalQuantity: maxTotalQuantity,
+
+    flockSourceKandangs: formattedFlockSourceKandangs,
+
+    flockDestinationKandangs: initialValues?.targets
+      ? initialValues.targets.map((targetKandang) => ({
+          kandang: {
+            value: targetKandang.target_project_flock_kandang.kandang.id,
+            label: targetKandang.target_project_flock_kandang.kandang.name,
+          },
+          quantity: targetKandang.qty,
+
+          // maxQuantity:
+          //   targetKandang.target_project_flock_kandang.kandang.capacity,
+
+          // TODO: integrate this to real API kandang capacity
+          maxQuantity:
+            targetKandang.target_project_flock_kandang.kandang.capacity ??
+            Infinity,
+        }))
+      : [],
+
+    reason: initialValues?.notes ?? undefined,
+  };
+};

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import { toast } from 'react-hot-toast';
@@ -8,16 +8,23 @@ import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
-import TextInput from '@/components/input/TextInput';
 import SelectInput, {
   OptionType,
-  // useSelect,
+  useSelect,
 } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import DateInput from '@/components/input/DateInput';
+import NumberInput from '@/components/input/NumberInput';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  formatGroupedApprovalsToApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
 
 import {
+  getFilledTransferToLayingFormInitialValues,
+  getTransferToLayingFormInitialValues,
   TransferToLayingFormSchema,
   TransferToLayingFormValues,
   UpdateTransferToLayingFormSchema,
@@ -31,6 +38,8 @@ import {
 import { cn } from '@/lib/helper';
 
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { TRANSFER_TO_LAYING_APPROVAL_LINE } from '@/config/approval-line';
 
 interface TransferToLayingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -55,11 +64,23 @@ const TransferToLayingForm = ({
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
 
+  const { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
+    type === 'detail' && initialValues ? [String(initialValues.id)] : null,
+    ([id]: string[]) => TransferToLayingApi.getApprovalHistory(Number(id))
+  );
+
   const createTransferToLayingHandler = useCallback(
     async (payload: CreateTransferToLayingPayload) => {
-      console.log('Create transfer to laying:', { payload });
+      const createTransferToLayingRes =
+        await TransferToLayingApi.create(payload);
 
-      toast.success('Berhasil menambahkan data transfer ke laying!');
+      if (isResponseError(createTransferToLayingRes)) {
+        setFormErrorMessage(createTransferToLayingRes.message);
+        return;
+      }
+
+      toast.success(createTransferToLayingRes?.message as string);
+      router.push('/production/transfer-to-laying');
     },
     [router]
   );
@@ -69,46 +90,30 @@ const TransferToLayingForm = ({
       transferToLayingId: number,
       payload: UpdateTransferToLayingPayload
     ) => {
-      console.log(
+      const updateKandangRes = await TransferToLayingApi.update(
-        `Update transfer to laying with ID of ${transferToLayingId}:`,
+        transferToLayingId,
-        { payload }
+        payload
       );
 
-      toast.success('Berhasil mengubah data transfer ke laying!');
+      if (updateKandangRes?.status === 'error') {
+        setFormErrorMessage(updateKandangRes.message);
+        return;
+      }
+
+      toast.success(updateKandangRes?.message as string);
+      router.refresh();
+      router.push('/production/transfer-to-laying');
     },
     [router]
   );
 
-  const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+  // const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
-    return {
+  //   return getTransferToLayingFormInitialValues(initialValues);
-      transfer_date: initialValues?.transfer_date ?? '',
+  // }, [initialValues]);
-      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
+  const [formikInitialValues, setFormikInitialValues] = useState(
-        ? initialValues.kandangs.map((kandang) => ({
+    getTransferToLayingFormInitialValues()
-            kandang: {
+  );
-              value: kandang.kandang.id,
-              label: kandang.kandang.name,
-            },
-            quantity: kandang.quantity,
-          }))
-        : [],
-
-      reason: initialValues?.reason ?? undefined,
-    };
-  }, [initialValues]);
 
   const formik = useFormik<TransferToLayingFormValues>({
     initialValues: formikInitialValues,
@@ -117,23 +122,23 @@ const TransferToLayingForm = ({
         ? 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,
+        source_project_flock_id: values.flockSource?.value as number,
-        flock_destination_id: values.flockDestination?.value as number,
+        target_project_flock_id: values.flockDestination?.value as number,
         totalQuantity: values.totalQuantity as number,
 
-        kandangs: values.kandangs?.map((kandang) => ({
+        source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
-          kandang_id: kandang.kandang.value,
+          project_flock_kandang_id: kandang.kandang.value,
-          quantity: kandang.quantity,
+          quantity: parseFloat(kandang.quantity as string),
-        })) as {
+        })) as CreateTransferToLayingPayload['source_kandangs'],
-          kandang_id: number;
+
-          quantity: number;
+        target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
-        }[],
+          project_flock_kandang_id: kandang.kandang.value,
+          quantity: parseFloat(kandang.quantity as string),
+        })) as CreateTransferToLayingPayload['target_kandangs'],
 
         reason: values.reason as string,
       };
@@ -154,7 +159,11 @@ const TransferToLayingForm = ({
   });
 
   const { setValues: formikSetValues, values: formikValues } = formik;
-  const { kandangs: kandangsValue } = formikValues;
+  const {
+    flockSourceKandangs: flockSourceKandangsValue,
+    flockDestinationKandangs: flockDestinationKandangsValue,
+    totalQuantity,
+  } = formikValues;
 
   const deleteTransferToLayingClickHandler = () => {
     deleteModal.openModal();
@@ -172,24 +181,32 @@ const TransferToLayingForm = ({
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    // TODO: delete data and integrate to real API
+    try {
-    deleteModal.closeModal();
+      await TransferToLayingApi.delete(initialValues?.id as number);
-    toast.success('Berhasil menghapus data transfer ke laying!');
 
-    setIsDeleteLoading(false);
+      toast.success('Berhasil menghapus data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
+    } catch (error) {
+      toast.success('Gagal menghapus data transfer ke laying!');
+    } finally {
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+    }
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalApproveClickHandler = async (notes: string) => {
     setIsApproveLoading(true);
 
     const approveResponse = await TransferToLayingApi.approve(
-      initialValues?.id as number
+      initialValues?.id as number,
+      notes
     );
 
     if (isResponseSuccess(approveResponse)) {
       approveModal.closeModal();
 
       toast.success('Berhasil approve data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
     } else {
       approveModal.closeModal();
 
@@ -199,17 +216,19 @@ const TransferToLayingForm = ({
     setIsApproveLoading(false);
   };
 
-  const confirmationModalRejectClickHandler = async () => {
+  const confirmationModalRejectClickHandler = async (notes: string) => {
     setIsRejectLoading(true);
 
     const rejectResponse = await TransferToLayingApi.reject(
-      initialValues?.id as number
+      initialValues?.id as number,
+      notes
     );
 
     if (isResponseSuccess(rejectResponse)) {
       rejectModal.closeModal();
 
       toast.success('Berhasil reject data transfer ke laying!');
+      router.push('/production/transfer-to-laying');
     } else {
       rejectModal.closeModal();
 
@@ -219,49 +238,47 @@ const TransferToLayingForm = ({
     setIsRejectLoading(false);
   };
 
-  const isRepeaterInputError = (
+  // flock source
-    column: keyof TransferToLayingFormValues['kandangs'][0],
+  const isFlockSourceKandangsRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
     idx: number
   ) => {
     return (
-      formik.touched.kandangs?.[idx]?.[column] &&
+      formik.touched.flockSourceKandangs?.[idx]?.[column] &&
       Boolean(
-        formik.errors.kandangs?.[idx] instanceof Object &&
+        formik.errors.flockSourceKandangs?.[idx] instanceof Object &&
-          formik.errors.kandangs?.[idx]?.[column]
+          formik.errors.flockSourceKandangs?.[idx]?.[column]
       )
     );
   };
 
-  const repeaterInputErrorMessage = (
+  const flockSourceKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['kandangs'][0],
+    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
     idx: number
   ) => {
-    return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
+    return (
+      formik.errors.flockSourceKandangs?.[idx] as Record<string, string>
+    )?.[column];
   };
 
-  // TODO: remove dummy data and use real data
+  const {
-  // Flock Source
+    setInputValue: setFlockSourceInputValue,
-  // const {
+    options: flockSourceOptions,
-  //   inputValue: flockSourceInputValue,
+    isLoadingOptions: isLoadingFlockSourceOptions,
-  //   setInputValue: setFlockSourceInputValue,
+    rawData: flockSources,
-  //   options: flockSourceOptions,
+  } = useSelect<ProjectFlock>(
-  //   isLoadingOptions: isLoadingFlockSourceOptions,
+    '/production/project-flocks',
-  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
+    'id',
-
+    'flock_name',
-  // TODO: remove this dummy data
+    'search',
-  const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
+    {
-    'test',
+      category: 'GROWING',
-    () => TransferToLayingApi.getFlockSource()
+    }
   );
 
-  const flockSourceOptions = isResponseSuccess(flockSources)
+  const flockSourceChangeHandler = async (
-    ? flockSources?.data.map((flockSource) => ({
+    val: OptionType | OptionType[] | null
-        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
@@ -272,21 +289,38 @@ const TransferToLayingForm = ({
 
     // Set total quantity and kandangs
     if (flockSource) {
+      const mappedFlockKandangsAvailableQty =
+        await TransferToLayingApi.getMappedFlockKandangsAvailability(
+          flockSource.id
+        );
+
       const formattedKandangs = flockSource.kandangs.map((item) => ({
         kandang: {
-          value: item.kandang.id,
+          value: item.project_flock_kandang_id,
-          label: item.kandang.name,
+          label: item.name,
         },
         quantity: '',
-        maxQuantity: item.quantity,
+        maxQuantity:
+          (mappedFlockKandangsAvailableQty &&
+            mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]
+              .available_qty) ??
+          0,
       }));
 
-      formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
+      let maxTotalQuantity = 0;
-      formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
+      // flockSource.kandangs.forEach((item) => {
-      formik.setFieldValue('kandangs', formattedKandangs);
+      //   maxTotalQuantity += item.capacity;
+      // });
+      formattedKandangs.forEach((item) => {
+        maxTotalQuantity += item.maxQuantity;
+      });
+
+      formik.setFieldValue('totalQuantity', '');
+      formik.setFieldValue('maxTotalQuantity', maxTotalQuantity);
+      formik.setFieldValue('flockSourceKandangs', formattedKandangs);
     } else {
       formik.setFieldValue('totalQuantity', undefined);
-      formik.setFieldValue('kandangs', undefined);
+      formik.setFieldValue('flockSourceKandangs', undefined);
       formik.setFieldValue('reason', '');
     }
 
@@ -294,52 +328,137 @@ const TransferToLayingForm = ({
     formik.setFieldValue('flockSource', val);
   };
 
-  // TODO: remove dummy data and use real data
+  // flock destination
-  // Flock Destination
+  const isFlockDestinationKandangsRepeaterInputError = (
-  // const {
+    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-  //   inputValue: flockDestinationInputValue,
+    idx: number
-  //   setInputValue: setFlockDestinationInputValue,
+  ) => {
-  //   options: flockDestinationOptions,
+    return (
-  //   isLoadingOptions: isLoadingFlockDestinationOptions,
+      formik.touched.flockDestinationKandangs?.[idx]?.[column] &&
-  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
+      Boolean(
+        formik.errors.flockDestinationKandangs?.[idx] instanceof Object &&
+          formik.errors.flockDestinationKandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const flockDestinationKandangsRepeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.errors.flockDestinationKandangs?.[idx] as Record<string, string>
+    )?.[column];
+  };
 
-  // TODO: remove this dummy data
   const {
-    data: flockDestinations,
+    setInputValue: setFlockDestinationInputValue,
-    isLoading: isLoadingFlockDestinationOptions,
+    options: flockDestinationOptions,
-  } = useSWR('test', () => TransferToLayingApi.getFlockSource());
+    isLoadingOptions: isLoadingFlockDestinationOptions,
-
+    rawData: flockDestinations,
-  const flockDestinationOptions = isResponseSuccess(flockDestinations)
+  } = useSelect<ProjectFlock>(
-    ? flockDestinations?.data.map((flockDestination) => ({
+    '/production/project-flocks',
-        value: flockDestination.id,
+    'id',
-        label: flockDestination.name,
+    'flock_name',
-      }))
+    'search',
-    : [];
+    {
+      category: 'LAYING',
+    }
+  );
 
   const flockDestinationChangeHandler = (
     val: OptionType | OptionType[] | null
   ) => {
+    // Get flock destination data for total quantity and kandang
+    const flockDestination =
+      isResponseSuccess(flockDestinations) && val !== null
+        ? flockDestinations.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockDestination) {
+      const formattedKandangs = flockDestination.kandangs.map((item) => ({
+        kandang: {
+          value: item.project_flock_kandang_id,
+          label: item.name,
+        },
+        quantity: '',
+
+        // TODO: integrate this later to real kandang capacity API
+        // maxQuantity: item.capacity ?? 0,
+        maxQuantity: item.capacity ?? Infinity,
+      }));
+
+      formik.setFieldValue('flockDestinationKandangs', formattedKandangs);
+    }
+
     formik.setFieldTouched('flockDestination', true);
     formik.setFieldValue('flockDestination', val);
   };
 
+  const isShowApproveRejectButton =
+    initialValues &&
+    initialValues?.approval?.step_number === 1 &&
+    initialValues?.approval.action !== 'REJECTED';
+
+  const isShowDeleteButton =
+    initialValues &&
+    initialValues?.approval.action !== 'REJECTED' &&
+    initialValues?.approval.action !== 'APPROVED';
+
+  const isShowEditButton = isShowDeleteButton;
+
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (initialValues) {
+        const filledInitialValues =
+          await getFilledTransferToLayingFormInitialValues(initialValues);
+
+        setFormikInitialValues(filledInitialValues);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [initialValues, setFormikInitialValues]);
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
   useEffect(() => {
     // calculate total quantity if kandangs quantity change
-    if (kandangsValue && kandangsValue.length > 0) {
+    if (flockSourceKandangsValue && flockSourceKandangsValue.length > 0) {
       let newTotalQuantity = 0;
 
-      kandangsValue.forEach((item) => {
+      flockSourceKandangsValue.forEach((item) => {
-        newTotalQuantity += item.quantity as number;
+        newTotalQuantity += parseFloat(item.quantity as string);
       });
 
       formik.setFieldValue('totalQuantity', newTotalQuantity);
       formik.validateField('totalQuantity');
     }
-  }, [formikSetValues, kandangsValue]);
+  }, [formikSetValues, flockSourceKandangsValue]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (
+      flockDestinationKandangsValue &&
+      flockDestinationKandangsValue.length > 0
+    ) {
+      let destinationKandangsTotalQuantity = 0;
+
+      flockDestinationKandangsValue.forEach((item) => {
+        destinationKandangsTotalQuantity += parseFloat(item.quantity as string);
+      });
+
+      if (
+        destinationKandangsTotalQuantity > parseFloat(String(totalQuantity))
+      ) {
+      }
+    }
+  }, [formikSetValues, flockDestinationKandangsValue]);
 
   return (
     <>
@@ -361,30 +480,56 @@ const TransferToLayingForm = ({
           </h1>
         </header>
 
-        <div className='w-full my-4 flex flex-row justify-end gap-2'>
+        {type === 'detail' &&
+          initialValues &&
+          !isLoadingApprovalHistory &&
+          isResponseSuccess(approvalHistory) && (
+            <div className='w-full my-4'>
+              <ApprovalSteps
+                approvals={formatGroupedApprovalsToApprovalSteps(
+                  TRANSFER_TO_LAYING_APPROVAL_LINE,
+                  approvalHistory.data,
+                  initialValues.approval
+                )}
+              />
+            </div>
+          )}
+
+        <div className='w-full my-4 flex flex-row justify-between gap-2'>
           {type === 'detail' && (
             <>
-              <Button
+              {isShowApproveRejectButton && (
-                variant='outline'
+                <div className='w-full flex flex-row justify-end gap-2'>
-                color='success'
+                  {/* TODO: apply RBAC */}
-                onClick={approveClickHandler}
+                  <Button
-                // disabled={selectedRowIds.length === 0}
+                    variant='outline'
-                className='w-full sm:w-fit'
+                    color='success'
-              >
+                    onClick={approveClickHandler}
-                <Icon icon='material-symbols:check' width={24} height={24} />
+                    className='w-full sm:w-fit'
-                Approve
+                  >
-              </Button>
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
 
-              <Button
+                  <Button
-                variant='outline'
+                    variant='outline'
-                color='error'
+                    color='error'
-                onClick={rejectClickHandler}
+                    onClick={rejectClickHandler}
-                // disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
-                className='w-full sm:w-fit'
+                  >
-              >
+                    <Icon
-                <Icon icon='material-symbols:close' width={24} height={24} />
+                      icon='material-symbols:close'
-                Reject
+                      width={24}
-              </Button>
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
             </>
           )}
         </div>
@@ -395,13 +540,12 @@ const TransferToLayingForm = ({
           className='w-full flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
-            <TextInput
+            <DateInput
               required
-              type='date'
               label='Tanggal Transfer'
               name='transfer_date'
               placeholder='Masukkan tanggal transfer'
-              value={formik.values.transfer_date}
+              value={formik.values.transfer_date ?? ''}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
               isError={
@@ -421,7 +565,7 @@ const TransferToLayingForm = ({
                 options={flockSourceOptions}
                 onChange={flockSourceChangeHandler}
                 isLoading={isLoadingFlockSourceOptions}
-                // onInputChange={setFlockSourceInputValue}
+                onInputChange={setFlockSourceInputValue}
                 isError={
                   formik.touched.flockSource &&
                   Boolean(typeof formik.errors.flockSource === 'string')
@@ -439,7 +583,7 @@ const TransferToLayingForm = ({
                 options={flockDestinationOptions}
                 onChange={flockDestinationChangeHandler}
                 isLoading={isLoadingFlockDestinationOptions}
-                // onInputChange={setFlockDestinationInputValue}
+                onInputChange={setFlockDestinationInputValue}
                 isError={
                   formik.touched.flockDestination &&
                   Boolean(typeof formik.errors.flockDestination === 'string')
@@ -450,9 +594,8 @@ const TransferToLayingForm = ({
               />
             </div>
 
-            <TextInput
+            <NumberInput
               required
-              type='number'
               name='totalQuantity'
               label='Jumlah Transfer'
               bottomLabel={
@@ -461,7 +604,9 @@ const TransferToLayingForm = ({
                   : undefined
               }
               placeholder='Masukkan jumlah transfer'
-              value={formik.values.totalQuantity ?? ''}
+              value={
+                formik.values.totalQuantity ? formik.values.totalQuantity : ''
+              }
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
               isError={
@@ -469,24 +614,22 @@ const TransferToLayingForm = ({
                 Boolean(formik.errors.totalQuantity)
               }
               errorMessage={formik.errors.totalQuantity}
-              // readOnly={type === 'detail'}
-              // disabled={Boolean(formik.errors.flockSource)}
               disabled
             />
 
-            <div>
+            <div className='flex flex-col gap-4'>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
                     <tr>
-                      <th>Kandang</th>
+                      <th>Kandang Flock Asal</th>
                       <th>Kuantitas</th>
                     </tr>
                   </thead>
 
                   <tbody>
-                    {(!formik.values.kandangs ||
+                    {(!formik.values.flockSourceKandangs ||
-                      formik.values.kandangs.length === 0) && (
+                      formik.values.flockSourceKandangs.length === 0) && (
                       <tr>
                         <td colSpan={2}>
                           <p className='w-full text-center text-gray-400'>
@@ -496,8 +639,8 @@ const TransferToLayingForm = ({
                       </tr>
                     )}
 
-                    {formik.values.kandangs &&
+                    {formik.values.flockSourceKandangs &&
-                      formik.values.kandangs.map((kandang, idx) => (
+                      formik.values.flockSourceKandangs.map((kandang, idx) => (
                         <tr key={idx}>
                           <td>
                             <SelectInput
@@ -511,10 +654,9 @@ const TransferToLayingForm = ({
                           </td>
 
                           <td>
-                            <TextInput
+                            <NumberInput
                               required
-                              type='number'
+                              name={`flockSourceKandangs[${idx}].quantity`}
-                              name={`kandangs[${idx}].quantity`}
                               bottomLabel={
                                 kandang.maxQuantity
                                   ? `Max: ${kandang.maxQuantity}`
@@ -524,8 +666,11 @@ const TransferToLayingForm = ({
                               value={kandang.quantity}
                               onChange={formik.handleChange}
                               onBlur={formik.handleBlur}
-                              isError={isRepeaterInputError('quantity', idx)}
+                              isError={isFlockSourceKandangsRepeaterInputError(
-                              errorMessage={repeaterInputErrorMessage(
+                                'quantity',
+                                idx
+                              )}
+                              errorMessage={flockSourceKandangsRepeaterInputErrorMessage(
                                 'quantity',
                                 idx
                               )}
@@ -540,6 +685,76 @@ const TransferToLayingForm = ({
                   </tbody>
                 </table>
               </div>
+
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang Flock Tujuan</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.flockDestinationKandangs ||
+                      formik.values.flockDestinationKandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock tujuan terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.flockDestinationKandangs &&
+                      formik.values.flockDestinationKandangs.map(
+                        (kandang, idx) => (
+                          <tr key={idx}>
+                            <td>
+                              <SelectInput
+                                value={kandang.kandang}
+                                options={[]}
+                                isDisabled
+                                className={{
+                                  wrapper: 'min-w-52',
+                                }}
+                              />
+                            </td>
+
+                            <td>
+                              <NumberInput
+                                required
+                                name={`flockDestinationKandangs[${idx}].quantity`}
+                                bottomLabel={
+                                  kandang.maxQuantity
+                                    ? `Max: ${kandang.maxQuantity}`
+                                    : undefined
+                                }
+                                placeholder='Masukkan kuantitas'
+                                value={kandang.quantity}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                isError={isFlockDestinationKandangsRepeaterInputError(
+                                  'quantity',
+                                  idx
+                                )}
+                                errorMessage={flockDestinationKandangsRepeaterInputErrorMessage(
+                                  'quantity',
+                                  idx
+                                )}
+                                readOnly={type === 'detail'}
+                                className={{
+                                  wrapper: 'min-w-52',
+                                }}
+                              />
+                            </td>
+                          </tr>
+                        )
+                      )}
+                  </tbody>
+                </table>
+              </div>
             </div>
 
             <TextArea
@@ -558,25 +773,38 @@ const TransferToLayingForm = ({
             />
           </div>
 
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error w-full'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
+                {isShowDeleteButton && (
-                  type='button'
+                  <Button
-                  color='error'
+                    type='button'
-                  onClick={deleteTransferToLayingClickHandler}
+                    color='error'
-                  className='px-4'
+                    onClick={deleteTransferToLayingClickHandler}
-                >
+                    className='px-4'
-                  <Icon
+                  >
-                    icon='material-symbols:delete-outline-rounded'
+                    <Icon
-                    width={24}
+                      icon='material-symbols:delete-outline-rounded'
-                    height={24}
+                      width={24}
-                    className='justify-start text-sm'
+                      height={24}
-                  />
+                      className='justify-start text-sm'
-                  Delete
+                    />
-                </Button>
+                    Delete
+                  </Button>
+                )}
 
-                {type !== 'edit' && (
+                {type !== 'edit' && isShowEditButton && (
                   <Button
                     type='button'
                     color='warning'
@@ -617,17 +845,6 @@ const TransferToLayingForm = ({
               </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>
 
@@ -650,7 +867,7 @@ const TransferToLayingForm = ({
 
       {type === 'detail' && (
         <>
-          <ConfirmationModal
+          <ConfirmationModalWithNotes
             ref={approveModal.ref}
             type='success'
             text='Apakah anda yakin ingin approve data transfer ke laying ini?'
@@ -665,7 +882,7 @@ const TransferToLayingForm = ({
             }}
           />
 
-          <ConfirmationModal
+          <ConfirmationModalWithNotes
             ref={rejectModal.ref}
             type='error'
             text='Apakah anda yakin ingin reject data transfer ke laying ini?'

src/config/approval-line.ts

@@ -10,3 +10,25 @@ export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
     step_name: 'Aktif',
   },
 ] as const;
+
+export const PROJECT_FLOCK_KANDANG_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
+
+export const TRANSFER_TO_LAYING_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;

src/config/constant.ts

@@ -22,11 +22,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/project-flock',
         icon: 'material-symbols:list-alt-add-outline-rounded',
       },
-      {
+      // { // DI HILANGKAN PADA VERSI REFACTORING
-        title: 'Chick In',
+      //   title: 'Chick In',
-        link: '/production/chickin',
+      //   link: '/production/chickin',
-        icon: 'mdi:home-import-outline',
+      //   icon: 'mdi:home-import-outline',
-      },
+      // },
       {
         title: 'Recording',
         link: '/production/recording',
@@ -46,6 +46,12 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'uil:wallet',
   },
 
+  {
+    title: 'Penjualan',
+    link: '/marketing/sales-orders',
+    icon: 'mdi:attach-money',
+  },
+
   {
     title: 'Persediaan',
     link: '/inventory',

src/dummy/marketing.dummy.ts

@@ -0,0 +1,364 @@
+import { format } from 'date-fns';
+import { Area } from '@/types/api/master-data/area';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Marketing } from '@/types/api/marketing/marketing';
+import { CreatedUser } from '@/types/api/api-general';
+import { Product } from '@/types/api/master-data/product';
+
+// ======================
+// 👤 Created User
+// ======================
+export const createdUser: CreatedUser = {
+  id: 1,
+  id_user: 1,
+  email: 'admin@example.com',
+  name: 'Admin Utama',
+};
+
+// ======================
+// 📍 Area Dummy
+// ======================
+export const dummyAreas: Area[] = [
+  {
+    id: 1,
+    name: 'Bandung Barat',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Cimahi Utara',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏢 Location Dummy
+// ======================
+export const dummyLocations: Location[] = [
+  {
+    id: 1,
+    name: 'Gudang A',
+    address: 'Jl. Sukajadi No. 12',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Gudang B',
+    address: 'Jl. Setiabudi No. 45',
+    area: dummyAreas[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🐔 Kandang Dummy
+// ======================
+export const dummyKandangs: Kandang[] = [
+  {
+    id: 1,
+    name: 'Kandang Ayam Layer 1',
+    status: 'AKTIF',
+    capacity: 500,
+    location: dummyLocations[0],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Kandang Ayam Broiler 2',
+    status: 'NONAKTIF',
+    capacity: 300,
+    location: dummyLocations[1],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏭 Warehouse Dummy
+// ======================
+export const dummyWarehouses: Warehouse[] = [
+  {
+    id: 1,
+    type: 'AREA',
+    name: 'Gudang Wilayah Bandung Barat',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    type: 'LOKASI',
+    name: 'Gudang Produksi Sukajadi',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 3,
+    type: 'KANDANG',
+    name: 'Gudang Kandang Layer 1',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    kandang: {
+      ...dummyKandangs[0],
+      location: dummyLocations[0],
+      pic: createdUser,
+    },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 📦 Product Warehouse Dummy
+// ======================
+export const dummyProductWarehouses: ProductWarehouse[] = [
+  {
+    id: 1,
+    product_id: 101,
+    warehouse_id: 1,
+    quantity: 1000,
+    product: {
+      id: 101,
+      name: 'Pakan Ayam Premium',
+      sku: 'PAK-001',
+      category: 'PAKAN',
+    } as unknown as Product,
+    warehouse: dummyWarehouses[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    product_id: 102,
+    warehouse_id: 2,
+    quantity: 500,
+    product: {
+      id: 102,
+      name: 'Vitamin Ayam Super',
+      sku: 'VIT-002',
+      category: 'VITAMIN',
+    } as unknown as Product,
+    warehouse: dummyWarehouses[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 💼 Marketing Dummy
+// ======================
+export const dummyMarketings: Marketing[] = [
+  // Step 1: Pengajuan Order
+  {
+    id: 1,
+    status: 'APPROVED',
+    so_number: 'SO-001-2025',
+    so_docs: 'https://example.com/docs/so001.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 1,
+      name: 'PT Maju Jaya',
+      pic_id: 1,
+      pic: createdUser,
+      type: 'Distributor',
+      address: 'Jl. Merdeka No. 1',
+      phone: '081212121212',
+      email: 'contact@majujaya.com',
+      account_number: '1234567890',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pengiriman awal bulan.',
+    grand_total: 7500000,
+    approval: {
+      step_number: 1,
+      step_name: 'Pengajuan Order',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 1,
+        qty: 100,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 250,
+        total_price: 7500000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 1,
+          qty: 100,
+          unit_price: 75000,
+          avg_weight: 2.5,
+          total_weight: 250,
+          total_price: 7500000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'B 1234 XY',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+
+  // Step 2: Sales Order
+  {
+    id: 2,
+    status: 'APPROVED',
+    so_number: 'SO-002-2025',
+    so_docs: 'https://example.com/docs/so002.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 2,
+      name: 'CV Sumber Sehat',
+      pic_id: 2,
+      pic: createdUser,
+      type: 'Retail',
+      address: 'Jl. Cihampelas No. 5',
+      phone: '082222222222',
+      email: 'info@sumbersehat.com',
+      account_number: '9876543210',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pesanan kedua untuk stok akhir tahun.',
+    grand_total: 3750000,
+    approval: {
+      step_number: 2,
+      step_name: 'Sales Order',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 2,
+        qty: 50,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 125,
+        total_price: 3750000,
+        product_warehouse: dummyProductWarehouses[1],
+        marketing_delivery_products: {
+          id: 2,
+          qty: 50,
+          unit_price: 75000,
+          avg_weight: 2.5,
+          total_weight: 125,
+          total_price: 3750000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'B 5678 YZ',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+
+  // Step 3: Delivery Order
+  {
+    id: 3,
+    status: 'APPROVED',
+    so_number: 'SO-003-2025',
+    so_docs: 'https://example.com/docs/so003.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 3,
+      name: 'UD Ternak Sejahtera',
+      pic_id: 3,
+      pic: createdUser,
+      type: 'Reseller',
+      address: 'Jl. Pasteur No. 88',
+      phone: '083333333333',
+      email: 'halo@ternaksejahtera.com',
+      account_number: '1122334455',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Order untuk pengiriman ke luar kota.',
+    grand_total: 5600000,
+    approval: {
+      step_number: 3,
+      step_name: 'Delivery Order',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 3,
+        qty: 80,
+        unit_price: 70000,
+        avg_weight: 2.4,
+        total_weight: 192,
+        total_price: 5600000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 3,
+          qty: 80,
+          unit_price: 70000,
+          avg_weight: 2.4,
+          total_weight: 192,
+          total_price: 5600000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'D 9090 ZZ',
+        },
+      },
+      {
+        id: 4,
+        qty: 80,
+        unit_price: 70000,
+        avg_weight: 2.4,
+        total_weight: 192,
+        total_price: 5600000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 3,
+          qty: 80,
+          unit_price: 70000,
+          avg_weight: 2.4,
+          total_weight: 192,
+          total_price: 5600000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'D 9090 ZZ',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];

src/lib/helper.ts

@@ -2,6 +2,7 @@ import moment from 'moment';
 import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
+import { ChangeEvent } from 'react';
 
 // set locale globally
 moment.locale('id');
@@ -29,6 +30,28 @@ export const formatNumber = (
   }).format(value);
 };
 
+export function formatVechicleNumber(value: string): string {
+  let result = '';
+  for (let i = 0; i < value.length; i++) {
+    const curr = value[i];
+    const prev = value[i - 1];
+
+    // Cek apakah terjadi perpindahan dari huruf ke angka atau angka ke huruf
+    if (i > 0) {
+      const isCurrDigit = /\d/.test(curr);
+      const isPrevDigit = /\d/.test(prev);
+
+      if (isCurrDigit !== isPrevDigit) {
+        result += ' ';
+      }
+    }
+
+    result += curr;
+  }
+
+  return result.trim().replace(/\s+/g, ' ');
+}
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'IDR',

src/services/api/marketing/marketing.ts

@@ -0,0 +1,125 @@
+import { dummyMarketings } from '@/dummy/marketing.dummy';
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload,
+} from '@/types/api/marketing/marketing';
+
+export class MarketingService extends BaseApiService<
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload
+> {
+  constructor(basePath: string = '/marketing') {
+    super(basePath);
+  }
+
+  /**
+   * Override: Get all marketing data (dummy mode)
+   */
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<Marketing[]>> {
+    // simulasi loading
+    await sleep(750);
+
+    // data dummy sementara
+    const DUMMY_MARKETING_DATA: BaseApiResponse<Marketing[]> = {
+      code: 200,
+      status: 'success',
+      message: 'Berhasil mengambil data marketing (dummy)',
+      data: dummyMarketings,
+    };
+
+    return DUMMY_MARKETING_DATA;
+  }
+
+  /**
+   * Override: Get single marketing data (dummy mode)
+   */
+  override async getSingle(
+    id: number
+  ): Promise<BaseApiResponse<Marketing> | undefined> {
+    // simulasi delay
+    await new Promise((res) => setTimeout(res, 500));
+
+    const marketing = dummyMarketings.find((marketing) => {
+      console.log('marketing', marketing);
+      console.log('id-m', marketing.id);
+      console.log('id-p', id);
+      console.log('id', marketing.id == id);
+      return marketing.id == id;
+    });
+    console.log('marketings', dummyMarketings);
+    console.log('marketing', marketing);
+
+    if (marketing) {
+      // misalnya fetch dari dummy
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Data marketing berhasil diambil.',
+        data: marketing,
+      };
+    } else {
+      // jika tidak ditemukan
+      throw {
+        code: 404,
+        status: 'error',
+        message: 'Data marketing tidak ditemukan.',
+      };
+    }
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: [id],
+          notes: `${action} marketing ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve marketing:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Bulk approve
+   */
+  async bulkApprovals(
+    ids: number[],
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: ids,
+          notes: `${action} marketing ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error bulk approve marketing:', error);
+      return undefined;
+    }
+  }
+}
+
+export const MarketingApi = new MarketingService('/marketing');

src/services/api/production.ts

@@ -1,32 +1,18 @@
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
-import {
-  CreateProjectFlockPayload,
-  ProjectFlock,
-  UpdateProjectFlockPayload,
-} from '@/types/api/production/project-flock';
 import {
   CreateRecordingPayload,
   Recording,
   UpdateRecordingPayload,
 } from '@/types/api/production/recording';
-import {
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
 
-export const ProjectFlockApi = new BaseApiService<
+export const ProjectFlockKandangApi = new BaseApiService<
-  ProjectFlock,
+  ProjectFlockKandang,
-  CreateProjectFlockPayload,
+  unknown,
-  UpdateProjectFlockPayload
+  unknown
->('/production/project_flocks');
+>('/production/project-flock-kandangs');
 export const RecordingApi = new BaseApiService<
   Recording,
   CreateRecordingPayload,
   UpdateRecordingPayload
 >('/flock/recordings');
-export const ChickinApi = new BaseApiService<
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload
->('/production/chickins');

src/services/api/production/chickin.ts

@@ -0,0 +1,43 @@
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
+import { BaseApiService } from '../base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+
+export class ChickinService extends BaseApiService<
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload
+> {
+  constructor(basePath: string = '/production/chickins') {
+    super(basePath);
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'APPROVED' | 'REJECTED'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: [id],
+          notes: `${action} chickin ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve chickin:', error);
+      return undefined;
+    }
+  }
+}
+
+export const ChickinApi = new ChickinService('/production/chickins');

src/services/api/production/project-flock.ts

@@ -0,0 +1,203 @@
+import {
+  CreateProjectFlockPayload,
+  ProjectFlock,
+  UpdateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+import { BaseApiService } from '../base';
+import {
+  BaseApiResponse,
+  BaseGroupedApproval,
+  ErrorApiResponse,
+  GroupedApprovals,
+  SuccessApiResponse,
+} from '@/types/api/api-general';
+import { sleep } from '@/lib/helper';
+import { httpClient } from '@/services/http/client';
+import axios from 'axios';
+import { Flock } from '@/types/api/master-data/flock';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { RequestOptions } from '@/services/http/base';
+
+export class ProjectFlockService extends BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  UpdateProjectFlockPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+  /**
+   * Get Approval Lines
+   */
+  async getApprovalLines(
+    id: number
+  ): Promise<
+    | BaseApiResponse<BaseGroupedApproval[]>
+    | ErrorApiResponse
+    | SuccessApiResponse<BaseGroupedApproval[]>
+    | undefined
+  > {
+    const path = `/approvals`;
+    try {
+      return await httpClient<SuccessApiResponse<BaseGroupedApproval[]>>(path, {
+        method: 'GET',
+        query: {
+          module_id: id,
+          module_name: 'PROJECT_FLOCKS',
+          group_step_number: true,
+        },
+      } as RequestOptions);
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Lookup for Project Flock Kandang
+   */
+  async lookupProjectFlockKandang(
+    projectFlockId: number,
+    kandangId: number
+  ): Promise<
+    | BaseApiResponse<
+        | ErrorApiResponse
+        | SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+      >
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/kandangs/lookup`;
+      return await httpClient<
+        BaseApiResponse<
+          SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+        >
+      >(path, {
+        method: 'GET',
+        body: {
+          project_flock_id: projectFlockId,
+          kandang_id: kandangId,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Get Next Period of Project Flock
+   */
+  async getNextPeriod(id: string): Promise<
+    | BaseApiResponse<{
+        flock: Flock;
+        next_period: number;
+      }>
+    | ErrorApiResponse
+    | SuccessApiResponse<{
+        flock: Flock;
+        next_period: number;
+      }>
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/kandangs/${id}`;
+      return await httpClient<
+        SuccessApiResponse<{
+          flock: Flock;
+          next_period: number;
+        }>
+      >(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Approve single Project Flock
+   */
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'APPROVED');
+  }
+
+  /**
+   * Reject single Project Flock
+   */
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'REJECTED');
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprove(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'APPROVED');
+  }
+
+  /**
+   * Reject Bulk Project Flock
+   */
+  async bulkReject(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'REJECTED');
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprovalAction(
+    ids: number[],
+    action: 'APPROVED' | 'REJECTED'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: ids,
+          notes: `Bulk ${action} Project Flock ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
+    }
+  }
+}
+
+export const ProjectFlockApi = new ProjectFlockService(
+  '/production/project-flocks'
+);

src/types/api/api-general.d.ts

@@ -98,6 +98,7 @@ export type flags =
   | 'OVK';
 
 export type BaseApproval = {
+  id?: number;
   step_number: number;
   step_name: string;
   action: string;

src/types/api/marketing/marketing.d.ts

@@ -0,0 +1,72 @@
+import { Customer } from '@/types/api/master-data/customer';
+import {
+  BaseApproval,
+  BaseMetadata,
+  CreatedUser,
+} from '@/types/api/api-general';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type BaseMarketing = {
+  id: number;
+  status?: string;
+  so_number: string;
+  customer: Customer;
+  so_docs: string;
+  so_date: string;
+  sales_person: CreatedUser;
+  notes: string;
+  grand_total: number;
+  approval: BaseApproval;
+  marketing_products?: MarketingProduct[];
+};
+
+export type MarketingProduct = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+  marketing_delivery_products?: MarketingDeliveryProducts;
+};
+
+export type MarketingDeliveryProducts = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  delivery_date: string;
+  vehicle_number: string;
+  do_number?: string | undefined;
+};
+
+export type Marketing = BaseMetadata & BaseMarketing;
+
+export type CreateMarketingPayload = {
+  customer_id: number;
+  date: string;
+  notes: string;
+  marketing_products: CreateMarketingProductPayload[];
+};
+export type UpdateMarketingPayload = CreateMarketingPayload;
+
+export type CreateMarketingProductPayload = {
+  id?: number;
+  vehicle_number: string;
+  kandang_id: string | number | undefined;
+  kandang: Kandang | undefined;
+  product_warehouse_id: string | number | undefined;
+  product_warehouse: ProductWarehouse | undefined;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  uom: string | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  delivery_date?: string | null;
+};
+export type UpdateMarketingProductPayload = CreateMarketingProductPayload;

src/types/api/master-data/flock.d.ts

@@ -12,15 +12,3 @@ export type CreateFlockPayload = {
 };
 
 export type UpdateFlockPayload = CreateFlockPayload;
-
-// ---------------------------------------
-// TODO: adjust this later after Transfer to Laying API done
-import { BaseKandang } from '@/types/api/master-data/kandang';
-
-export type FlockWithKandangs = BaseFlock & {
-  totalQuantity: number;
-  kandangs: {
-    kandang: BaseKandang;
-    quantity: number;
-  }[];
-};

src/types/api/master-data/kandang.d.ts

@@ -7,7 +7,10 @@ export type BaseKandang = {
   name: string;
   status: string;
   location: BaseLocation;
+  capacity: number;
   pic: BaseUser;
+  project_flock_kandang_id?: number;
+  capacity: number;
 };
 
 export type Kandang = BaseMetadata & BaseKandang;
@@ -15,6 +18,7 @@ export type Kandang = BaseMetadata & BaseKandang;
 export type CreateKandangPayload = {
   name: string;
   location_id: number;
+  capacity: number;
   pic_id: number;
 };
 

src/types/api/production/chickin.d.ts

@@ -14,9 +14,11 @@ export type Chickin = BaseMetadata & BaseChickin;
 
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
-  chick_in_date: string;
+  chickin_requests: {
-  note: string;
+    chick_in_date: string;
-  quantity?: number;
+    note?: string;
+    product_warehouse_id: number;
+  }[];
 };
 
 export type UpdateChickinPayload = CreateChickinPayload & {

src/types/api/production/project-flock-kandang.d.ts

@@ -1,5 +1,8 @@
 import { Kandang } from '@/type/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Supplier } from '../master-data/supplier';
+import { BaseApproval } from '../api-general';
 
 export type BaseProjectFlockKandang = {
   id: number;
@@ -7,7 +10,27 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
-  available_quantity?: number;
+  available_qtys?: AvailableQty[];
+  chickins?: Chickin[];
+  approval: BaseApproval;
+};
+
+export type AvailableQty = {
+  chick_in_date?: string;
+  available_qty: number;
+  product_warehouse: ProductWarehouse;
+  note?: string;
+};
+
+export type Chickin = {
+  id: number;
+  project_flock_kandang_id: number;
+  chick_in_date: string;
+  product_warehouse_id: number;
+  product_warehouse: ProductWarehouse;
+  usage_qty: number;
+  pending_usage_qty: number;
+  note: string;
 };
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;

src/types/api/production/project-flock.d.ts

@@ -8,9 +8,11 @@ import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 export type BaseProjectFlock = {
   id: number;
   name: string;
+  flock_name: string;
   status: string;
-  flock: Flock;
+  flock?: Flock;
-  flock_id: number;
+  flock_i?: number;
+  flock_name: string;
   area: Area;
   area_id: number;
   category: string;
@@ -20,7 +22,9 @@ export type BaseProjectFlock = {
   location_id: number;
   period: number;
   kandang_ids: number[];
-  kandangs: Kandang[];
+  kandangs: (Kandang & {
+    project_flock_kandang_id: number;
+  })[];
   approval: BaseApproval;
 };
 
@@ -32,7 +36,7 @@ export type PeriodFlock = {
 export type ProjectFlock = BaseMetadata & BaseProjectFlock;
 
 export type CreateProjectFlockPayload = {
-  flock_id: number;
+  flock_name: string;
   area_id: number;
   category: string;
   fcr_id: number;
@@ -47,3 +51,13 @@ export type ProjectFlockApprovalPayload = {
   action: 'APPROVED' | 'REJECTED';
   approvable_ids: number[];
 };
+
+export type ProjectFlockAvailableQuantity = {
+  project_flock_id: number;
+  flock_name: string;
+  category: 'LAYING' | 'GROWING';
+  kandangs: {
+    project_flock_kandang_id: number;
+    available_qty: number;
+  }[];
+};

src/types/api/production/transfer-to-laying.d.ts

@@ -1,34 +1,88 @@
-import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import {
-import { Kandang } from '@/types/api/master-data/kandang';
+  BaseApiResponse,
+  BaseMetadata,
+  CreatedUser,
+  flags,
+} from '@/types/api/api-general';
+import { BaseKandang, Kandang } from '@/types/api/master-data/kandang';
+import { WarehouseType } from '@/types/api/master-data/warehouse';
 
 export type BaseTransferToLaying = {
   id: number;
+  transfer_number: string;
   transfer_date: string;
-  flock_source: {
+  notes: string;
+  from_project_flock: {
     id: number;
-    name: string;
+    flock_name: string;
+    category: 'GROWING' | 'LAYING';
   };
-  flock_destination: {
+  to_project_flock: {
     id: number;
-    name: string;
+    flock_name: string;
+    category: 'GROWING' | 'LAYING';
   };
-  quantity: number;
+  pending_usage_qty: number | null;
-  kandangs: {
+  usage_qty: number | null;
-    kandang: Kandang;
+
-    quantity: number;
+  sources: {
+    source_project_flock_kandang: {
+      id: number;
+      kandang: Omit<BaseKandang, 'status' | 'location' | 'pic'>;
+    };
+    qty: number;
+    product_warehouse: {
+      product: {
+        id: number;
+        name: string;
+      };
+      warehouse: {
+        id: number;
+        name: string;
+        type: WarehouseType;
+      };
+    };
   }[];
-  reason: string;
+
+  targets: {
+    target_project_flock_kandang: {
+      id: number;
+      kandang: Omit<BaseKandang, 'status' | 'location' | 'pic'>;
+    };
+    qty: number;
+    product_warehouse: {
+      product: {
+        id: number;
+        name: string;
+      };
+      warehouse: {
+        id: number;
+        name: string;
+        type: WarehouseType;
+      };
+    };
+  }[];
+
+  created_by: number;
+  created_user: CreatedUser;
+  created_at: string;
+
+  approval: BaseApproval;
 };
 
 export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
 
 export type CreateTransferToLayingPayload = {
   transfer_date: string;
-  flock_source_id: number;
+  source_project_flock_id: number;
-  flock_destination_id: number;
+  target_project_flock_id: number;
   totalQuantity: number;
-  kandangs: {
+  source_kandangs: {
-    kandang_id: number;
+    project_flock_kandang_id: number;
+    quantity: number;
+  }[];
+  target_kandangs: {
+    project_flock_kandang_id: number;
     quantity: number;
   }[];
   reason: string;