From 968d9e1f2a143e8be9b72092111c672ea46d861e Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 6 Feb 2026 09:46:37 +0700
Subject: [PATCH] fix: adjust ProjectFlockForm styling and create
 ProjectFlockFormConfirmationTable component

---
 .../project-flock/form/ProjectFlockForm.tsx   | 1176 ++++++++++-------
 1 file changed, 724 insertions(+), 452 deletions(-)

diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index f0ee4752..ed6b83ce 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -19,7 +19,7 @@ import {
 import { Icon } from '@iconify/react';
 import { FormikErrors, useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockBudgetsSchemaType,
@@ -47,6 +47,13 @@ import { useUiStore } from '@/stores/ui/ui.store';
 import RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import Tooltip from '@/components/Tooltip';
+import Table from '@/components/Table';
+import { ColumnDef } from '@tanstack/react-table';
+import StatusBadge from '@/components/helper/StatusBadge';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import ProjectFlockConfirmationModal from '../ProjectFlockConfirmationModal';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -56,6 +63,150 @@ interface ProjectFlockFormProps {
   >;
 }
 
+export interface ProjectFlockFormConfirmationTableType {
+  label: string;
+  value: ReactNode;
+  subRows?: ProjectFlockFormConfirmationTableType[];
+}
+
+export const ProjectFlockFormConfirmationTable = ({
+  projectFlockForm,
+  kandangs,
+}: {
+  projectFlockForm?: ProjectFlockFormValues;
+  kandangs: Kandang[];
+}) => {
+  const confirmationTableColumns: ColumnDef<ProjectFlockFormConfirmationTableType>[] =
+    [
+      {
+        header: 'Label',
+        accessorKey: 'label',
+        enableSorting: false,
+        cell: ({ row }) => {
+          const isSubRow = row.depth > 0;
+
+          return (
+            <>
+              {!isSubRow && row.original.label}
+
+              {isSubRow && (
+                <div
+                  className={cn('w-full min-h-full flex items-stretch gap-0')}
+                >
+                  <div className='w-px mx-4 bg-base-content/10' />
+                  <span className='p-3'>{row.original.label}</span>
+                </div>
+              )}
+            </>
+          );
+        },
+      },
+      {
+        header: 'Value',
+        accessorKey: 'value',
+        enableSorting: false,
+        cell: ({ row }) => row.original.value,
+      },
+    ];
+
+  const productsData: ProjectFlockFormConfirmationTableType[] =
+    projectFlockForm?.project_budgets?.map((product) => ({
+      label: 'Jenis Produk',
+      value: product.nonstock?.label ?? '-',
+      subRows: [
+        {
+          label: 'Jumlah Pembelian',
+          value: String(product.qty),
+        },
+        {
+          label: 'Harga Satuan',
+          value: String(formatCurrency(Number(product.price))),
+        },
+        {
+          label: 'Total Harga',
+          value: String(formatCurrency(Number(product.total_price))),
+        },
+      ],
+    })) ?? [];
+
+  const confirmationTableData: ProjectFlockFormConfirmationTableType[] = [
+    {
+      label: 'Tanggal',
+      value: formatDate(Date.now(), 'DD MMMM YYYY'),
+    },
+    {
+      label: 'Area',
+      value: projectFlockForm?.area?.label ?? '-',
+    },
+    {
+      label: 'Lokasi',
+      value: projectFlockForm?.location?.label ?? '-',
+    },
+    {
+      label: 'Flock',
+      value: projectFlockForm?.flock?.label ?? '-',
+    },
+    {
+      label: 'Kategori',
+      value: projectFlockForm?.category ?? '-',
+    },
+    {
+      label: 'Standar Produksi',
+      value: projectFlockForm?.production_standard?.label ?? '-',
+    },
+    {
+      label: 'Informasi Kandang',
+      value: '',
+      subRows:
+        projectFlockForm?.kandang_ids?.map((kandang_id) => {
+          const kandang = kandangs.find((kandang) => kandang.id === kandang_id);
+
+          const kandangName = kandang?.name ?? '-';
+          const kandangAvailability = kandang?.status;
+
+          return {
+            label: kandangName,
+            value: (
+              <StatusBadge
+                color={
+                  kandangAvailability === 'NON_ACTIVE' ? 'info' : 'neutral'
+                }
+                text={
+                  kandangAvailability === 'NON_ACTIVE'
+                    ? 'Tersedia'
+                    : 'Tidak Tersedia'
+                }
+                className={{ badge: 'text-nowrap' }}
+              />
+            ),
+          };
+        }) ?? [],
+    },
+    {
+      label: 'Estimasi Anggaran per Kandang',
+      value: '',
+    },
+    ...productsData,
+  ];
+
+  return (
+    <Table<ProjectFlockFormConfirmationTableType>
+      columns={confirmationTableColumns}
+      data={confirmationTableData}
+      withPagination={false}
+      pageSize={10000}
+      expanded={true}
+      getSubRows={(row) => row.subRows}
+      className={{
+        headerRowClassName: 'border-b border-base-content/10',
+        bodyRowClassName: 'border-none',
+        bodySubRowClassName: () => 'border-none',
+        bodySubRowColumnClassName: () => 'first:p-0',
+      }}
+    />
+  );
+};
+
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
@@ -64,6 +215,8 @@ const ProjectFlockForm = ({
   // State
   const router = useRouter();
 
+  const [formStep, setFormStep] = useState<'form' | 'confirmation'>('form');
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
@@ -87,6 +240,7 @@ const ProjectFlockForm = ({
   const subscribeValidate = useUiStore((s) => s.subscribeValidate);
   const setIsValid = useUiStore((s) => s.setIsValid);
 
+  const successModal = useModal();
   const deleteModal = useModal();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -285,7 +439,7 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(createProjectFlockRes)) {
       toast.success(createProjectFlockRes?.message as string);
       handleReset();
-      router.push('/production/project-flock');
+      successModal.openModal();
     }
     if (isResponseError(createProjectFlockRes)) {
       setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
@@ -303,7 +457,7 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(updateProjectFlockRes)) {
       toast.success(updateProjectFlockRes?.message as string);
       handleReset();
-      router.push('/production/project-flock');
+      successModal.openModal();
     }
     if (isResponseError(updateProjectFlockRes)) {
       setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
@@ -320,6 +474,10 @@ const ProjectFlockForm = ({
     formikSetValues(formikInitialValues);
   };
 
+  const [formikLastValues, setFormikLastValues] = useState<
+    ProjectFlockFormValues | undefined
+  >(undefined);
+
   // Formik InitialValue
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     const trimFlock =
@@ -429,6 +587,8 @@ const ProjectFlockForm = ({
         }),
       };
 
+      setFormikLastValues(values);
+
       switch (formType) {
         case 'add':
           await createProjectFlockHandler(payload);
@@ -654,21 +814,67 @@ const ProjectFlockForm = ({
   });
 
   // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+  const { formErrorList, close, setFormErrorList, handleFormSubmit } =
+    useFormikErrorList(formik);
 
   return (
     <>
-      <section className='w-full h-full sm:w-[446px] overflow-y-auto'>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          const submitHandler = async () => {
+            const validateFormErrorResult = await formik.validateForm();
+            const isFormError = Object.keys(validateFormErrorResult).length > 0;
+
+            if (isFormError) {
+              const errorMessages = getUniqueFormikErrors(
+                validateFormErrorResult
+              );
+              setFormErrorList(errorMessages);
+            }
+
+            if (isFormError) {
+              return;
+            }
+
+            if (formStep === 'form') {
+              setFormStep('confirmation');
+              return;
+            }
+
+            handleFormSubmit(e);
+          };
+
+          submitHandler();
+        }}
+        onReset={formik.handleReset}
+        className='w-full h-full sm:w-[446px] flex flex-col'
+      >
         {/* Header */}
         <DrawerHeader
           leftIcon={
             formType == 'add' ? 'heroicons:chevron-left' : 'mdi:arrow-left'
           }
-          leftIconHref={
-            formType == 'add'
-              ? '/production/project-flock'
-              : `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
-          }
+          // leftIconHref={
+          //   formType == 'add'
+          //     ? '/production/project-flock'
+          //     : `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
+          // }
+          leftIconOnClick={() => {
+            if (formStep === 'confirmation') {
+              setFormStep('form');
+              return;
+            }
+
+            if (formType == 'add') {
+              router.push('/production/project-flock');
+            } else {
+              router.push(
+                `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
+              );
+            }
+          }}
           leftIconClassName='hover:text-gray-400'
           subtitle={formType == 'add' ? 'Add List Flock' : 'Update Flock'}
           className='sticky top-0 z-10 bg-base-100'
@@ -685,7 +891,9 @@ const ProjectFlockForm = ({
               }}
               className='p-0 text-error'
             >
-              <Icon icon='heroicons:trash' width={20} height={20} />
+              <Tooltip content='Hapus' position='bottom'>
+                <Icon icon='heroicons:trash' width={20} height={20} />
+              </Tooltip>
             </Button>
           )}
 
@@ -699,470 +907,534 @@ const ProjectFlockForm = ({
               }}
               className='p-0 text-error'
             >
-              <Icon icon='heroicons:trash' width={20} height={20} />
+              <Tooltip content='Hapus' position='bottom'>
+                <Icon icon='heroicons:trash' width={20} height={20} />
+              </Tooltip>
             </Button>
           )}
         </DrawerHeader>
-        {projectFlockFormErrorMessage && (
-          <div className='my-4'>
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{projectFlockFormErrorMessage}</span>
-              <Button
-                onClick={() => {
-                  setProjectFlockFormErrorMessage('');
-                }}
-                variant='link'
-              >
-                <Icon icon='material-symbols:close' width={24} height={24} />
-              </Button>
-            </div>
-          </div>
-        )}
 
-        <form
-          className='w-auto h-auto'
-          onSubmit={handleFormSubmit}
-          onReset={formik.handleReset}
-        >
-          {/* Form Informasi Umum */}
-          <div className='flex flex-col p-4'>
-            <h2 className='text-base font-medium text-base-content/50 font-roboto'>
-              Informasi Umum
-            </h2>
+        <div className='w-auto h-full overflow-y-auto'>
+          {formStep === 'form' && (
+            <div className='h-full'>
+              {/* Form Informasi Umum */}
+              <div className='flex flex-col p-4'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+                  Informasi Umum
+                </h2>
 
-            <SelectInput
-              required
-              label='Area'
-              placeholder='Pilih Area'
-              value={formik.values.area as OptionType}
-              onChange={areaChangeHandler}
-              options={optionsArea}
-              isLoading={isLoadingAreas}
-              isError={formik.touched.area_id && Boolean(formik.errors.area_id)}
-              errorMessage={formik.errors.area_id as string}
-              onInputChange={setInputValueArea}
-              onMenuScrollToBottom={loadMoreArea}
-              isClearable
-              isDisabled={formType != 'add'}
-            />
-            <SelectInput
-              required
-              label='Lokasi'
-              placeholder='Pilih Lokasi'
-              value={formik.values.location as OptionType}
-              onChange={locationChangeHandler}
-              options={
-                selectedArea != '' || initialValues?.area?.id
-                  ? optionsLocation
-                  : []
-              }
-              isLoading={isLoadingLocations}
-              isError={
-                formik.touched.location_id && Boolean(formik.errors.location_id)
-              }
-              onInputChange={setInputValueLocation}
-              onMenuScrollToBottom={loadMoreLocation}
-              errorMessage={formik.errors.location_id as string}
-              isClearable
-              isDisabled={formType != 'add' || disabledLocation}
-            />
-            <SelectInput
-              required
-              label='Flock'
-              placeholder='Pilih Flock'
-              value={
-                formik.values.flock_name
-                  ? ({
-                      label: formik.values.flock_name,
-                      value: optionsFlock.find((flock) => {
-                        return flock.label === formik.values.flock_name;
-                      })?.value,
-                    } as OptionType)
-                  : undefined
-              }
-              onChange={(val) => {
-                optionChangeHandler(val, 'flock');
-                setSelectedFlock((val as OptionType)?.label);
-                formik.setFieldValue('flock_name', (val as OptionType)?.label);
-              }}
-              options={optionsFlock}
-              onInputChange={setInputValueFlock}
-              onMenuScrollToBottom={loadMoreFlock}
-              isLoading={isLoadingFlocks}
-              isError={
-                formik.touched.flock_name && Boolean(formik.errors.flock_name)
-              }
-              errorMessage={formik.errors.flock_name as string}
-              isClearable
-              isDisabled={formType != 'add'}
-            />
-            <SelectInput
-              required
-              label='FCR'
-              placeholder='Pilih FCR'
-              value={formik.values.fcr as OptionType}
-              onChange={(val) => {
-                optionChangeHandler(val, 'fcr');
-              }}
-              onInputChange={setInputValueFcr}
-              onMenuScrollToBottom={loadMoreFcr}
-              options={optionsFcr}
-              isLoading={isLoadingFcrs}
-              isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
-              errorMessage={formik.errors.fcr_id as string}
-              isClearable
-              isDisabled={formType != 'add'}
-            />
-            <SelectInput
-              required
-              label='Kategori'
-              placeholder='Pilih Kategori'
-              value={formik.values.category_option as OptionType}
-              onChange={categoryChangeHandler}
-              options={FLOCK_CATEGORY_OPTIONS}
-              isError={
-                formik.touched.category && Boolean(formik.errors.category)
-              }
-              errorMessage={formik.errors.category as string}
-              isClearable
-              isDisabled={formType != 'add'}
-            />
-            <SelectInput
-              required
-              label='Standar Produksi'
-              placeholder='Pilih Standar Produksi'
-              value={formik.values.production_standard as OptionType}
-              onChange={(val) => {
-                optionChangeHandler(val, 'production_standard');
-              }}
-              onInputChange={setInputValueProductionStandard}
-              onMenuScrollToBottom={loadMoreProductionStandard}
-              options={optionsProductionStandards}
-              isLoading={isLoadingProductionStandards}
-              isError={
-                formik.touched.production_standard_id &&
-                Boolean(formik.errors.production_standard_id)
-              }
-              errorMessage={formik.errors.production_standard_id as string}
-              isClearable
-              isDisabled={formType != 'add'}
-            />
-            <NumberInput
-              name='period'
-              label='Periode'
-              disabled
-              readOnly
-              placeholder='Periode Flock'
-              value={selectedLocation ? inputPeriod : ''}
-            />
-          </div>
+                <SelectInput
+                  required
+                  label='Area'
+                  placeholder='Pilih Area'
+                  value={formik.values.area as OptionType}
+                  onChange={areaChangeHandler}
+                  options={optionsArea}
+                  isLoading={isLoadingAreas}
+                  isError={
+                    formik.touched.area_id && Boolean(formik.errors.area_id)
+                  }
+                  errorMessage={formik.errors.area_id as string}
+                  onInputChange={setInputValueArea}
+                  onMenuScrollToBottom={loadMoreArea}
+                  isClearable
+                  isDisabled={formType != 'add'}
+                />
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  placeholder='Pilih Lokasi'
+                  value={formik.values.location as OptionType}
+                  onChange={locationChangeHandler}
+                  options={
+                    selectedArea != '' || initialValues?.area?.id
+                      ? optionsLocation
+                      : []
+                  }
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
+                  }
+                  onInputChange={setInputValueLocation}
+                  onMenuScrollToBottom={loadMoreLocation}
+                  errorMessage={formik.errors.location_id as string}
+                  isClearable
+                  isDisabled={formType != 'add' || disabledLocation}
+                />
+                <SelectInput
+                  required
+                  label='Flock'
+                  placeholder='Pilih Flock'
+                  value={
+                    formik.values.flock_name
+                      ? ({
+                          label: formik.values.flock_name,
+                          value: optionsFlock.find((flock) => {
+                            return flock.label === formik.values.flock_name;
+                          })?.value,
+                        } as OptionType)
+                      : undefined
+                  }
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'flock');
+                    setSelectedFlock((val as OptionType)?.label);
+                    formik.setFieldValue(
+                      'flock_name',
+                      (val as OptionType)?.label
+                    );
+                  }}
+                  options={optionsFlock}
+                  onInputChange={setInputValueFlock}
+                  onMenuScrollToBottom={loadMoreFlock}
+                  isLoading={isLoadingFlocks}
+                  isError={
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
+                  }
+                  errorMessage={formik.errors.flock_name as string}
+                  isClearable
+                  isDisabled={formType != 'add'}
+                />
+                <SelectInput
+                  required
+                  label='FCR'
+                  placeholder='Pilih FCR'
+                  value={formik.values.fcr as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'fcr');
+                  }}
+                  onInputChange={setInputValueFcr}
+                  onMenuScrollToBottom={loadMoreFcr}
+                  options={optionsFcr}
+                  isLoading={isLoadingFcrs}
+                  isError={
+                    formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
+                  }
+                  errorMessage={formik.errors.fcr_id as string}
+                  isClearable
+                  isDisabled={formType != 'add'}
+                />
+                <SelectInput
+                  required
+                  label='Kategori'
+                  placeholder='Pilih Kategori'
+                  value={formik.values.category_option as OptionType}
+                  onChange={categoryChangeHandler}
+                  options={FLOCK_CATEGORY_OPTIONS}
+                  isError={
+                    formik.touched.category && Boolean(formik.errors.category)
+                  }
+                  errorMessage={formik.errors.category as string}
+                  isClearable
+                  isDisabled={formType != 'add'}
+                />
+                <SelectInput
+                  required
+                  label='Standar Produksi'
+                  placeholder='Pilih Standar Produksi'
+                  value={formik.values.production_standard as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'production_standard');
+                  }}
+                  onInputChange={setInputValueProductionStandard}
+                  onMenuScrollToBottom={loadMoreProductionStandard}
+                  options={optionsProductionStandards}
+                  isLoading={isLoadingProductionStandards}
+                  isError={
+                    formik.touched.production_standard_id &&
+                    Boolean(formik.errors.production_standard_id)
+                  }
+                  errorMessage={formik.errors.production_standard_id as string}
+                  isClearable
+                  isDisabled={formType != 'add'}
+                />
+                <NumberInput
+                  name='period'
+                  label='Periode'
+                  disabled
+                  readOnly
+                  placeholder='Periode Flock'
+                  value={selectedLocation ? inputPeriod : ''}
+                />
+              </div>
 
-          {/* Form Pilih Kandang */}
+              {/* Form Pilih Kandang */}
 
-          <div className='flex flex-col gap-3 p-4 border-y border-base-content/10'>
-            <h2 className='text-base font-medium text-base-content/50 font-roboto'>
-              Informasi Kandang
-            </h2>
-            <div className='overflow-x-auto duration-300 ease-in-out'>
-              {isLoadingKandang && (
-                <span className='loading loading-dots loading-xl block mx-auto' />
-              )}
-              <ProjectFlockKandangTable
-                listPeriods={
-                  isResponseSuccess(periodFlocks) ? periodFlocks.data : []
-                }
-                listKandang={optionsKandang}
-                rowSelection={rowSelection}
-                setRowSelection={setRowSelection}
-                selectedIds={formik.values.kandang_ids}
-                formType={formType}
-                initialValues={initialValues}
-              />
-            </div>
-          </div>
+              <div className='flex flex-col gap-3 p-4 border-y border-base-content/10'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+                  Informasi Kandang
+                </h2>
+                <div className='overflow-x-auto duration-300 ease-in-out'>
+                  {isLoadingKandang && (
+                    <span className='loading loading-dots loading-xl block mx-auto' />
+                  )}
+                  <ProjectFlockKandangTable
+                    listPeriods={
+                      isResponseSuccess(periodFlocks) ? periodFlocks.data : []
+                    }
+                    listKandang={optionsKandang}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
+                    selectedIds={formik.values.kandang_ids}
+                    formType={formType}
+                    initialValues={initialValues}
+                  />
+                </div>
+              </div>
 
-          {/* Card Estimasi Budget */}
-          <div className='flex flex-col p-4'>
-            <div className='flex flex-col gap-4'>
-              {formik.values.project_budgets &&
-              formik.values.project_budgets.length > 0 ? (
-                formik.values.project_budgets.map((budget, index) => (
-                  <div key={index} className='flex flex-col'>
-                    {/* <div className='flex flex-row justify-between items-center mb-2'>
-                      <Button
-                        type='button'
-                        color='error'
-                        onClick={() =>
-                          onDeleteBudgetRowHandler(
-                            budget.nonstock_id as number,
-                            index
-                          )
-                        }
-                      >
-                        <Icon icon='mdi:trash' width={16} height={16} />
-                      </Button>
-                    </div> */}
+              {/* Card Estimasi Budget */}
+              <div className='flex flex-col'>
+                <div className='flex flex-col'>
+                  {formik.values.project_budgets &&
+                  formik.values.project_budgets.length > 0 ? (
+                    formik.values.project_budgets.map((budget, index) => {
+                      const nonstockUomName = isResponseSuccess(nonstocks)
+                        ? (nonstocks.data.find(
+                            (ns) => ns.id === budget.nonstock_id
+                          )?.uom?.name ?? '')
+                        : '';
 
-                    <div className='flex flex-row justify-between items-center'>
-                      <h2 className='text-base font-medium text-base-content/50 font-roboto'>
-                        Estimasi Anggaran Per Flock
-                      </h2>
+                      return (
+                        <div
+                          key={index}
+                          className='flex flex-col p-4 border-b border-base-content/10'
+                        >
+                          <div className='flex flex-row justify-between items-center'>
+                            <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+                              Estimasi Anggaran Per Flock
+                            </h2>
 
-                      <Button
-                        type='button'
-                        variant='ghost'
-                        color='none'
-                        onClick={() =>
-                          onDeleteBudgetRowHandler(
-                            budget.nonstock_id as number,
-                            index
-                          )
-                        }
-                        className='p-0 text-error'
-                      >
-                        <Icon icon='heroicons:trash' width={20} height={20} />
-                      </Button>
-                    </div>
-
-                    <div className='flex flex-row justify-between items-center'>
-                      <SelectInput
-                        isClearable
-                        label='Jenis Produk'
-                        options={filteredNonStockOptions ?? []}
-                        isLoading={isLoadingNonstocks}
-                        placeholder='Pilih Jenis Produk'
-                        value={formik.values.project_budgets[index].nonstock}
-                        onInputChange={setInputValueNonstock}
-                        onMenuScrollToBottom={loadMoreNonstock}
-                        onChange={(val) => {
-                          const updatedBudgets = [
-                            ...formik.values.project_budgets,
-                          ];
-                          updatedBudgets[index].nonstock = val as OptionType;
-                          updatedBudgets[index].nonstock_id =
-                            (val as OptionType) ? (val as OptionType).value : 0;
-                          formik.setFieldValue(
-                            'project_budgets',
-                            updatedBudgets
-                          );
-                          formik.setFieldTouched(
-                            `project_budgets[${index}].nonstock_id`,
-                            true
-                          );
-                        }}
-                        errorMessage={
-                          (
-                            formik.errors.project_budgets?.[
-                              index
-                            ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                          )?.nonstock_id as string
-                        }
-                        isError={
-                          formik.touched.project_budgets?.[index]
-                            ?.nonstock_id &&
-                          Boolean(
-                            (
-                              formik.errors.project_budgets?.[
-                                index
-                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                            )?.nonstock_id as string
-                          )
-                        }
-                      />
-                    </div>
-                    <div className='flex flex-row justify-between items-center'>
-                      <NumberInput
-                        name={`project_budgets[${index}].qty`}
-                        label='Jumlah Pembelian'
-                        placeholder='Masukkan Jumlah Pembelian'
-                        value={formik.values.project_budgets[index].qty}
-                        onChange={(e) =>
-                          handleBudgetChange(index, 'qty', e.target.value)
-                        }
-                        onBlur={formik.handleBlur}
-                        allowNegative={false}
-                        inputPrefix={
-                          <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
-                            <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
-                              {isResponseSuccess(nonstocks)
-                                ? (nonstocks.data.find(
-                                    (ns) => ns.id === budget.nonstock_id
-                                  )?.uom?.name ?? '')
-                                : ''}
-                            </span>
-
-                            <div className='w-px bg-base-content/10' />
+                            {formik.values.project_budgets.length > 1 && (
+                              <Button
+                                type='button'
+                                variant='ghost'
+                                color='none'
+                                onClick={() =>
+                                  onDeleteBudgetRowHandler(
+                                    budget.nonstock_id as number,
+                                    index
+                                  )
+                                }
+                                className='p-0 text-error'
+                              >
+                                <Icon
+                                  icon='heroicons:trash'
+                                  width={20}
+                                  height={20}
+                                />
+                              </Button>
+                            )}
                           </div>
-                        }
-                        errorMessage={
-                          (
-                            formik.errors.project_budgets?.[
-                              index
-                            ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                          )?.qty as string
-                        }
-                        isError={
-                          formik.touched.project_budgets?.[index]?.qty &&
-                          Boolean(
-                            (
-                              formik.errors.project_budgets?.[
-                                index
-                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                            )?.qty as string
-                          )
-                        }
-                        className={{
-                          inputPrefix:
-                            'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
-                          inputWrapper: 'border-l-0 pl-5',
-                        }}
-                      />
-                    </div>
-                    <div className='flex flex-row justify-between items-center'>
-                      <NumberInput
-                        name={`project_budgets[${index}].price`}
-                        label='Harga Satuan (Rp)'
-                        value={formik.values.project_budgets[index].price}
-                        onChange={(e) =>
-                          handleBudgetChange(index, 'price', e.target.value)
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan Harga Satuan (Rp)'
-                        allowNegative={false}
-                        inputPrefix={
-                          <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
-                            <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
-                              Rp
-                            </span>
 
-                            <div className='w-px bg-base-content/10' />
+                          <div className='flex flex-row justify-between items-center'>
+                            <SelectInput
+                              isClearable
+                              label='Jenis Produk'
+                              options={filteredNonStockOptions ?? []}
+                              isLoading={isLoadingNonstocks}
+                              placeholder='Pilih Jenis Produk'
+                              value={
+                                formik.values.project_budgets[index].nonstock
+                              }
+                              onInputChange={setInputValueNonstock}
+                              onMenuScrollToBottom={loadMoreNonstock}
+                              onChange={(val) => {
+                                const updatedBudgets = [
+                                  ...formik.values.project_budgets,
+                                ];
+                                updatedBudgets[index].nonstock =
+                                  val as OptionType;
+                                updatedBudgets[index].nonstock_id =
+                                  (val as OptionType)
+                                    ? (val as OptionType).value
+                                    : 0;
+                                formik.setFieldValue(
+                                  'project_budgets',
+                                  updatedBudgets
+                                );
+                                formik.setFieldTouched(
+                                  `project_budgets[${index}].nonstock_id`,
+                                  true
+                                );
+                              }}
+                              errorMessage={
+                                (
+                                  formik.errors.project_budgets?.[
+                                    index
+                                  ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                )?.nonstock_id as string
+                              }
+                              isError={
+                                formik.touched.project_budgets?.[index]
+                                  ?.nonstock_id &&
+                                Boolean(
+                                  (
+                                    formik.errors.project_budgets?.[
+                                      index
+                                    ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                  )?.nonstock_id as string
+                                )
+                              }
+                            />
                           </div>
-                        }
-                        errorMessage={
-                          (
-                            formik.errors.project_budgets?.[
-                              index
-                            ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                          )?.price as string
-                        }
-                        isError={
-                          formik.touched.project_budgets?.[index]?.price &&
-                          Boolean(
-                            (
-                              formik.errors.project_budgets?.[
-                                index
-                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                            )?.price as string
-                          )
-                        }
-                        className={{
-                          inputPrefix:
-                            'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
-                          inputWrapper: 'border-l-0 pl-5',
-                        }}
-                      />
-                    </div>
-                    <div className='flex flex-row justify-between items-center'>
-                      <NumberInput
-                        name={`project_budgets[${index}].total_price`}
-                        label='Total Harga'
-                        value={formik.values.project_budgets[index].total_price}
-                        onChange={(e) =>
-                          handleBudgetChange(
-                            index,
-                            'total_price',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan Total Harga'
-                        allowNegative={false}
-                        inputPrefix={
-                          <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
-                            <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
-                              Rp
-                            </span>
+                          <div className='flex flex-row justify-between items-center'>
+                            <NumberInput
+                              name={`project_budgets[${index}].qty`}
+                              label='Jumlah Pembelian'
+                              placeholder='Masukkan Jumlah Pembelian'
+                              value={formik.values.project_budgets[index].qty}
+                              onChange={(e) =>
+                                handleBudgetChange(index, 'qty', e.target.value)
+                              }
+                              onBlur={formik.handleBlur}
+                              allowNegative={false}
+                              inputPrefix={
+                                <>
+                                  {nonstockUomName && (
+                                    <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
+                                      <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
+                                        {nonstockUomName}
+                                      </span>
 
-                            <div className='w-px bg-base-content/10' />
+                                      <div className='w-px bg-base-content/10' />
+                                    </div>
+                                  )}
+                                </>
+                              }
+                              errorMessage={
+                                (
+                                  formik.errors.project_budgets?.[
+                                    index
+                                  ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                )?.qty as string
+                              }
+                              isError={
+                                formik.touched.project_budgets?.[index]?.qty &&
+                                Boolean(
+                                  (
+                                    formik.errors.project_budgets?.[
+                                      index
+                                    ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                  )?.qty as string
+                                )
+                              }
+                              className={{
+                                inputPrefix:
+                                  'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                                inputWrapper: cn('border-l-0 pl-0', {
+                                  'pl-5':
+                                    isResponseSuccess(nonstocks) &&
+                                    budget.nonstock_id,
+                                }),
+                              }}
+                            />
                           </div>
-                        }
-                        errorMessage={
-                          (
-                            formik.errors.project_budgets?.[
-                              index
-                            ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                          )?.total_price as string
-                        }
-                        isError={
-                          formik.touched.project_budgets?.[index]
-                            ?.total_price &&
-                          Boolean(
-                            (
-                              formik.errors.project_budgets?.[
-                                index
-                              ] as FormikErrors<ProjectFlockBudgetsSchemaType>
-                            )?.total_price as string
-                          )
-                        }
-                        className={{
-                          inputPrefix:
-                            'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
-                          inputWrapper: 'border-l-0 pl-5',
-                        }}
-                      />
+                          <div className='flex flex-row justify-between items-center'>
+                            <NumberInput
+                              name={`project_budgets[${index}].price`}
+                              label='Harga Satuan (Rp)'
+                              value={formik.values.project_budgets[index].price}
+                              onChange={(e) =>
+                                handleBudgetChange(
+                                  index,
+                                  'price',
+                                  e.target.value
+                                )
+                              }
+                              onBlur={formik.handleBlur}
+                              placeholder='Masukkan Harga Satuan (Rp)'
+                              allowNegative={false}
+                              inputPrefix={
+                                <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
+                                  <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
+                                    Rp
+                                  </span>
+
+                                  <div className='w-px bg-base-content/10' />
+                                </div>
+                              }
+                              errorMessage={
+                                (
+                                  formik.errors.project_budgets?.[
+                                    index
+                                  ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                )?.price as string
+                              }
+                              isError={
+                                formik.touched.project_budgets?.[index]
+                                  ?.price &&
+                                Boolean(
+                                  (
+                                    formik.errors.project_budgets?.[
+                                      index
+                                    ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                  )?.price as string
+                                )
+                              }
+                              className={{
+                                inputPrefix:
+                                  'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                                inputWrapper: 'border-l-0 pl-5',
+                              }}
+                            />
+                          </div>
+                          <div className='flex flex-row justify-between items-center'>
+                            <NumberInput
+                              name={`project_budgets[${index}].total_price`}
+                              label='Total Harga'
+                              value={
+                                formik.values.project_budgets[index].total_price
+                              }
+                              onChange={(e) =>
+                                handleBudgetChange(
+                                  index,
+                                  'total_price',
+                                  e.target.value
+                                )
+                              }
+                              onBlur={formik.handleBlur}
+                              placeholder='Masukkan Total Harga'
+                              allowNegative={false}
+                              inputPrefix={
+                                <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
+                                  <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
+                                    Rp
+                                  </span>
+
+                                  <div className='w-px bg-base-content/10' />
+                                </div>
+                              }
+                              errorMessage={
+                                (
+                                  formik.errors.project_budgets?.[
+                                    index
+                                  ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                )?.total_price as string
+                              }
+                              isError={
+                                formik.touched.project_budgets?.[index]
+                                  ?.total_price &&
+                                Boolean(
+                                  (
+                                    formik.errors.project_budgets?.[
+                                      index
+                                    ] as FormikErrors<ProjectFlockBudgetsSchemaType>
+                                  )?.total_price as string
+                                )
+                              }
+                              className={{
+                                inputPrefix:
+                                  'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                                inputWrapper: 'border-l-0 pl-5',
+                              }}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className='text-center py-4 text-gray-400'>
+                      Tidak ada data estimasi anggaran.
                     </div>
+                  )}
+
+                  <div className='w-full p-4'>
+                    <Button
+                      type='button'
+                      color='primary'
+                      variant='outline'
+                      onClick={onAddBudgetRowHandler}
+                      disabled={filteredNonStockOptions.length == 0}
+                      className='w-full p-3 rounded-lg text-sm font-semibold hover:text-base-100 focus-visible:text-base-100'
+                    >
+                      Tambah Produk
+                    </Button>
                   </div>
-                ))
-              ) : (
-                <div className='text-center py-4 text-gray-400'>
-                  Tidak ada data estimasi anggaran.
+                </div>
+              </div>
+
+              {(formErrorList.length > 0 || projectFlockFormErrorMessage) && (
+                <div className='p-4'>
+                  <AlertErrorList
+                    formErrorList={formErrorList}
+                    onClose={close}
+                  />
+
+                  {projectFlockFormErrorMessage && (
+                    <div className='my-4'>
+                      <div role='alert' className='alert alert-error'>
+                        <Icon
+                          icon='material-symbols:error-outline'
+                          width={24}
+                          height={24}
+                        />
+                        <span>{projectFlockFormErrorMessage}</span>
+                        <Button
+                          type='button'
+                          onClick={() => {
+                            setProjectFlockFormErrorMessage('');
+                          }}
+                          variant='link'
+                        >
+                          <Icon
+                            icon='material-symbols:close'
+                            width={24}
+                            height={24}
+                          />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
-              <Button
-                type='button'
-                onClick={onAddBudgetRowHandler}
-                disabled={filteredNonStockOptions.length == 0}
-                color='success'
-                className='w-fit self-center'
-              >
-                <Icon icon='mdi:plus' width={16} height={16} /> Add Budget
-              </Button>
             </div>
-          </div>
+          )}
 
-          <div className='p-4'>
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
-          </div>
+          {formStep === 'confirmation' && (
+            <div className='p-4'>
+              <ProjectFlockFormConfirmationTable
+                projectFlockForm={formik.values}
+                kandangs={optionsKandang}
+              />
+            </div>
+          )}
+        </div>
 
-          <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
-            {formType !== 'detail' && (
-              <RequirePermission
-                permissions={
-                  formType == 'add'
-                    ? 'lti.production.project_flocks.create'
-                    : 'lti.production.project_flocks.update'
-                }
+        <div className='p-4 flex-1 flex flex-row justify-center gap-2 flex-wrap shadow-bg'>
+          {formType !== 'detail' && (
+            <RequirePermission
+              permissions={
+                formType == 'add'
+                  ? 'lti.production.project_flocks.create'
+                  : 'lti.production.project_flocks.update'
+              }
+            >
+              <Button
+                type='submit'
+                isLoading={formik.isSubmitting}
+                disabled={formik.isSubmitting}
+                className='w-full p-3 rounded-lg text-sm font-semibold text-base-100'
               >
-                <Button
-                  type='submit'
-                  color='primary'
-                  isLoading={formik.isSubmitting}
-                  disabled={formik.isSubmitting}
-                  className='px-4 w-full'
-                >
-                  <Icon icon='mdi:plus' width={24} height={24} />
-                  {formType == 'add' ? 'Add Flock' : 'Update Flock'}
-                </Button>
-              </RequirePermission>
-            )}
-          </div>
-        </form>
-      </section>
+                Submit
+              </Button>
+            </RequirePermission>
+          )}
+        </div>
+      </form>
+
+      <ProjectFlockConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        text='Data Berhasil Ditambahkan'
+        subtitleText='Data project flock telah berhasil disimpan.'
+        projectFlockForm={formikLastValues}
+        onClose={() => {
+          router.push('/production/project-flock');
+          setFormikLastValues(undefined);
+        }}
+        secondaryButton={undefined}
+      />
 
       <ConfirmationModal
         ref={deleteModal.ref}